Develop Reference

Cannot append localStorage data to an existing div class

Currently making a quick journal entry app in HTML, CSS, and JS. User inputs and submits text data along with the time and date. I'm trying to take that data from the localStorage to put inside an existing div class. Any advice?
This is the HTML code.
<div class="background-journal">
<button class="button-journal" onclick="openPopup()" id="entrybtn">New Entry</button>
<br><br><br><br><br><br><br>
<button class="show-journal" onclick="recallEntries()" id="showbtn">View Previous Entries</button>
<div class="journal-visual" id="data-viz">
</div>
<div id="popup" class="popup">
<form id="form" class="form">
<br>
<label for="journal-entry">何を勉強していますか？</label><br><br>
<textarea class="add-entry" id="journal-entry" rows="6" cols="150"></textarea><br>
<button type="submit" onclick="submitJournalEntry()">Submit</button>
<button type="button" onclick="closePopup()">Close</button>
</form>
</div>
This is the CSS code.
.background-journal{
position:absolute;
top: 35%;
left: 9.6%;
background-color:rgba(255,255,255,0);
z-index:1001;
width: 80%;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
}
.button-journal {
background-color: #fff;
border: none;
color: #000;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 90%;
height: 100px;
left: 4.5%;
position: absolute;
box-shadow: 3px 5px #888888;
}
.show-journal{
background-color: #fff;
border: none;
color: #000;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 90%;
height: 100px;
left: 4.5%;
position: absolute;
box-shadow: 3px 5px #888888;
}
.journal-visual{
background-color: #fff;
z-index:1003;
width: 70%;
height: 450px;
overflow-y: auto;
overflow-x: hidden;
margin-left: auto;
margin-right: auto;
display: none;
position: relative;
color: #000;
text-align: center;
}
.button-popup-journal{
position: relative;
}
.popup {
display: none;
position: absolute;
z-index: 1;
width: 100%;
height: 200px;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
box-shadow: 3px 5px #000;
}
.popup form{
margin: auto;
}
.add-entry{
margin: auto;
overflow: auto;
position:inherit;
left: 5%;
}
.background-journal label{
color: white;
opacity: 70%;
}
and this is the JS code.
// Journal Function
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("entrybtn").style.display = "none";
document.getElementById("showbtn").style.display = "none";
}
function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("entrybtn").style.display = "block";
document.getElementById("showbtn").style.display = "block";
}
function submitJournalEntry() {
var journalEntry = document.getElementById("journal-entry").value;
var date = new Date();
var timestamp = date.toString();
localStorage.setItem(timestamp, journalEntry);
closePopup();
}
function recallEntries() {
document.getElementById("entrybtn").style.display = "none";
document.getElementById("showbtn").style.display = "none";
document.getElementById("data-viz").style.display = "block";
var keys = Object.keys(localStorage);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var journalEntry = localStorage.getItem(key);
var viz = document.getElementById('data-viz');
div.innerHTML = '<p><strong>' + key + '</strong>: ' + journalEntry + '</p>';
document.body.appendChild(viz);
}
}
I was expecting the text to show up in the div class="journal-entry" id="data-viz" but nothing is there. Any ideas?

JS Slider: Button within Slide not clickable

