I am struggling to get the restart button to display the start screen again. Even though I have called the restart function within the clearColors function, which should show the start screen, it hasn't been effective so far. Initially, in the fadeOutEffect function, I set the style of the main div (by classname .blankscreen) to none when the screen loads. This might be causing the issue. However, I can confirm that the restart function is functioning correctly since I changed the background color to red.
JS
function game() {
document.querySelector("#btn").addEventListener('click', fadeOutEffect);
document.querySelector("#rst").addEventListener('click', clearColors);
let colors = ["red", "blue", "yellow", "purple", "green", "orange"];
let tabledata = document.querySelectorAll('td');
let i =0;
tabledata.forEach(td => {
console.log(td);
td.addEventListener('click', () => {
i++;
if (i > 0) {
tabledata.forEach(td => {
let newcolor = colors[Math.floor(Math.random() * tabledata.length)];
td.style.backgroundColor =`${newcolor}`;
td.innerHTML=`${newcolor}`;
})
}
});
});
function fadeOutEffect() { //fade out on click
var fadeTarget = document.querySelector(".blankscreen");
var fadeEffect = setInterval(function () {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
setTimeout(() => {
document.querySelector('.blankscreen').style.display="none";
}, 500)
document.querySelector('.reset').style.display="flex";
}
}, 100);
}
function clearColors() {
tabledata.forEach(td => {
td.innerHTML="";
td.style.backgroundColor="transparent";
})
restart();
};
function restart() {
setTimeout(() => {
document.body.style.backgroundColor="red";
document.querySelector('.blankscreen').style.display="flex";
}, 500);
}
}
game(); // call game function
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="blankscreen startgame" id="start">
<p>Start</p>
<button type="button" id="btn">Start</button>
</div>
<div class="reset">
<!-- <p>Reset</p> -->
<button type="button" id="rst">Reset</button>
</div>
<table>
<tr>
<th id="">squares</th>
</tr>
<tr>
<td>Red</td>
<td>Blue</td>
<td>Yellow</td>
</tr>
<tr>
<td>Purple</td>
<td>Green</td>
<td>Orange</td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>
CSS
body {
height: 100vh;
}
.blankscreen {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 232.5px;
width: 314px;
top: 232.5px;
background-color: rgb(237, 103, 103);
z-index: 99;
}
table {
position: absolute;
top: 232.5px;
cursor: pointer;
/* z-index: 99; */
}
td {
height: 100px;
width: 100px;
text-align: center;
}
.reset {
display: none; /* set to flex */
flex-direction: row;
justify-content: center;
position: absolute;
width: 314px;
margin-top: 475px;
}
.reset #rst {
position: absolute;
top: 0;
}