I have a query about html, css, javascript.
I've developed a game where numbers need to be clicked in a specific order.
Upon clicking the stop button midway through the game, I want to display the record time in red color like shown in this image: enter image description here
I also have some hints.
- Utilize the following code:
newP.className = "stopped";
- Use CSS selector by class name
- Create division: Game success, Game stop
Here's my complete code snippet.
var answer = 0;
function start() {
startTime = new Date().getTime();
toggleButton = document.getElementById("toggle_button");
toggleButton.innerHTML = "Stop";
toggleButton.onclick = stop;
init();
timer = setInterval(function() {
now = new Date().getTime();
seconds = now - startTime;
document.getElementById("time").innerHTML = displayTime(seconds);
}, 60);
}
function stop() {
clearInterval(timer);
toggleButton = document.getElementById("toggle_button");
toggleButton.innerHTML = "Start";
toggleButton.onclick = start;
}
function btnClick(num) {
btns = document.getElementsByClassName("btn");
if (num == answer) {
answer = answer+1;
btns[num].disabled = true;
if (num == 8) {
stop();
score = document.getElementById("time").innerHTML;
newP = document.createElement("p");
newP.appendChild(document.createTextNode(score));
document.getElementById("score_board").appendChild(newP);
}
} else {
init();
}
}
function init() {
answer = 0;
btns = document.getElementsByClassName("btn");
for (let index=0; index<btns.length; index++) {
btns[index].disabled = false;
btns[index].innerHTML = index;
}
}
function displayTime (seconds) {
m = String(Math.floor(seconds / 1000 / 60));
s = String(Math.floor((seconds / 1000) % 60));
ms = String(Math.floor(seconds % 100));
return m.padStart(2, '0') + ":" + s.padStart(2, '0') + ":" + ms.padStart(2, '0');
};.btn {
width:60px;
height:60px;
font-size:18px;
margin:2px;
} /*select by class */
#toggle_button {
width:120px;
background-color:#000;
color:#fff;
height:24px;
border:none;
}
#time {
font-size:20px;
font-weight:bold;
} /*select by id */
img {
width:100px;
} /*select by html elemnt */<center>
<p id="time">00:00:00</p>
<button id="toggle_button" onclick="start()">Start</button>
<br /><br />
<button id="button_1" class="btn" onclick="btnClick(0)" disabled>?</button>
<button id="button_2" class="btn" onclick="btnClick(1)" disabled>?</button>
<button id="button_3" class="btn" onclick="btnClick(2)" disabled>?</button><br />
<button id="button_4" class="btn" onclick="btnClick(3)" disabled>?</button>
<button id="button_5" class="btn" onclick="btnClick(4)" disabled>?</button>
<button id="button_6" class="btn" onclick="btnClick(5)" disabled>?</button><br />
<button id="button_7" class="btn" onclick="btnClick(6)" disabled>?</button>
<button id="button_8" class="btn" onclick="btnClick(7)" disabled>?</button>
<button id="button_9" class="btn" onclick="btnClick(8)" disabled>?</button>
<div id="score_board">
<p><strong>Score Board</strong><p>
</div>
</center>Apologies for any language errors as English is not my native tongue. Thank you very much...!