For this Slider to work I have set pointer-events: none; . But I want to have a clickable Button within the slide. Thats not possible right now, since pointer-events: none;. Since I only know a bare minimum about JS I need help.
const sliderContainer = document.querySelector(".slider-container");
const slider = document.querySelector(".slider");
const onButton = document.querySelector(".btn");
let clicked = false;
let xAxis;
let x;
sliderContainer.addEventListener("mouseup", () => {
sliderContainer.style.cursor = `grab`;
});
sliderContainer.addEventListener("mousedown", (e) => {
clicked = true;
xAxis = e.offsetX - slider.offsetLeft;
// tells the current position
sliderContainer.style.cursor = `grabbing`;
});
window.addEventListener("mouseup", () => {
clicked = false;
});
sliderContainer.addEventListener("mousemove", (e) => {
if (!clicked) return;
e.preventDefault();
x = e.offsetX;
slider.style.left = `${x - xAxis}px`;
// but we dont want it to scroll forever
checkSize();
});
function checkSize() {
let sliderContainerOut = sliderContainer.getBoundingClientRect();
let sliderIn = slider.getBoundingClientRect();
if (parseInt(slider.style.left) > 0) {
slider.style.left = `0px`;
} else if (sliderIn.right < sliderContainerOut.right) {
slider.style.left = `-${sliderIn.width - sliderContainerOut.width}px`;
}
}
#import url("//fonts.googleapis.com/css?family=Raleway");
:root {
--item-height: 80vh;
--item-witdh: 80vw;
--item-spacing: 300px;
--item-count: 4;
--starting-slide-distance-left: 40vw;
--blur: 3.5px;
--spread: -2.5px;
--horiz: 1.3616px;
--vert: 2.09668px;
}
.wrapper {
height: 100vh;
width: 100vw;
}
/*----------------------------Slider Start-----------------------------*/
.slider-container {
position: absolute;
width: 100vw;
min-height: var(--item-height);
overflow: hidden;
cursor: grab;
padding: 50px;
}
.slider {
position: absolute;
width: auto;
height: auto;
display: grid;
grid-template-columns: repeat(var(--item-count), 1fr);
column-gap: var(--item-spacing);
pointer-events: none;
transform: translatex(var(--starting-slide-distance-left));
}
.slider-item {
width: var(--item-witdh);
height: var(--item-height);
border: 2px solid green;
border-radius: 20px;
overflow: hidden;
align-content: center;
}
.item-shadow {
box-shadow: calc(clamp(0px, var(--horiz), 2px)) calc(clamp(0px, var(--vert), 2px)) 2px calc(var(--spread)) rgba(0, 0, 0, 0.233), calc(2 * var(--horiz)) calc(2 * var(--vert)) calc(var(--blur)) calc(var(--spread)) rgba(0, 0, 0, 0.2), calc(3 * var(--horiz)) calc(3 * var(--vert)) calc(var(--blur)) calc(var(--spread)) rgba(0, 0, 0, 0.123), calc(5 * var(--horiz)) calc(5 * var(--vert)) calc(var(--blur)) calc(var(--spread)) rgba(0, 0, 0, 0.076), calc(8 * var(--horiz)) calc(8 * var(--vert)) calc(var(--blur)) calc(var(--spread)) rgba(0, 0, 0, 0.047), calc(13 * var(--horiz)) calc(13 * var(--vert)) calc(var(--blur)) calc(var(--spread)) rgba(0, 0, 0, 0.028);
border: 1px solid rgba(0, 0, 0, 0.068);
}
/*----------------------------Slider end-----------------------------*/
/*------------------------Item Content Start-------------------------*/
h2 {
color: #fff;
font-family: Raleway;
text-align: center;
font-size: 35px;
padding: 30px;
}
.slide1 {
background-image: url(https://www.memorabilien.org/wp-content/uploads/pexels-pixabay-220201.webp);
background-size: cover;
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto;
justify-content: space-around;
}
.images:hover {}
img {
max-height: var(--item-height);
width: auto;
}
.img:hover {
cursor: pointer!important;
}
.colnum-wrapper {
border: 2px solid yellow;
align-content: center;
display: flex;
flex-wrap: wrap;
align-content: center;
}
.colnum-wrapper2 {
border: 2px solid purple;
}
/*----------------Button Start------------------*/
.btn-wrapper {
border: 2px solid cyan;
text-align: center;
padding: 30px;
}
.btn {
border-radius: 20px;
padding: 15px;
border: 5px solid #aa80ff;
background: transparent;
font: Raleway, bold;
font-size: 30px;
color: #fff;
position: relative;
}
.btn:hover {
background: #aa80ff;
color: black;
}
<div class="wrapper" style="border: 2px dotted green;">
<div class="slider-container" style="border: 2px dotted green;">
<div class="slider" style="border: 2px dotted green;">
<div class="slider-item item-shadow slide1" style="border: 2px dotted red;">
<div class="colnum-wrapper">
<div class="colnum-wrapper2">
<div class="headline" style="border: 3px solid red;">
<h2>The Space and Universe Poster Collection</h2>
</div>
<div class="btn-wrapper"><button class="btn item-shadow" id="btn">Explore</button></div>
</div>
</div>
<div class="images" style="border: 2px solid green">
<img src="https://www.memorabilien.org/wp-content/uploads/Untitled-2-1.webp"></img>
</div>
</div>
<div class="slider-item item-shadow">item</div>
<div class="slider-item item-shadow">item</div>
<div class="slider-item item-shadow">item</div>
</div>
</div>
</div>
Here is a Codepen-Link: https://codepen.io/memorabilien/pen/MWVKmaB

I'm making a flashcard using JS and i encounteres a problem when i click the save button the card appears but after that there is problem?

I am making an flashcard using javascript and everything is working fine but when I press the save button to save the card there is error. it should display the question and after a click event it should show the answer of that card clicked but there is an error. also my browser storing also doesn't work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: , sans-serif;
font-size: 1rem;
background: #092d4a;
}
button {
padding: 8px;
outline: none;
cursor: pointer;
border: 1px solid #092d4a;
border-radius: 5px;
}
button:hover {
background-color: #092d4a;
color: white;
}
.container {
width: 95%;
margin: auto;
}
.nav {
display: flex;
justify-content: space-between;
width: 100%;
margin: auto;
padding: 20px 0;
}
.nav button {
font-family: inherit;
}
.create-card {
display: none;
width: 380px;
margin: auto;
padding: 20px;
margin-top: 10px;
border-radius: 5px;
background: whitesmoke;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
}
.create-card textarea {
width: 100%;
border-radius: 5px;
font-family: inherit;
border: 2px solid #092d4a;
}
.create-card button {
width: fit-content;
border: 2px solid #092d4a;
}
.flashcards {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
margin: auto;
margin-top: 20px;
padding: 0px 17px;
}
.flashcard {
width: 370px;
height: 200px;
word-wrap: break-word;
margin: 15px;
background: #fff;
/* box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.9); */
box-shadow: 0px 2px 4px 0px rgba(255, 255, 255, 0.5);
}
.flashcard h2 {
font-size: 1rem;
}
#media(max-width:768px) {
.flashcard {
margin: auto;
}
.flashcard {
margin-top: 15px;
margin-bottom: 15px;
}
}
#media(max-width:480px) {
.create-card {
width: 100%;
}
.flashcard {
width: 100%;
}
}
<header>
<div class="container">
<div class="nav">
<h1> Saved Flashcards</h1>
<button class="btn1">Add New Card</button>
</div>
</div>
</header>
<div class="container">
<div class="create-card">
<p>
<h2 style="color: black;text-align: center;">Create Flashcard</h2>
</p>
<p>
<label for="text">Question</label><br>
<textarea id="question" placeholder="please enter your question here....."></textarea>
</p>
<p>
<label for="text">Answer</label><br>
<textarea id="answer" placeholder="please place your answer here...."></textarea>
</p>
<br>
<div>
<button class="btn2" onclick="saveFlashcard()">Save</button>
<button class="btn3">Close</button>
</div>
</div>
</div>
<div class="container">
<div class="flashcards" id="flashcards"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="brain.js">
const flashcards = document.getElementsByClassName("flashcards")[0];
const createCard = document.getElementsByClassName("create-card")[0];
const question = document.getElementById("question");
const answer = document.getElementById("answer");
// if (localStorage.getItem("stored") == null) {
// localStorage.setItem("stored", [])
// };
// var test = JSON.parse(localStorage.getItem("stored"));
// 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 blue; padding:15px; margin-top:30px");
// h2_question.innerHTML = localStorage.getItem("test");
// h2_answer.setAttribute("style", "text-align:center; display:none; color:Blue");
// h2_answer.innerHTML = localStorage.getItem("test");
// div.appendChild(h2_question);
// div.appendChild(h2_answer);
// flashcards.insertAdjacentElement("beforeend", div);
$(".btn1").on("click", function() {
$(".create-card").show();
});
$(".btn3").on("click", function() {
$(".create-card").hide();
});
function saveFlashcard() {
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 blue; padding:15px; margin-top:30px");
h2_question.innerHTML = question.value;
h2_answer.setAttribute("style", "text-align:center; display:none; color:Blue");
h2_answer.innerHTML = answer.value;
// $(".div").on("click", function() {
// $(".h2_question").show();
// });
div.appendChild(h2_question);
div.appendChild(h2_answer);
$("div").on("click", function() {
if (h2_answer.style.display == "none") {
h2_answer.style.display = "block";
} else {
h2_answer.style.display = "none";
}
});
div.addEventListener("dblclick", function() {
div.remove();
});
flashcards.insertAdjacentElement("beforeend", div);
question.value = '';
answer.value = '';
// var test = JSON.parse(localStorage.getItem("stored"));
// test.push(JSON.stringify([question.value, answer.value]));
};
</script>

