javascript – Need Help finding issue in my java script


I have followed a tutorial on making a flashcard software that works asides from the main function when it comes to adding a flash card which is done after pressing the Save button. But when the button is pressed Nothing seems to happen. if you could help my find the reason why this is it would be much appreciated what the page looks like currently

<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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <header>
        <div class="container">
            <div class="nav">
                <h1>Flashcards</h1>
                <div>
                    <button onclick="showCreateCardBox()">New Card</button>
                    <button onclick="delFlashcards()">Del Cards</button>
                </div>
            </div>
        </div>
    </header>
    <div class="container">
        <div class="create-box">
            <h2 style="text-align: center; color: black;"> Create Flashcard</h2>
            <label for="question">Question</label>
            <textarea id="question"></textarea>
            <br>
            <label for="answer">Answer</label>
            <textarea id="answer"></textarea>
            <div>
                <button onclick="addFlashcard()">Save</button>
                <button onclick="hideCreateBox()">Close</button>
            </div>

        </div>
        <div class=""></div>

    </div>
    


    <script src ="script.js"></script>
</body>
</html>
const flashcards = document.getElementsByClassName("flashcards")[0];
const createBox = document.getElementsByClassName("create-box")[0];
const question = document.getElementById("question");
const answer = document.getElementById("answer");
let contentArray = localStorage.getItem('items')? JSON.parse(localStorage.getItem('items')): []; //this checks if we are already using Local storage so that we dont clear the varible contentArray

contentArray.forEach(divMaker);
function divMaker(text) {
    var div = document.createElement("div");
    var h2_question = document.createElement("h2");
    var h2_answer = document.createElement("h2");

    div.classname="flashcard";

    h2_question.setAttribute('style', "border-top:1px solid red; padding: 15px; margin-top:30px");

    h2_question.innerHTML = text.my_question

    h2_answer.setAttribute("style", "text-align: center; display:none; color:red;");
    h2_answer.innerHTML = text.my_answer

    div.appendChild(h2_question);
    div.appendChild(h2_answer);

    div.addEventListener("click",function(){
        if(h2_answer.style.display =="none")
            h2_answer.style.display = "block";
        else
            h2_answer.style.display = "none";

    });
    flashcards.appendChild(div);

}

function addFlashcard() {
    var flashcard_info = {
        'my_question' : question.value,
        'my_answer' : answer.value
    }
    contentArray.push(flashcard_info);
    localStorage.setItem('items', JSON.stringify(contentArray));
    divMaker(contentArray[contentArray.length - 1])
    question.value="";
    answer.value="";
}
function delFlashcards() {
    localStorage.Clear();
    flashcards.innerHTML = '';
    contentArray = [];

}

function showCreateCardBox() {
    createBox.style.display = "block";
}


function hideCreateBox() {
    createBox.style.display = "none";
}




@import url('https://fonts.googleapis.com/css2?family=Nunito:[email protected]&display=swap');


*{
    padding:0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    background-color: whitesmoke;

}

/*
this styling affects the area of the screen where the flash cards to be created will be stored 
*/

header {
    background-color: white;

}

/*
this styling is used to differentiate between the body and the header 
*/

button{
    padding: 8px;
    outline: none;
    cursor: pointer;
    border: 1px solid lightgrey;
    border-radius: 5px;
    background-color: whitesmoke;
    
}
button:hover {
    background-color: rgba(0, 0, 0, 0.1)
}

.container {
    width: 95%;
    margin: auto;
}

.nav{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: auto;
    padding: 20px 0;
    background-color: white;
}



.nav button {
    font-family: inherit;
}

.create-box {
    width: 380px;
    margin: auto;
    padding: 20px;
    margin-top: 10px;
    border-radius: 5px;
    background-color: whitesmoke;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/*
styling above is ued for the create flashcard area and makes it so that it is centered and is poping out due to the box shadow 
*/


.create-box textarea {
    width: 100%;
    border-radius: 5px;
    font-family: inherit;
    border: 1px solid lightgrey;
}

.create-box button {
    width: fit-content;

}




.flashcards{
    display: flex;                        
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
    margin-top: 10px;
    padding: 0 10px;
}

/*
styling above is used so that when a flashc ard is created the flash card is placed on the right as to look ordered and neat and when a flashc ard wont fit it will go to the next line

*/

.flashcard {
    width: 370px;
    height: 200px;
    word-wrap: break-word;
    margin: 10px;
    background-color: white;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}
.flashcard h2{
    font-size: 1rem;
}

@media(max-width:768px){
    .flashcard{
        margin: auto;
    }
    .flashcard{
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/*
this media query makes it so that when the window size goes below 768 pixels the flash cards will go to the center of the screen insted of the left 

the second half of the media query makes it so when they do go to the center the flash cards will have space between them
*/

@media(max-width:480px) {
    .nav{
        flex-direction: column;
        align-items: center;
    }
    .create-box{
        width:100%
    }
    .flashcard{
        width: 100%;
    }
}



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here