Erste Kommit von Stas
This commit is contained in:
35
WoerterLernen.html
Normal file
35
WoerterLernen.html
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Meine Website</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Flashcards Generator</h1>
|
||||||
|
|
||||||
|
<label for="inputText">Sende deine Wortliste an ChatGPT mit folgender Anweisung:</label>
|
||||||
|
|
||||||
|
<div id="aufgabe_fuer_gpt">
|
||||||
|
<pre id="formatText">
|
||||||
|
Bitte formatiere meine Wortliste exakt nach folgendem Schema.
|
||||||
|
Jeder Eintrag muss durch eine Leerzeile getrennt sein.
|
||||||
|
|
||||||
|
Englisches Wort
|
||||||
|
[IPA-Transkription]
|
||||||
|
Beispielsatz auf Englisch
|
||||||
|
Deutsche Übersetzung des Wortes
|
||||||
|
Beispielsatz auf Deutsch
|
||||||
|
|
||||||
|
</pre>
|
||||||
|
<button id="copyButton" style="position: absolute; top: 5px; right: 5px; cursor: pointer;">📋</button>
|
||||||
|
</div>
|
||||||
|
<textarea id="inputText" rows="10" cols="50" placeholder="Hier Text einfügen..."></textarea>
|
||||||
|
<div id="kartenContainer"></div>
|
||||||
|
<button id="kartenErstellen">Karten erstellen</button>
|
||||||
|
|
||||||
|
<div id="flashcards-container"></div>
|
||||||
|
<script src="js/eigenerCode.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
31
css/style.css
Normal file
31
css/style.css
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
#aufgabe_fuer_gpt {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 500px;
|
||||||
|
background: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
#kartenContainer {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.karte {
|
||||||
|
width: 120px;
|
||||||
|
height: 180px;
|
||||||
|
border: 2px solid #333;
|
||||||
|
border-radius: 10px;
|
||||||
|
background-color: white;
|
||||||
|
box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
}
|
||||||
BIN
img/shared image (5).jfif
Normal file
BIN
img/shared image (5).jfif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 440 KiB |
BIN
img/shared image (6).jfif
Normal file
BIN
img/shared image (6).jfif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 576 KiB |
65
js/eigenerCode.js
Normal file
65
js/eigenerCode.js
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const inputText = document.getElementById("inputText").value;
|
||||||
|
const cards = parseWordText(inputText);
|
||||||
|
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);
|
||||||
|
console.log(wortObj);
|
||||||
|
}
|
||||||
|
|
||||||
|
return wortListe;
|
||||||
|
}
|
||||||
|
|
||||||
|
const button = document.getElementById("kartenErstellen");
|
||||||
|
const container = document.getElementById("kartenContainer");
|
||||||
|
|
||||||
|
button.addEventListener("click", () => {
|
||||||
|
container.innerHTML = "";
|
||||||
|
parsedArray.forEach((karte, index) => {
|
||||||
|
const karteDiv = document.createElement("div");
|
||||||
|
karteDiv.classList.add("karte");
|
||||||
|
|
||||||
|
karteDiv.innerHTML = `
|
||||||
|
<div class="karte-inhalt">
|
||||||
|
<div class="karte-vorderseite">
|
||||||
|
<h2>${karte.englisch}</h2>
|
||||||
|
<p><em>${karte.ipa}</em></p>
|
||||||
|
<p>Beispiel: ${karte.beispielEN}</p>
|
||||||
|
</div>
|
||||||
|
<div class="karte-rückseite">
|
||||||
|
<h2>${karte.deutsch}</h2>
|
||||||
|
<p>Beispiel: ${karte.beispielDE}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
container.appendChild(karteDiv);
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user