113 lines
3.6 KiB
JavaScript
113 lines
3.6 KiB
JavaScript
let parsedArray = [];
|
|
|
|
document.getElementById('copyButton').addEventListener('click', () => {
|
|
const text = document.getElementById('formatText').innerText;
|
|
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
alert('Format wurde in die Zwischenablage kopiert!');
|
|
}).catch(err => {
|
|
console.error('Konnte nicht kopieren: ', err);
|
|
});
|
|
|
|
for (let i = 0; i < parsedArray.length; i += 8) {
|
|
const pageFront = document.createElement("div");
|
|
pageFront.className = "page_front";
|
|
const pageBack = document.createElement("div");
|
|
pageBack.className = "page_back";
|
|
|
|
const currentSlice = parsedArray.slice(i, i + 8);
|
|
currentSlice.forEach(karte => {
|
|
const frontCard = document.createElement("div");
|
|
frontCard.className = "card";
|
|
frontCard.innerHTML = `<h2>${karte.englisch}</h2><div>${karte.ipa}</div><p>${karte.beispielEN}</p>`;
|
|
pageFront.appendChild(frontCard);
|
|
|
|
const backCard = document.createElement("div");
|
|
backCard.className = "card";
|
|
backCard.innerHTML = `<h2>${karte.deutsch}</h2><p>${karte.beispielDE}</p>`;
|
|
pageBack.appendChild(backCard);
|
|
});
|
|
|
|
container.appendChild(pageFront);
|
|
container.appendChild(pageBack);
|
|
}
|
|
});
|
|
|
|
function parseWordText(inputText) {
|
|
const wortBlocks = inputText.trim().split("\n\n");
|
|
const wortListe = [];
|
|
|
|
for (let block of wortBlocks) {
|
|
const lines = block.trim().split("\n").map(line => line.trim());
|
|
|
|
if (lines.length !== 5) {
|
|
console.warn("Block übersprungen (falsches Format):", block);
|
|
continue;
|
|
}
|
|
|
|
const wortObj = {
|
|
englisch: lines[0],
|
|
ipa: lines[1],
|
|
beispielEN: lines[2],
|
|
deutsch: lines[3],
|
|
beispielDE: lines[4]
|
|
};
|
|
|
|
wortListe.push(wortObj);
|
|
}
|
|
|
|
return wortListe;
|
|
}
|
|
|
|
function createPagePair() {
|
|
const frontPage = document.createElement("div");
|
|
frontPage.className = "page page-front";
|
|
|
|
const backPage = document.createElement("div");
|
|
backPage.className = "page page-back";
|
|
|
|
return { frontPage, backPage };
|
|
}
|
|
|
|
const button = document.getElementById("kartenErstellen");
|
|
const onlineContainer = document.getElementById("kartenContainer");
|
|
const frontPage = document.querySelector(".page_front");
|
|
const backPage = document.querySelector(".page_back");
|
|
|
|
button.addEventListener("click", () => {
|
|
const inputText = document.getElementById("inputText").value;
|
|
parsedArray = parseWordText(inputText);
|
|
|
|
kartenContainer.innerHTML = "";
|
|
kartenContainer.style.display = "flex";
|
|
kartenContainer.style.flexDirection = "column";
|
|
|
|
for (let i = 0; i < parsedArray.length; i += 8) {
|
|
|
|
const { frontPage, backPage } = createPagePair();
|
|
|
|
parsedArray.slice(i, i + 8).forEach((karte) => {
|
|
|
|
const frontCard = document.createElement("div");
|
|
frontCard.className = "card card-en";
|
|
frontCard.innerHTML = `
|
|
<h2>${karte.englisch}</h2>
|
|
<div class="ipa">${karte.ipa}</div>
|
|
<div class="example">${karte.beispielEN}</div>
|
|
`;
|
|
frontPage.appendChild(frontCard);
|
|
|
|
const backCard = document.createElement("div");
|
|
backCard.className = "card card-de";
|
|
backCard.innerHTML = `
|
|
<h2>${karte.deutsch}</h2>
|
|
<div class="example">${karte.beispielDE}</div>
|
|
`;
|
|
backPage.appendChild(backCard);
|
|
});
|
|
|
|
kartenContainer.appendChild(frontPage);
|
|
kartenContainer.appendChild(backPage);
|
|
}
|
|
});
|