Properly position two DIVs - One as a fixed sidebar, and other as expanding

I have the following code to create a simple website with two sections; a sidebar and the main content:
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: row;
height: 100%;
}
.sidebar {
background-color: #FFF5BA;
width: 200px;
}
.main {
background-color: rgba(248, 248, 248, 1);
flex-grow: 1;
}
The HTML is as goes:
<div class="container">
<div class="sidebar">
<div class="main">
</div>
The problem I have happens when you dynamically add more content to the main section with JavaScript. If you add enough to require scrolling, then the sidebar will not grow as you scroll down.
Ideally I would like to leave the sidebar as fixed content that scrolls with you, but I have read that you cannot combine flexbox with position: fixed.
If you need to see the complete here it is:
https://codepen.io/wulfenn/pen/LYNRNEv (apologies in advance if the code is sloppy; I am still learning)
Thank you for your help!

I have updated html code by moving modal code outside of container class.
I have used position:sticky on sidebar class and assign height:100vh. so that it would not scroll if main content height is bigger than 100vh.
I have also added dummy book-add div to create more height of main content.
View results in full screen and only first add button will work.
// Declare the Object constructor.
function Book(title, author, pages, isbn, read, bookURL) {
this.title = title;
this.author = author;
this.pages = pages;
this.isbn = isbn;
this.read = read;
this.bookURL = bookURL;
}
Book.prototype.toggleStatus = function () {
if (this.read == 'Read') {
this.read = 'Not Read';
return 1;
} else if (this.read == 'Not Read') {
this.read = 'Reading';
return 2;
} else if (this.read == 'Reading') {
this.read = 'Read';
return 3;
}
}
// Initalize library variables.
let myLibrary = [];
const container = document.querySelector('.books-container');
// Display and Hide the "Add a Book" form.
const popup = document.querySelector('.form-popup');
const addBtn = document.querySelector('.add-btn');
const cancelBtn = document.getElementById('cancel-btn');
addBtn.addEventListener('click', function () {
popup.style.display = 'block'; // Show
})
cancelBtn.addEventListener('click', function () {
popup.style.display = 'none'; // Hide
})
// #### Book Form Start
// ##
// Get the form values
const form = document.getElementById('form1');
form.addEventListener('submit', function (event) {
const title = document.forms[0].elements[1].value;
const author = document.forms[0].elements[2].value;
const pages = document.forms[0].elements[3].value;
const isbn = document.forms[0].elements[4].value;
const bookURL = document.forms[0].elements[0].value;
// Check which radio button has been selected.
let read = '';
if (document.getElementById('read').checked) {
read = 'Read';
} else if (document.getElementById('unread').checked) {
read = 'Not Read';
} else {
read = 'Reading';
}
// Prevent page from refreshing and closing the form popup.
event.preventDefault();
popup.style.display = 'none';
// Add our book.
addBookToLibrary(title, author, pages, isbn, read, bookURL);
// Display the books and reset the form.
render();
form.reset();
})
// Display our cover preview.
const cover = document.querySelector('.cover-preview');
const isbnField = document.getElementById('isbn'); // In case ISBN has been typed
const coverURL = document.getElementById('url'); // In case URL has been used.
coverURL.addEventListener('change', function () {
cover.style.background = `url(${document.forms[0].elements[0].value})`;
cover.style.backgroundSize = 'cover';
})
isbnField.addEventListener('change', function () {
if (document.forms[0].elements[0].value == '') { // URL takes preference as it's chosen by user.
cover.style.background = `url(http://covers.openlibrary.org/b/isbn/${document.forms[0].elements[4].value}-M.jpg)`;
cover.style.backgroundSize = 'cover';
}
})
// Add a given book to myLibrary array
function addBookToLibrary(title, author, pages, isbn, read, bookURL) {
let book = new Book(title, author, pages, isbn, read, bookURL);
myLibrary.push(book);
}
// ##
// #### Book Form End
// Display the books in our HTML
function render() {
// Clear our space first.
const existingDivs = document.querySelectorAll('[data-book]');
existingDivs.forEach((div) => {
div.remove();
});
for (let i = 0; i < myLibrary.length; i++) {
let element = document.createElement('div');
element.classList.add('book');
// Determine our cover. URL overrides ISBN.
if (myLibrary[i]['bookURL']) {
element.style.background = `url(${myLibrary[i]['bookURL']})`;
} else {
element.style.background = `url(http://covers.openlibrary.org/b/isbn/${myLibrary[i]['isbn']}-M.jpg)`;
}
element.style.backgroundSize = 'cover';
element.setAttribute("data-book", i);
// Create our mouse enter divs to display book information.
let infoDiv = document.createElement('div');
infoDiv.classList.add('book-info');
infoDiv.style.display = 'none'; // Set to not display by deafult until mouse enter.
let titleDiv = document.createElement('div');
titleDiv.classList.add('info-title');
titleDiv.textContent = myLibrary[i]['title'];
let authorDiv = document.createElement('div');
authorDiv.classList.add('info-author');
authorDiv.textContent = `by ${myLibrary[i]['author']}`;
let pagesDiv = document.createElement('div');
pagesDiv.classList.add('info-pages');
pagesDiv.textContent = `Pages: ${myLibrary[i]['pages']}`;
// Create our status buttons and our delete button.
let buttonsDiv = document.createElement('div');
buttonsDiv.classList.add('info-buttons');
let readTag = document.createElement('button');
readTag.classList.add('button-status');
readTag.setAttribute('data-bookstatus', i);
if (myLibrary[i]['read'] == 'Read') {
readTag.style.background = '#EBFFE5';
readTag.textContent = '✔';
} else if (myLibrary[i]['read'] == 'Not Read') {
readTag.style.background = '#FFC1B1';
readTag.textContent = '❌';
} else {
readTag.style.background = '#FFFFEA';
readTag.textContent = '📖';
}
let removeTag = document.createElement('button');
removeTag.classList.add('button-status');
removeTag.textContent = '🗑';
removeTag.setAttribute("data-bookremove", i);
// Add everything together
buttonsDiv.appendChild(readTag);
buttonsDiv.appendChild(removeTag);
infoDiv.appendChild(titleDiv);
infoDiv.appendChild(authorDiv);
infoDiv.appendChild(pagesDiv);
infoDiv.appendChild(buttonsDiv);
element.appendChild(infoDiv);
// Insert the finished product
container.insertBefore(element, container.firstChild);
}
// Display book information on mouseover
const bookFrames = Array.from(document.querySelectorAll('.book'));
bookFrames.forEach((bookFrame) => {
bookFrame.addEventListener('mouseenter', function (e) {
bookFrame.firstChild.style.display = 'block';
});
});
bookFrames.forEach((bookFrame) => {
bookFrame.addEventListener('mouseleave', function (e) {
bookFrame.firstChild.style.display = 'none';
});
});
// Add functionality to our status and delete buttons
const statusButtons = Array.from(document.querySelectorAll('button[data-bookstatus'));
statusButtons.forEach((button) => {
button.addEventListener('click', function () {
let index = button.getAttribute('data-bookstatus');
let x = myLibrary[index].toggleStatus();
switch (x) {
case 1:
button.style.background = '#FFC1B1';
button.textContent = '❌';
break;
case 2:
button.style.background = '#FFFFEA';
button.textContent = '📖';
break;
case 3:
button.style.background = '#EBFFE5';
button.textContent = '✔';
break;
}
});
});
//Remove button
const removeButtons = Array.from(document.querySelectorAll('button[data-bookremove]'));
removeButtons.forEach((button) => {
button.addEventListener('click', function () {
let index = button.getAttribute('data-bookremove');
const bookToRemove = document.querySelector(`div[data-book='${index}']`);
bookToRemove.remove(); // Remove it from the DOM.
myLibrary.splice(index, 1); // Remove it from our array so it does not render again.
});
});
}
#import url("https://fonts.googleapis.com/css?family=Special Elite&display=swap");
html,
body {
height: 100%;
margin: 0;
font-family: "Special Elite";
}
.container {
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
}
.sidebar {
position: sticky;
top: 0%;
left: 0%;
background-color: #fff5ba;
width: 200px;
height:100vh;
}
.main {
background-color: rgba(248, 248, 248, 1);
flex-grow: 1;
}
.books-container {
background-color: rgba(248, 248, 248, 1);
margin-left: auto;
margin-right: auto;
position: relative;
top: 10%;
left: 50%;
transform: translate(-50%);
display: flex;
flex-wrap: wrap;
}
.book {
width: 200px;
height: 300px;
margin: 50px 25px;
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 5px;
box-shadow: 3px 3px 5px 0px black;
}
.book-info {
background-color: rgba(0, 0, 0, 0.6);
width: 200px;
height: 300px;
}
.info-title {
position: relative;
top: 15%;
color: white;
font-size: 20px;
text-align: center;
text-shadow: 3px 3px 1px black;
}
.info-author {
position: relative;
top: 20%;
color: white;
font-size: small;
font-style: italic;
text-align: center;
text-shadow: 1px 1px 1px black;
}
.info-pages {
position: relative;
top: 23%;
color: #fff5ba;
font-size: 11px;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px black;
}
.info-buttons {
position: relative;
top: 40%;
left: 20%;
}
.button-status {
width: 50px;
height: 50px;
outline: none;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 50px;
margin-left: 5px;
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.8);
background-color: rgba(255, 255, 255, 0.8);
font-size: 25px;
}
.button-status:hover {
transform: scale(1.1);
}
.book-add {
width: 200px;
height: 300px;
margin: 50px 25px;
border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 5px;
box-shadow: 3px 3px 5px 0px black;
}
.add-btn {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: inherit;
outline: none;
border-radius: 100px;
font-size: 4em;
}
.add-btn:hover {
background-color: #fff5ba;
}
.cover {
width: 200px;
height: 300px;
}
.cover-preview-container {
position: absolute;
right: 10%;
text-align: center;
}
.cover-preview {
width: 100px;
height: 150px;
border: 1px solid black;
position: relative;
left: 30%;
margin-bottom: 10px;
margin-top: 5px;
}
.form-popup {
display: none;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
}
.book-form-container {
position: fixed;
z-index: 1;
padding-top: 100px;
left: 50%;
top: 50%;
width: 500px;
height: 500px;
transform: translate(-50%, -50%);
overflow: hidden;
background-color: #836953;
border: 1px solid black;
border-radius: 5px;
}
.form-header {
position: absolute;
top: 0px;
background: url(assets/books.jpeg);
background-size: cover;
width: 500px;
height: 150px;
border-bottom: 1px solid black;
font-size: 4em;
text-align: center;
color: white;
text-shadow: 3px 3px 1px black;
}
.form-footer {
position: absolute;
bottom: 0px;
background: url(assets/wood.jpeg);
background-size: cover;
width: 500px;
height: 150px;
border-bottom: 1px solid black;
font-size: 4em;
text-align: center;
color: white;
text-shadow: 3px 3px 1px black;
}
.book-form {
position: absolute;
top: 150px;
bottom: 150px;
width: 500px;
padding: 20px;
line-height: 20px;
background-color: #fff5ba;
}
.entry-box {
height: 20px;
border-radius: 5px;
outline: none;
background-color: rgba(240, 240, 240, 0.5);
margin-bottom: 15px;
}
.form-btn {
margin: 40px 40px;
width: 100px;
height: 50px;
border: 1px solid white;
border-radius: 10px;
background: inherit;
color: white;
font-family: inherit;
font-size: 20px;
box-shadow: 3px 3px 1px 1px black;
outline: none;
}
.form-btn:hover {
transform: scale(1.1);
}
<div class="container">
<div class="sidebar">
<div class="my-library">My Library</div>
<div class="menu">Home</div>
</div>
<div class="main">
<div class="books-container">
<div class="book-add">
<button class="add-btn">+</button>
</div>
<div class="book-add">
<button class="add-btn">+</button>
</div>
<div class="book-add">
<button class="add-btn">+</button>
</div>
<div class="book-add">
<button class="add-btn">+</button>
</div>
<div class="book-add">
<button class="add-btn">+</button>
</div>
<div class="book-add">
<button class="add-btn">+</button>
</div>
<div class="book-add">
<button class="add-btn">+</button>
</div>
<div class="book-add">
<button class="add-btn">+</button>
</div>
</div>
</div>
</div>
<div class="form-popup">
<div class="book-form-container">
<div class="form-header"><br />Add a Book</div>
<div class="book-form">
<form id="form1">
<div class="cover-preview-container">Cover
<div class="cover-preview"></div>
<div><span style="font-size: small">Or enter the link to the cover image:</span> <br /><input class="entry-box" id="url" type="url" placeholder="https://"></div>
</div>
<div>
<label for="title"> Title </label><br />
<input class="entry-box" type="text" id="title" name="title" placeholder="Enter the book title." required>
</div>
<div>
<label for="author"> Author</label><br />
<input class="entry-box" type="text" id="author" name="author" placeholder="Enter the Author." required>
</div>
<div>
<label for="pages"> Pages</label><br />
<input class="entry-box" type="number" id="pages" name="pages" min="1" placeholder="0" required>
</div>
<div>
<label for="isbn"> ISBN <span style="font-size: small"><i><sup>what is this?</sup></i></span></label><br />
<input class="entry-box" type="text" id="isbn" name="isbn" placeholder="(optional)">
</div>
<div style="text-align: center">
<label for="read">Read</label>
<input id="read" type="radio" name="status" value="read" required>
<label for="unread">Not Read</label>
<input id="unread" type="radio" name="status" value="unread" required>
<label for="reading">Reading</label>
<input id="reading" type="radio" name="status" value="reading" required>
</div>
</form>
</div>
<div class="form-footer">
<button id="form-add-btn" type="submit" class="form-btn" form="form1">Add</button>
<button id="cancel-btn" class="form-btn">Cancel</button>
</div>
</div>
</div>

