We Keep Coding

Why my buttons are overlapping my input fiels?

I am following a tutorial to make a quiz in js. I am not very good especially with css. Can someone help me to figure it out why at question 3 my answers(from 1-5) are behind the buttons? I want the button to always be under the answers
This is how it should look like:
enter image description here
And this is how it looks:
enter image description here
(function () {
const quizContainer = document.getElementById("quiz");
const resultsContainer = document.getElementById("results");
const submitButton = document.getElementById("submit");
const myQuestions = [
{
question: `Apa pe care o consum este plata, oligoelementala, in recipient de sticla, structurata sau filtrata de la robinet`,
factor: 2,
},
{
question: `Sunt iubitor/consumator de lactate proaspete/ lactate maturate`,
factor:2,
},
{
question: `Am o toleranta buna (pot consuma fara sa dezvolt reactie cutanata/ digestiva/ respiratorie) la
ton, peste spada, rechin, somon, scoici, fructe de mare, alti pesti oceanici
produse care contin gluten: paine, cereale, biscuiti, prajituri, paste, fainoase
alune, migdale, seminte de floarea soarelui, capsuni, alte fructe de padure
mazare, fasole, linte, naut, varza, brocoli, conopida`,
factor:2,
},
{
question: `Consum de 3x/saptamana oua de pasare/icre de peste`,
factor:2,
},
{
question: `Mananc saptamanal stridii, fructe de mare, nuci si seminte, ciocolata neagra`,
factor:2,
},
{
question: `Mananc zilnic fructe de culoare mov/ negre sau rosii`,
factor:2,
},
{
question: `Mananc zilnic ulei de masline/ cocos/ unt/ulei de germeni de grau/ ulei de canepa`,
factor:2,
},
{
question: `Mananc zilnic legume cu frunze verzi : Salata verde/ spanac / rucola / leurda / nasturel /creson de apa / cicoare / andive / patrunjel`,
factor:1,
},
{
question: `Mananc zilnic dulciuri procesate, prajituri, crème`,
factor:2,
},
{
question: `Mananc zilnic proteina animala de tip carne de porc/ vita/pasare`,
factor:2,
},
{
question: `Mananc saptamanal mezeluri/patiserie/conserve sau alte alimente care contin conservanti sintetici`,
factor:1,
},
{
question: `Consum zilnic bauturi alcoolice: spirtoase/ vin/ bere/ alte bauturi alcoolice`,
factor:2,
},
{
question: `Consum zilnic minerale/ vitamine/ pulberi alcaline/ pulberi de super alimente/ ceai verde`,
factor:2,
},
{
question: `Sunt alergic la praf/ polen/ fan/ plante de sezon/ ambrozie/ artemisia/ par animale/ intepaturi insecte/ mucegaiuri/ medicamente`,
factor:1,
},
{
question: `Locuiesc intr-un oras aglomerat cu aer poluat`,
factor:1,
},
{
question: `Locuiesc intr-o zona cu linii de inalta tensiune/ antene de telecomunicatii/dorm cu telefonul mobil deschis langa pat`,
factor:1,
},
{
question: `Am afectiuni cronice diagnosticate pentru care primesc medicatie`,
factor:1,
},
{
question: ` Sunt frecvent in situatia de a apela la antibiotice pentru rezolvarea unor probleme de sanatate`,
factor:1,
},
{
question: `Am tulburari de tranzit intestinal (de exemplu mai putin de 2 scaune zilnice)`,
factor:1,
},
{
question: `Am afectiuni inflamatorii de piele sau la nivelul sitemului osteoarticular (oaselor si incheieturilor)`,
factor:2,
},
{
question: `Fac miscare zilnic sau practic sporturi de tip jogging, cardio, aerobic, sarituri`,
factor:2,
},
{
question: `Viata familiala/ profesionala/ sociala e caracterizata de stress intens`,
factor:2,
},
{
question: `Am stare de oboseala accentuata la trezire si manifest scaderea capacitatii de concentrare/ deconectare /detensionare`,
factor:1,
},
{
question: `Merg la culcare pana in ora 23:00 si am un somn odihnitor`,
factor:2,
},
{
question: `Am trecut printr-o trauma emotionala in ultimii 5 ani de tip: deces al unui membru al familiei/ divort/ accident /imbolnavire`,
factor:1,
},
];
const answersToQuiz =
[
"Niciodata",
"Rar",
"Ocazional",
"Frecvent",
"Intodeauna"
]
function buildQuiz() {
// variable to store the HTML output
const output = [];
// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// variable to store the list of possible answers
const answers = [];
// and for each available answer...
for (const number in answersToQuiz) {
// ...add an HTML radio button
answers.push(
`<label>
<input type="radio" name="question${questionNumber}" value="${number}">
${parseInt(number) + 1} :
${answersToQuiz[number]}
</label>`
);
}
// add this question and its answers to the output
output.push(
`<div class="slide">
<div class="question">${parseInt(questionNumber) + 1}. ${currentQuestion.question} </div>
<div class="answers"> ${answers.join("")} </div>
</div>`
);
});
// finally combine our output list into one string of HTML and put it on the page
quizContainer.innerHTML = output.join("");
}
function showResults() {
// gather answer containers from our quiz
const answerContainers = quizContainer.querySelectorAll('.answers');
// keep track of user's answers
let currentScore = 0;
// for each question...
myQuestions.forEach((currentQuestion, questionNumber) => {
// find selected answer
const answerContainer = answerContainers[questionNumber];
const selector = `input[name=question${questionNumber}]:checked`;
const userAnswer = (answerContainer.querySelector(selector) || {}).value;
if(userAnswer === undefined)
{
alert("Va rugam sa raspundeti la toate intrebarile");
}
currentScore += (parseInt(userAnswer) + 1) * myQuestions[questionNumber].factor;
});
//display a slider
// show number of correct answers out of total
resultsContainer.innerHTML = `Curent score ${currentScore}`;
}
function showSlide(n) {
slides[currentSlide].classList.remove('active-slide');
slides[n].classList.add('active-slide');
currentSlide = n;
if(currentSlide === 0){
previousButton.style.display = 'none';
}
else{
previousButton.style.display = 'inline-block';
}
if(currentSlide === slides.length-1){
nextButton.style.display = 'none';
submitButton.style.display = 'inline-block';
}
else{
nextButton.style.display = 'inline-block';
submitButton.style.display = 'none';
}
}
function showNextSlide() {
showSlide(currentSlide + 1);
}
function showPreviousSlide() {
showSlide(currentSlide - 1);
}
// display quiz right away
buildQuiz();
const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const slides = document.querySelectorAll(".slide");
let currentSlide = 0;
showSlide(0);
// on submit, show results
submitButton.addEventListener("click", showResults);
previousButton.addEventListener("click", showPreviousSlide);
nextButton.addEventListener("click", showNextSlide);
})();
#import url(https://fonts.googleapis.com/css?family=Work+Sans:300,600);
body{
font-size: 20px;
font-family: 'Work Sans', sans-serif;
color: #333;
font-weight: 300;
text-align: center;
background-color: #f8f6f0;
}
h1{
font-weight: 300;
margin: 0px;
padding: 10px;
font-size: 20px;
background-color: #444;
color: #fff;
}
.question{
font-size: 30px;
margin-bottom: 10px;
}
.answers {
margin-bottom: 20px;
text-align: left;
display: inline-block;
}
.answers label{
display: block;
margin-bottom: 10px;
}
button{
font-family: 'Work Sans', sans-serif;
font-size: 22px;
background-color: #279;
color: #fff;
border: 0px;
border-radius: 3px;
padding: 20px;
cursor: pointer;
margin-bottom: 20px;
margin-top: 20px;
z-index: 3;
position: relative;
}
button:hover{
background-color: #38a;
}
.slide{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: 1;
opacity: 0;
transition: opacity 0.5s;
}
.active-slide{
opacity: 1;
z-index: 2;
}
.quiz-container{
position: relative;
height: 200px;
margin-top: 40px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="quiz-container">
<div id="quiz"></div>
</div>
<button id="previous">Intrebarea precedenta</button>
<button id="next">Urmatoare intrebare</button>
<button id="submit">Afla rezultatul</button>
<div id="results"></div>
<script src="QuizLogic.js"></script>
<link rel="stylesheet" href="QuizTransition.css">
</body>
</html>

You have a strict height of your main div 200px. You can do
1) Increase height depend on your content
2) Put your buttons in div after your main div
Main problem is that you don`t have a content grid. So you have to create it before put something into page

show/hide div using javascript

I have two divs, one is hidden and the other one is visible. I'm using css display:none; to hide first and using style.display="block";
when I refresh the page it gives same div name in the address bar but the div is hidden.
I just want the div to stay block after refreshing or submitting the form inside the div
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<style>
#content {
flex:8;
display:flex;
flex-direction:row;
justify-content:space-between;
flex-basis:100%;
padding:0 10px 0x 10px;
text-align:center;
}
#leftnav {
flex:1;
padding-top:20px;
}
#midcontent {
flex:9;
text-align:center;
padding-top:20px;
display:block;
}
#leftnav ul {
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
}
#m1,#m2,#m3 {
flex:9;
text-align:center;
padding-top:20px;
display:none;
}
</style>
</head>
<body>
<div id="content">
<div id="leftnav" align="center">
<ul>
<li>Page m1</li>
<li>Page m2</li>
<li>Page m3</li>
</ul>
</div>
<div id="midcontent" align="center">
<p>Home Page</p>
</div>
<div id="m1" align="center">
<p>Div m1</p>
</div>
<div id="m2" align="center">
<p>Div m2</p>
</div>
<div id="m3" align="center">
<p>Div m3</p>
</div>
</div>
<script type="text/javascript">
var d=document.getElementById('midcontent');
var d1=document.getElementById('m1');
var d2=document.getElementById('m2');
var d3=document.getElementById('m3');
function div1() {
if(d.style.display === "block") {
d.style.display = "none";
d1.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "block";
d2.style.display = "none";
d3.style.display = "none";
}
}
function div2() {
if(d.style.display === "block") {
d.style.display = "none";
d2.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "none";
d2.style.display = "block";
d3.style.display = "none";
}
}
function div3() {
if(d.style.display === "block") {
d.style.display = "none";
d3.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "none";
d2.style.display = "none";
d3.style.display = "block";
}
}
</script>
</body>
</html>

change:
function div1() {
var d=document.getElementById('midcontent');
var d1=document.getElementById('m1');
if(d.style.display === "block") {
d.style.display = "none";
d1.style.display = "block";
} else {
d.style.display = "none";
d1.style.display = "block";
}
}
to:
function toggleDiv() {
document.getElementById('midcontent').style.display = "none";
document.getElementById('m1').style.display = "block";
}
"i just want the div to stay block after refreshing" call the function on page load in html to make it execute after refresh of page:
<body onLoad="toggleDiv()">
<!-- Your html content -->
</body>
alternatively you can also do it in js:
document.addEventListener("DOMContentLoaded", function(event) {
// Your code to run since DOM is loaded and ready
toggleDiv()
});
If you want more in depth persistance and/or variable changes please provide additional information on how and why you want to do this exactly! Hope it helps! :)

How to delete an item from a drag and drop menu

I'm trying to add an Delete button function to a drag and drop shopping cart. I have the button in place but I can not call a function that seems to work. I'm very novice.
Im not sure if were the function should appear because the list is created from a drag and drop menu
Below is the code so far - any help would be greatly appreciated
thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>HTML 5 Drag and Drop Shopping Cart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.products1 { grid-area: products1; }
.menu1 { grid-area: menu1; }
.menu2 { grid-area: menu2; }
.menu3 { grid-area: menu3; }
.menu4 { grid-area: menu4; }
.grid-container {
display: grid;
grid-template-areas:
'products1 menu1 menu2 menu3 menu4'
;
grid-gap: 5px;
background-color: #2196F3;
padding: 5px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 20px;
}
#item-container{
width: 280px;
padding: 10px;
border: 5px solid gray;
margin:20px auto;
text-align: center;
font-size: 20px;
}
ul, li{
list-style: none;
margin: 2px;
padding: 0px;
cursor: grabbing;
}
section#cart ul{
height: 600px;
overflow: auto;
background-color: #cccccc;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script>
function addEvent(element, event, delegate ) {
if (typeof (window.event) != 'undefined' && element.attachEvent)
element.attachEvent('on' + event, delegate);
else
element.addEventListener(event, delegate, false);
}
addEvent(document, 'readystatechange', function() {
if ( document.readyState !== "complete" )
return true;
var items = document.querySelectorAll("section.products ul li");
var cart = document.querySelectorAll("#cart ul")[0];
function updateCart(){
var total = 0;
var term = 48;
var rate = 7;
var amount = 15090;
var cart_items = document.querySelectorAll("#cart ul li")
for (var i = 0; i < cart_items.length; i++) {
var cart_item = cart_items[i];
var quantity = cart_item.getAttribute('data-quantity');
var price = cart_item.getAttribute('data-price');
var payment = amount*((((rate/12)/100)*((1+((rate/12)/100))**term))/(((1+((rate/12)/100))**term)-1));
var sub_total = parseFloat(quantity * parseFloat(price));
cart_item.querySelectorAll("span.sub-total")[0].innerHTML = + sub_total.toFixed(2);
total += sub_total*((((rate/12)/100)*((1+((rate/12)/100))**term))/(((1+((rate/12)/100))**term)-1));
newpayment=total+payment
}
document.querySelectorAll("#cart span.total")[0].innerHTML = total.toFixed(2);
document.querySelectorAll("#cart span.newpayment")[0].innerHTML = newpayment.toFixed(2);
}
function addCartItem(item, id) {
var clone = item.cloneNode(true);
clone.setAttribute('data-id', id);
clone.setAttribute('data-quantity', 1);
clone.removeAttribute('id');
var fragment = document.createElement('span');
fragment.setAttribute('class', 'quantity');
fragment.innerHTML = '<button id="butt" onclick="one(this);">delete item</button> $';
clone.appendChild(fragment);
fragment = document.createElement('span');
fragment.setAttribute('class', 'sub-total');
clone.appendChild(fragment);
cart.appendChild(clone);
}
function updateCartItem(item){
var quantity = item.getAttribute('data-quantity');
quantity = parseInt(quantity) + 1
item.setAttribute('data-quantity', quantity);
var span = item.querySelectorAll('span.quantity');
span[0].innerHTML = ' x ' + quantity;
}
function onDrop(event){
if(event.preventDefault) event.preventDefault();
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
var id = event.dataTransfer.getData("Text");
var item = document.getElementById(id);
var exists = document.querySelectorAll("#cart ul li[data-id='" + id + "']");
{
addCartItem(item, id);
}
updateCart();
return false;
}
function onDragOver(event){
if(event.preventDefault) event.preventDefault();
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
return false;
}
addEvent(cart, 'drop', onDrop);
addEvent(cart, 'dragover', onDragOver);
function onDrag(event){
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.dropEffect = "move";
var target = event.target || event.srcElement;
var success = event.dataTransfer.setData('Text', target.id);
}
for (var i = 0; i < items.length; i++) {
var item = items[i];
item.setAttribute("draggable", "true");
addEvent(item, 'dragstart', onDrag);
};
});
</script>
</head>
<body>
<div id="page">
<div class="grid-container">
<div class="products1">
<section id="products" class="products">
<h1></h1>
<ul>
<li id="product-1" data-price="3999.00"><div id="item-container">Product 1<br> descr<br>descr </div></li>
<li id="product-2" data-price="1895"><div id="item-container">Product 2<br> descr<br>descrip</div></li>
<li id="product-3" data-price="2.99"><span>Product 3</span></li>
<li id="product-4" data-price="3.50"><span>Product 4</span></li>
<li id="product-5" data-price="4.25"><span>Product 5</span></li>
<li id="product-6" data-price="6.75"><span>Product 6</span></li>
<li id="product-7" data-price="1.99"><span>Product 7</span></li>
</ul>
</section>
</div>
<div class="menu1">
<section id="cart" class="shopping-cart">
<h1>Preferred</h1>
<ul>
</ul>
<p> $<span class="total">0.00</span></p>
<p> $<span class="newpayment">0.00</span></p>
</section>
</div>
<div class="menu2">
<section id="cart" class="shopping-cart">
<h1>Value</h1>
<ul>
</ul>
<p> $<span class="total">0.00</span></p>
</section>
</div>
<div class="menu3">
<section id="cart" class="shopping-cart">
<h1>Basic</h1>
<ul>
</ul>
<p> $<span class="total">0.00</span></p>
</section>
</div>
<div class="menu4">
<section id="cart" class="shopping-cart">
<h1>Economy</h1>
<ul>
</ul>
<p> $<span class="total">0.00</span></p>
</section>
</div>
</div>
</div>
</body>
</html>

Text doesn't appear when outputting it on HTML

I've been working on a notebook web app, my problem is that if I write a note and save it, when I press on its title to read it again it just shows me an empty screen. Here is the code for the app:
const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete");
const note = document.getElementById("note");
const back = document.getElementById("back");
const noteTitle = document.getElementById("note-title");
const inputTitle = document.getElementById("input-title");
const err1 = document.getElementById("err1");
const err2 = document.getElementById("err2");
const err3 = document.getElementById("err3");
const text = document.getElementById("text");
let flag1 = false;
let flag2 = false;
let flag3 = false;
let mynotes = {};
let i = 1;
add.addEventListener('click', function(){
main.style.display = "block";
submit.style.display = "inline";
cancel.style.display = "inline";
add.style.display = "none";
screen.style.display = "none";
del.style.display = "none";
back.style.display = "none";
inputTitle.style.display = "block"
});
submit.addEventListener('click', function(){
title = noteTitle.value;
newNote = note.value;
if (title.length < 3){
err1.style.display = "block";
flag1 = true;
} else {
err1.style.display = "none";
flag1 = false
}
if (newNote === ""){
err2.style.display = "block";
flag2 = true;
} else {
err2.style.display = "none";
flag2 = false;
}
if (mynotes.hasOwnProperty(title)){
err3.style.display = "block";
flag3 = true;
} else {
err3.style.display = "none";
flag3 = false;
}
if (!flag1 && !flag2 && !flag3) {
newNote = newNote.replace(/\n/g, "<br>");
mynotes[title] = newNote;
var li = document.createElement("li");
li.setAttribute('class','item');
li.appendChild(document.createTextNode(title));
ul.appendChild(li);
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
cancel.style.display = "none";
add.style.display = "inline";
del.style.display = "none";
back.style.display = "none";
inputTitle.style.display = "none";
note.value = "";
noteTitle.value = "";
}
});
ul.addEventListener('click', function(event){
node = event.target;
item = event.target.textContent;
text.innerHTML = mynotes[item];
fullnote.style.display = "block";
main.style.display = "none";
submit.style.display = "none";
add.style.display = "none";
screen.style.display = "none";
cancel.style.display = "none";
del.style.display = "inline";
back.style.display = "inline";
inputTitle.style.display = "none";
});
del.addEventListener('click', function(){
ul.removeChild(node);
delete mynotes[item];
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
inputTitle.style.display = "none";
});
cancel.addEventListener('click', function(){
note.value = "";
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
del.style.display = "none";
back.style.display = "none";
cancel.style.display = "none";
inputTitle.style.display = "none";
});
back.addEventListener('click', function(){
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
inputTitle.style.display = "none";
});
#container {
background-color: rgb(253, 248, 177);
}
#header, #footer {
z-index: 2;
width: 100%;
position: fixed;
}
#footer {
bottom: 0;
}
#screen, #input-title {
margin-top: 2em;
}
#title {
color: white;
padding-top: 7px;
}
#cancel, #submit, #back {
color: white;
font-size: 20px;
}
#add {
font-size: 20px;
}
#delete, #cancel, #submit {
display: none;
}
#input-title {
display: none;
}
#main {
display: none;
}
#note {
resize: none;
}
#fullnote {
display: none;
}
#back {
display: none;
}
#err1 {
color: red;
font-size: 12px;
font-weight: bold;
display: none;
}
#err2 {
color: red;
font-size: 12px;
font-weight: bold;
display: none;
}
#err3 {
color: red;
font-size: 12px;
font-weight: bold;
display: none;
}
<!doctype html>
<html lang="en">
<head>
<!-- link to css -->
<link rel="stylesheet" href="style.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<title>Notebook</title>
</head>
<body>
<div class="container min-vh-100 d-flex flex-column" id="container">
<!-- header -->
<div class="row align-items-start bg-info container" id="header">
<div class="col text-center">
<button type="button" class="btn" id="cancel">✗</button>
<button type="button" class="btn" id="back">↩</button>
</div>
<div class="col text-center">
<h4 id="title">Notebook</h4>
</div>
<div class="col text-center">
<button type="button" class="btn" id="submit">✔</button>
</div>
</div>
<br />
<!-- Screen list show -->
<div class="row" id="screen">
<div class="col-12">
<ul id="list">
</ul>
</div>
</div>
<!-- Note show -->
<div class="row" id="fullnote">
<div class="col-12">
<p id="text">
</p>
</div>
</div>
<!-- input for note title -->
<div class="row" id="input-title">
<div class="col">
<input type="text" maxlength="20" class="form-control" placeholder="Note title" value="" id="note-title">
<p id="err1">Title must be at least 3 characters</p>
<p id="err3">There is a note with this title</p>
</div>
</div>
<br />
<!-- textarea for writing note -->
<div class="row flex-grow-1">
<div class="col" id="main">
<textarea class="form-control textarea h-100" value="" placeholder="write note" id="note"></textarea>
<p id="err2">Note can not be empty</p>
</div>
</div>
<br />
<!-- footer -->
<div class="row align-items-end container" id="footer">
<div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
<button id="add" class="btn btn-info rounded-circle"><h4 style="padding: 0px; margin: 0px;">+</h4></button>
<button id="delete" class="btn btn-info rounded-circle">🗑</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Steps to recreate the issue:
Try to add a note, save it, and press on it's title to read the note and you'll understand what I mean.

The problem was in your <p id="text"> tag. It was hidden behind the blue header. Just used a couple of <br> and it is visible now.
const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete");
const note = document.getElementById("note");
const back = document.getElementById("back");
const noteTitle = document.getElementById("note-title");
const inputTitle = document.getElementById("input-title");
const err1 = document.getElementById("err1");
const err2 = document.getElementById("err2");
const err3 = document.getElementById("err3");
const text = document.getElementById("text");
let flag1 = false;
let flag2 = false;
let flag3 = false;
let mynotes = {};
let i = 1;
add.addEventListener('click', function(){
main.style.display = "block";
submit.style.display = "inline";
cancel.style.display = "inline";
add.style.display = "none";
screen.style.display = "none";
del.style.display = "none";
back.style.display = "none";
inputTitle.style.display = "block"
});
submit.addEventListener('click', function(){
title = noteTitle.value;
newNote = note.value;
if (title.length < 3){
err1.style.display = "block";
flag1 = true;
} else {
err1.style.display = "none";
flag1 = false
}
if (newNote === ""){
err2.style.display = "block";
flag2 = true;
} else {
err2.style.display = "none";
flag2 = false;
}
if (mynotes.hasOwnProperty(title)){
err3.style.display = "block";
flag3 = true;
} else {
err3.style.display = "none";
flag3 = false;
}
if (!flag1 && !flag2 && !flag3) {
newNote = newNote.replace(/\n/g, "<br>");
mynotes[title] = newNote;
var li = document.createElement("li");
li.setAttribute('class','item');
li.appendChild(document.createTextNode(title));
ul.appendChild(li);
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
cancel.style.display = "none";
add.style.display = "inline";
del.style.display = "none";
back.style.display = "none";
inputTitle.style.display = "none";
note.value = "";
noteTitle.value = "";
}
});
ul.addEventListener('click', function(event){
node = event.target;
item = event.target.textContent;
console.log(mynotes[item])
text.innerHTML = mynotes[item];
fullnote.style.display = "block";
main.style.display = "none";
submit.style.display = "none";
add.style.display = "none";
screen.style.display = "none";
cancel.style.display = "none";
del.style.display = "inline";
back.style.display = "inline";
inputTitle.style.display = "none";
});
del.addEventListener('click', function(){
ul.removeChild(node);
delete mynotes[item];
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
inputTitle.style.display = "none";
});
cancel.addEventListener('click', function(){
note.value = "";
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
del.style.display = "none";
back.style.display = "none";
cancel.style.display = "none";
inputTitle.style.display = "none";
});
back.addEventListener('click', function(){
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
inputTitle.style.display = "none";
});
#container {
background-color: rgb(253, 248, 177);
}
#header, #footer {
z-index: 2;
width: 100%;
position: fixed;
}
#footer {
bottom: 0;
}
#screen, #input-title {
margin-top: 2em;
}
#title {
color: white;
padding-top: 7px;
}
#cancel, #submit, #back {
color: white;
font-size: 20px;
}
#add {
font-size: 20px;
}
#delete, #cancel, #submit {
display: none;
}
#input-title {
display: none;
}
#main {
display: none;
}
#note {
resize: none;
}
#fullnote {
display: none;
}
#back {
display: none;
}
#err1 {
color: red;
font-size: 12px;
font-weight: bold;
display: none;
}
#err2 {
color: red;
font-size: 12px;
font-weight: bold;
display: none;
}
#err3 {
color: red;
font-size: 12px;
font-weight: bold;
display: none;
}
<!doctype html>
<html lang="en">
<head>
<!-- link to css -->
<link rel="stylesheet" href="style.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<title>Notebook</title>
</head>
<body>
<div class="container min-vh-100 d-flex flex-column" id="container">
<!-- header -->
<div class="row align-items-start bg-info container" id="header">
<div class="col text-center">
<button type="button" class="btn" id="cancel">✗</button>
<button type="button" class="btn" id="back">↩</button>
</div>
<div class="col text-center">
<h4 id="title">Notebook</h4>
</div>
<div class="col text-center">
<button type="button" class="btn" id="submit">✔</button>
</div>
</div>
<br />
<!-- Screen list show -->
<div class="row" id="screen">
<div class="col-12">
<ul id="list">
</ul>
</div>
</div>
<!-- Note show -->
<div class="row" id="fullnote">
<div class="col-12">
<br><br>
<p id="text">
</p>
</div>
</div>
<!-- input for note title -->
<div class="row" id="input-title">
<div class="col">
<input type="text" maxlength="20" class="form-control" placeholder="Note title" value="" id="note-title">
<p id="err1">Title must be at least 3 characters</p>
<p id="err3">There is a note with this title</p>
</div>
</div>
<br />
<!-- textarea for writing note -->
<div class="row flex-grow-1">
<div class="col" id="main">
<textarea class="form-control textarea h-100" value="" placeholder="write note" id="note"></textarea>
<p id="err2">Note can not be empty</p>
</div>
</div>
<br />
<!-- footer -->
<div class="row align-items-end container" id="footer">
<div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
<button id="add" class="btn btn-info rounded-circle"><h4 style="padding: 0px; margin: 0px;">+</h4></button>
<button id="delete" class="btn btn-info rounded-circle">🗑</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

The problem is that the note text is under the header.
Add some margin to the note text section
#fullnote {
margin-top: 50px;
}

It's actually working exactly as you expect. The problem isn't that the full text of the note isn't being displayed, it is that your fullnote element has not been pushed down (margin-top, most likely), placing it directly behind the #header div.
I would suggest strongly that you use the Chrome Developer Tools (or if you're on another platform, their dev tools). It will allow you to see if there are javascript errors, and also to poke around in the DOM structure itself. By doing this, I could see the #fullnote, and that it did, in fact, contain the text of the note as you'd wanted.

The fullnote element is actually hidden by green bar
Change CSS to
#fullnote {
margin-top: 25px;
display: none;
}

textarea value property ignore the linebreaks and whitespaces when read it with javascript

I've been working on a small notebook app that works on the browser, my problem is that if i typed a note like this:
*hello
this is my first note
the app show it like this:
hello this is my first note
I also want the elements with id's of header and footer to be shown even when i scroll down or up (sth like setting posiotion to fixed but this doesn't work for me).
here is a link to the project to see the codes and try it. Codepen

you have to replace linebreaks and whitespaces with html like
note.value.replace(/\n/g, '<br>\n').replace(/\s/g,' ');
and add it to the innerHTML of the <li> instead of creating a textnode.
li.innerHTML = show;
Take a look at my example:
const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete");
const note = document.getElementById("note");
const back = document.getElementById("back");
let mynotes = {};
let i = 0;
add.addEventListener('click', function() {
main.style.display = "block";
submit.style.display = "inline";
cancel.style.display = "inline";
add.style.display = "none";
screen.style.display = "none";
del.style.display = "none";
back.style.display = "none";
});
submit.addEventListener('click', function() {
if (note.value) {
newNote = note.value.replace(/\n/g, '<br>\n').replace(/\s/g,' ');
if (newNote.length > 50) {
show = newNote.substring(0, 46) + "...";
} else {
show = newNote;
}
if (mynotes.hasOwnProperty(show)) {
show = show + `${++i}`;
}
mynotes[show] = newNote;
var li = document.createElement("li");
li.setAttribute('class', 'item');
li.innerHTML = show;
ul.appendChild(li);
note.value = "";
} else {
alert("can't add empty note");
}
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
cancel.style.display = "none";
add.style.display = "inline";
del.style.display = "none";
back.style.display = "none";
});
ul.addEventListener('click', function(event) {
node = event.target;
item = event.target.innerHTML;
text.innerHTML = mynotes[item];
fullnote.style.display = "block";
main.style.display = "none";
submit.style.display = "none";
add.style.display = "none";
screen.style.display = "none";
cancel.style.display = "none";
del.style.display = "inline";
back.style.display = "inline";
});
del.addEventListener('click', function() {
ul.removeChild(node);
delete mynotes[item];
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
});
cancel.addEventListener('click', function() {
note.value = "";
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
del.style.display = "none";
back.style.display = "none";
cancel.style.display = "none";
})
back.addEventListener('click', function() {
main.style.display = "none";
screen.style.display = "block";
submit.style.display = "none";
add.style.display = "inline";
fullnote.style.display = "none";
back.style.display = "none";
del.style.display = "none";
});
#container {
background-color: rgb(253, 248, 177);
}
#header,
#footer {
z-index: 2;
}
#title {
color: white;
padding-top: 7px;
}
#cancel,
#submit,
#back {
color: white;
font-size: 20px;
}
#add {
font-size: 20px;
}
#delete,
#cancel,
#submit {
display: none;
}
#main {
display: none;
}
#note {
resize: none;
}
#fullnote {
display: none;
}
#back {
display: none;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<div class="container min-vh-100 d-flex flex-column" id="container">
<!-- header -->
<div class="row align-items-start bg-info" id="header">
<div class="col text-center">
<button type="button" class="btn" id="cancel">✗</button>
<button type="button" class="btn" id="back">↩</button>
</div>
<div class="col text-center">
<h4 id="title">Notebook</h4>
</div>
<div class="col text-center">
<button type="button" class="btn" id="submit">✔</button>
</div>
</div>
<br />
<!-- Screen list show -->
<div class="row" id="screen">
<div class="col-12">
<ul id="list">
</ul>
</div>
</div>
<!-- Note show -->
<div class="row" id="fullnote">
<div class="col-12">
<p id="text">
</p>
</div>
</div>
<!-- textarea -->
<div class="row flex-grow-1">
<div class="col" id="main">
<textarea class="form-control textarea h-100" value="" placeholder="write note" id="note"></textarea>
</div>
</div>
<!-- footer -->
<div class="row align-items-end" id="footer">
<div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
<button id="add" class="btn btn-info rounded-circle"><h4 style="padding: 0px; margin: 0px;">+</h4></button>
<button id="delete" class="btn btn-info rounded-circle">🗑</button>
</div>
</div>
</div>

You either have to convert the newlines to br's:
str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');
Or you can do this with css:
.text, .item {
white-space: pre-wrap;
}