Using local storage I created an array to hold the flashcards that the user wants to make. However, when I shift to the next page the divs in Javascript aren't appending to the div in HTML.
User input goes into createset.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="users-set">
<div id="title-desc">
<input type="text" placeholder="Title" value="">
<input type="text" placeholder="Description" value="">
</div>
<div id="t-d">
<div class="individualTerm">
<input type="text" placeholder="Term" value="" class="term" id="term1">
<input type="text" placeholder="Definition" value="" class="definition" id="definition1">
</div>
</div>
<button id="addterm">Add</button>
<button id="createset"><a href="setpage.html">Create Set</a></button>
</div>
<script src="createset.js"></script>
</body>
</html>
and then goes into setpage.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flashcard Set</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="bodypart">
<h1>Chemistry Quiz</h1>
<div id="flashcards">
<div class="cardcontainer" >
<div class="card fade" >
<div class="front" ><h2 class="termText"></h2></div>
<div class="back"><h2 class="definitionText"></h2></div>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script src="script.js"></script>
<script src="createset.js"></script>
</body>
</html>
The javascript for the create set is:
const submit = document.getElementById('createset')
const addTerm = document.getElementById('addterm')
const termDiv = document.getElementById('t-d')
const setBody = document.getElementById("bodypart")
var termNums = 1
const flashcardContainer = document.getElementById('flashcards')
if (submit) {
submit.addEventListener("click", createSet)
}
if (addTerm) {
addTerm.addEventListener("click", addTD)
}
function createSet() {
const value = document.getElementsByClassName('definition')[0].value
//terms
var terms = document.querySelectorAll('.term')
let termsArr = Array.prototype.map.call(terms, function(e) {
return e.value
})
console.log(termsArr)
localStorage.setItem("terms", JSON.stringify(termsArr))
// definitions
var defs = document.querySelectorAll('.definition')
let defsArr = Array.prototype.map.call(defs, function(e) {
return e.value
})
console.log(defsArr)
localStorage.setItem("definitions", JSON.stringify(defsArr))
//importSets()
var retrieveTerms = localStorage.getItem("terms")
console.log(retrieveTerms)
document.addEventListener("DOMContentLoaded", function() {
console.log("document")
for (i = 0; i < retrieveTerms.length; i++) {
importSets(i)
console.log(i)
}
})
}
function addTD() {
termNums += 1
var tempDiv = document.createElement('div')
tempDiv.setAttribute('class', 'individualTerm')
var term = document.createElement('input')
var definition = document.createElement('input')
term.setAttribute('type', 'text')
term.setAttribute('placeholder', 'Term')
term.setAttribute('id', 'term'+termNums)
term.setAttribute('class', 'term')
definition.setAttribute('type', 'text')
definition.setAttribute('placeholder', 'Definition')
definition.setAttribute('id', 'definition'+termNums)
definition.setAttribute('class', 'definition')
termDiv.append(tempDiv)
tempDiv.append(term)
tempDiv.append(definition)
// console.log(terms)
}
// flashcard page imports
function importSets(term) {
const cardContainer = document.createElement('div')
const cardFade = document.createElement('div')
const front = document.createElement('div')
const back = document.createElement('div')
const termText = document.createElement('h2')
const definitionText = document.createElement('h2')
cardContainer.setAttribute('class', 'cardcontainer')
cardFade.setAttribute('class', 'card fade')
front.setAttribute('class', 'front')
back.setAttribute('class', 'back')
termText.setAttribute('class', 'termText')
definitionText.setAttribute('class', 'definitionText')
termText.innerHTML = term
definitionText.setAttribute('value', 'definition')
flashcardContainer.append(cardContainer)
/* cardContainer.append(cardFade)
cardFade.append(front)
cardFade.append(back)
front.append(termText)
back.append(definitionText)*/
}
And the javascript for the flashcards is:
const cards = document.querySelectorAll(".card");
const cardcontainer = document.querySelectorAll('.cardcontainer')
/*for (let i = 0; i < card.length; i++) {
addEventListener("click", (card) => {
card.classList.toggle("flipCard");
console.log("clicked");
});
}*/
cards.forEach((e) => {
e.addEventListener("click", () => {
e.classList.toggle("flipCard");
});
});
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n)
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("card");
if (n > slides.length || n < slides.length) {
slideIndex = 1;
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
} ```
Thanks in advance!