JavaScript - Game. Algorithm to match two variables generate by random generator

I have problem with my algorithm in simple game.
Game Rules:
Match color NAME (choose one on the bottom) with COLOR of TEXT (on the top).
If none of the two bottom names match than click NEXT.
So the problem is that first correct match gives in console "GOOD" but second , third and any after, even if there is correct match in console I have firstly always "WRONG" and just after that I have "GOOD".
This is a picture with the problem described
It seems like the script remember past random numbers and match current result with them, because after few matches the score pointer raise very quickly (ex. 20 points in one time).
I will be happy to hear from you how can I fix this.
Thank you for any help !
Here you have link to codepen:
http://codepen.io/anon/pen/bWGGga
"use strict"
/*Start Container*/
/* var startContainer = document.getElementById("start_container");
var letsPlay = document.getElementById("start_game"); */
/* letsPlay.addEventListener("click", openTheGame); */
function openTheGame(){
setInterval(startGame, 3000);
};
openTheGame();
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var showColor = document.getElementById("show_color");
//SCORE
var score = document.getElementById("score");
var gameContainer = document.getElementById("game_container");
var gameOverContainer = document.getElementById("game_over_container");
/*Array of Colors*/
var arrCol = ["GREEN", "RED", "YELLOW", "BLUE", "ORANGE", "PURPLE"]
//Array from buttons texts to draw Show Color
var arrShowColor = [];
function startGame(){
/*BUTTONS TEXT & COLOR*/
btn1.addEventListener("click", matchColor1);
btn2.addEventListener("click", matchColor2);
btn3.addEventListener("click", matchColor3);
//draw numbers for buttons texts & colors
var randomBtn1Num = Math.floor(Math.random() * 3);
var randomBtn2Num = Math.floor(Math.random() * 3)+3;
var randomBtn3Num = Math.floor(Math.random() * 6);
//Buttons text (next button always "next")
btn1.innerHTML = arrCol[randomBtn1Num];
btn2.innerHTML = arrCol[randomBtn2Num];
//Buttons Color from random_color class
btn1.className = "random_color" + randomBtn2Num;
btn2.className = "random_color" + randomBtn3Num;
btn3.className = "random_color" + randomBtn1Num;
/*SHOW TEXT & COLOR*/
//Array from buttons texts to draw Show Color
arrShowColor[0] = randomBtn1Num;
arrShowColor[1] = randomBtn2Num;
arrShowColor[2] = randomBtn3Num;
console.log(arrShowColor);
//Show color
var randomShowColorNum = Math.floor(Math.random()*3);
var randomShowColor = arrShowColor[randomShowColorNum];
showColor.className = "random_color" + randomShowColor;
console.log(randomShowColor);
//Show text
var randomShowText = Math.floor(Math.random() * 6);
showColor.innerHTML = arrCol[randomShowText];
/*CLICK BUTTON - IF MATCH COLORS*/
function matchColor1(){
if( randomBtn1Num == randomShowColor) {
console.log("GOOD");
score.innerHTML ++;
} else {
console.log("WRONG");
/*gameContainer.style.display = "none";
gameOverContainer.style.display = "inline-block";*/
}
};
function matchColor2(){
if( randomBtn2Num == randomShowColor) {
console.log("GOOD");
score.innerHTML ++;
} else {
console.log("WRONG");
/*gameContainer.style.display = "none";
gameOverContainer.style.display = "inline-block";*/
}
};
function matchColor3(){
if(randomBtn1Num != randomShowColor && randomBtn2Num != randomShowColor){
console.log("GOOD");
score.innerHTML ++;
} else {
console.log("WRONG");
/*gameContainer.style.display = "none";
gameOverContainer.style.display = "inline-block";*/
}
};
/*Finish startGame*/
};
/*Main Styles*/
body {
background-image: url()
}
h4 {
color: #2626e6;
}
/*Main Container Styles*/
#main_container {
width:100%;
text-align:center;
}
/*Start Container Styles*/
#start_container {
position: relative;
display: inline-block;
width: 400px;
height: 400px;
top: 20px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
#start_container button {
}
/*Game Container Styles*/
#game_container {
position: relative;
display: inline-block;
width: 400px;
height: 400px;
top: 20px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
.second_level{
transform: rotateY(180deg);
}
.third_level{
transform: rotateX(180deg);
}
/*Score Container*/
#score_container {
display: inline-block;
position: relative;
height: 150px;
width: 150px;
background-color: rgb(0, 0, 0);
top: -40px;
margin-left: -5px;
margin-right: 30px;
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
#score_container #score {
display: inline-block;
height: 30px;
width: 80px;
color: #ffffff;
margin-left: 0;
margin-right: 0;
}
/*Level Container*/
#time_container {
display: inline-block;
position: relative;
height: 150px;
width: 150px;
background-color: rgb(0, 0, 0);
top: -40px;
margin-left: 30px;
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
#time_container #time {
display: inline-block;
height: 30px;
width: 80px;
color: #ffffff;
margin-left: 0;
margin-right: 0;
}
/*Random Show Color Style*/
#show_color{
margin-top: 50px;
font-size: 40px;
font-family: sans-serif;
font-weight: 800;
}
/*Random Colors Classes*/
.random_color0{
color: green;
}
.random_color1{
color: red;
}
.random_color2{
color: yellow;
}
.random_color3{
color: blue;
}
.random_color4{
color: orange;
}
.random_color5{
color: purple;
}
/*Buttons Container Styles*/
#game_container #buttons_container {
position: relative;
display: inline-block;
margin:0 auto;
margin-top: 120px;
border-top: 1px solid white;
padding-top: 30px;
}
/*Buttons Style*/
#buttons_container button {
height: 40px;
width: 150px;
font-size: 30px;
font-weight: 800;
border: none;
border-radius: 3px;
background-color: rgb(0, 0, 0);
margin: 3px;
}
#buttons_container button:focus{
outline: 0;
}
#buttons_container button:hover{
cursor: pointer;
}
/*Game Over Container*/
#game_over_container {
display: none;
position: relative;
width: 400px;
height: 400px;
top: 20px;
background-color: rgb(0, 0, 0);
border-radius: 50%;
box-shadow: 0px 0px 10px 10px black;
}
<div id="main_container">
<!-- <div id="start_container">
<button id="start_game">PLAY GAME</button>
</div> -->
<div id="score_container">
<h4>SCORE:</h4>
<div id="score">0</div>
</div>
<div id="game_container">
<div id="show_color_container">
<div id="show_color"></div>
</div>
<div id="buttons_container">
<button class="btn_select" id="btn1">ONE</button>
<button class="btn_select" id="btn2">TWO</button>
<button class="btn_select" id="btn3">NEXT</button>
</div>
</div>
<div id="game_over_container">
<h2 id="game_over">GAME OVER</h2>
</div>
</div>

Inside openTheGame() you're using setInterval which calls startGame() every 3 seconds, which in turn creates (adds) new event handlers every 3 seconds, which call your console.logs etc. Replace setInterval with setTimeout:
function openTheGame(){
setTimeout(startGame, 3000);
};
openTheGame();
EDIT: did not thoroughly check your code, but if you need that function called every 3 seconds, then you need to move the setup of click handlers outside that function.