Kann ich dafür sorgen, dass die Ausgabe innerhalb der Boxen angezeigt wird? ⇐ CSS

[Anonymous]

Ich versuche, eine Karteikartenseite für eine Aufgabe zu erstellen, und der JavaScript-Code funktioniert dafür ordnungsgemäß, aber ich habe Probleme, das Kästchen, das jede Karte umgibt, richtig zu implementieren.
Dies ist mein JavaScript-Code:

Code: Select all

const topicHeading = document.querySelector('.topic-heading');
const flashCard = document.querySelector('.flashcards');

const getHeading = function () {
let heading = prompt('Enter a topic');
if (heading === '' || heading === ' ') {
heading = 'My Flashcards';
};
return heading;
};
const makeCard = (a, b) => {
const cardBox = document.querySelector('.card');
cardBox.appendChild(a);
cardBox.appendChild(b);
};

const card = function () {
const cardBox = document.createElement('section');
cardBox.className = 'card';
flashCard.appendChild(cardBox);
};

const getTerm = () => {
while (true) {
let term = prompt('Give a term');
if (term === '' || term === ' ') {
alert('Please enter a term');
continue;
};
const tr = document.createElement('h3');
tr.className = 'term';
tr.textContent = term;
return (tr);
};
};

const getDef = () => {
while (true) {
let def = prompt('Define the topic');
if (def === '' || def === ' ') {
alert('Please enter a definition');
continue;
};
const definition = document.createElement('p');
definition.className = 'definition';
definition.textContent = def;
return (definition);
};
};

const clearScreen = () => {
setTimeout(() => {
const clear = confirm('Would you like to keep the cards so far?');
if (!clear) {
window.location.reload();
};
}, 15000);
};

// Page execution.
topicHeading.textContent = getHeading();

let add;
do {
card();
makeCard(getTerm(), getDef());
add = confirm('Would you like to add another flashcard?');
} while (add);

clearScreen();

Das ist mein CSS:

Code: Select all

body {
font-family: Arial, Helvetica, sans-serif;
}

.card {
padding: 1em;
border: 1px solid black;
margin-bottom: 1em;
}

Meine Ausgabe für mehrere Iterationen ist diese:

Ich habe versucht, makeCard() über card() zu verschieben, aber das funktioniert logischerweise nicht.
Ich möchte, dass die Begriffe und Definitionen in den neuen Kartenfeldern wiederholt werden, aber sie werden nur im ersten Feld ausgegeben.