Могу ли я добиться того, чтобы результат присутствовал в полях? ⇐ Javascript

[Anonymous]

Я пытаюсь создать страницу с карточками для задания, и у меня правильно работает код JavaScript, но у меня возникли проблемы с правильной реализацией поля, окружающего каждую карточку.
Это мой код JavaScript:

Код: Выделить всё

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();

Это мой CSS:

Код: Выделить всё

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

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

мой вывод для нескольких итераций таков:

Я пробовал переместить makeCard() выше card(), но это логически не работает.
Я хочу, чтобы термины и определения повторялись в новых полях карточек, но они выводятся только в первое поле.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -the-boxes