As I try to learn JavaScript, I'm creating my Quiz game and encountering an issue with a modal window. After entering my nickname and pushing Submit, I want to save the nickname in localStorage and close the modal window. However, the problem is that the modal window keeps appearing again, preventing me from progressing to the main page of the quiz. If anyone has a different approach to achieving this in JavaScript, please share your insights. Initially, I considered having two HTML documents - index.html and nickname.html, but I got stuck when trying to change the URL using JavaScript after submitting the form. Any suggestions or guidance would be greatly appreciated. Thank you.
const enter = document.getElementById('enter');
const modal = document.getElementById('screen');
enter.addEventListener('click',function(){
let forms = document.forms["form-welcome"]["nickname"].value
if(forms == ""){
alert("Please write your nickname.");
return false;
}
else{
modal.style.display = "none";
save();
}
})
function save(){
localStorage.setItem(
document.forms["form-welcome"]["nickname"].value
);
}*{
margin: 0px;
padding: 0px;
}
body{
background-color: red;
}
/*##### Window Modal #####*/
.wrapper{
font-size: 24px;
font-family:'Bree Serif', serif;
text-align: center;
}
.modal{
display: block;
position: fixed;
z-index: 1;
left: 0;
top:0;
width:100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgb(0,0,0,0.4);
}
.offModal{
display: none;
}
.animate{
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s;
}
.model{
display: inline-block;
margin-top: 25px;
width: 30%;
height: auto;
background-color: #4edb0cfb;
position: relative;
border-radius: 25px;
border:1px solid rgba(0, 0, 0, 0.267);
box-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.4);
}
.welcome{
letter-spacing: 1px;
position: relative;
text-align: center;
line-height: 50px;
padding-top: 15px;
margin-top: 15px;
}
.submit{
border-radius: 5px;
font-size: 30px;
margin: 10px;
padding: 10px;
}
.submit:hover{
background-color: rgb(153, 150, 150);
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final-Quiz</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<!-- FIST SCREEN -->
<section>
<div id="screen" class="modal">
<form class="welcome model" name="form-welcome">
<h1>Final-Quiz</h1>
<label for="nickname">Nickname:</label>
<input type="text" name="nickname" required>
<input id="enter" class="submit" type="submit" value="Enter">
<p>Let's check your knowledge about HTML, CSS, and JavaScript.</p>
</form>
</div>
</div>
</section>
</div>
<script src="localStorage.js"></script>
</body>
</html>