We Keep Coding

How to add lap functionality in stopwatch using Javascript?

I am working on a stopwatch and basically I have all done but I don't know how to add the lapping functionality. I want that as soon as the user clicks on the lap button, a new lap gets added on a "new line". However I am not able to do that here is my code:
let hours = 0;
let minutes = 0;
let seconds = 0;
let miliseconds = 0;
let displayMilisec = miliseconds;
let displaySec = seconds;
let displayMins = minutes;
let displayHours = hours;
let interval = null;
let status = "stopped";
let laps = null;
let lapNow = null;
function start() {
miliseconds++;
if (miliseconds < 10){
displayMilisec = "0" + miliseconds.toString();
}
else {
displayMilisec = miliseconds;
}
if(seconds < 10) {
displaySec = "0" + seconds.toString();
}
else {
displaySec = seconds;
}
if(minutes < 10) {
displayMins = "0" + minutes.toString();
}
else {
displayMins = minutes;
}
if(hours < 10) {
displayHours = "0" + hours.toString();
}
else {
displayHours = hours;
}
if (miliseconds / 100 === 1) {
seconds++;
miliseconds = 0;
if (seconds / 60 === 1) {
minutes++;
seconds = 0;
if (minutes / 60 === 1) {
hours++;
minutes = 0;
}
}
}
document.getElementById("timerMilisec").innerHTML = displayMilisec;
document.getElementById("timerSec").innerHTML = displaySec;
document.getElementById("timerMins").innerHTML = displayMins;
document.getElementById("timerHrs").innerHTML = displayHours;
}
function startStop() {
if (status === "stopped") {
interval = window.setInterval(start, 10);
document.getElementById('startBtn').innerHTML = "Stop";
status = "started";
}
else {
window.clearInterval(interval);
document.getElementById('startBtn').innerHTML = "Start";
status = "stopped";
}
}
function reset() {
window.clearInterval(interval);
miliseconds = 0;
seconds = 0;
minutes = 0;
hours = 0;
document.getElementById("timerMilisec").innerHTML = "00";
document.getElementById("timerSec").innerHTML = "00";
document.getElementById("timerMins").innerHTML = "00";
document.getElementById("timerHrs").innerHTML = "00";
document.getElementById('startBtn').innerHTML = "Start";
status = "stopped";
}
function lap() {
lapNow = hours + " : " + minutes + " : " + seconds + " : " + miliseconds;
laps = document.getElementById('lapRecord').innerHTML + lapNow;
document.getElementById('lapRecord').innerHTML = laps;
}
body {
height: 100vh;
margin: 40px 0px 0px 0px;
background-color: #58e065;
display: flex;
justify-content: center;
overflow: hidden;
}
.display {
display: flex;
left: 50%;
align-items: center;
justify-content: center;
font-family: "nunito","poppins", sans-serif;
font-weight: 700;
font-size: 60px;
color: white;
text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
}
p {
margin: 5px;
}
.buttons {
display: flex;
justify-content: center;
}
button {
cursor: pointer;
height: 30px;
width: 80px;
border: none;
outline: none;
border-radius: 4px;
background-color: #3b85ed;
font-family: "nunito","poppins", sans-serif;
font-size: 18px;
font-weight: 700;
color: white;
box-shadow: 3px 3px 0px #224f8f;
margin: 4px;
}
button:hover {
background-color: #224f8f;
}
h1 {
position: sticky;
background-color: #ff961d;
display: flex;
justify-content: center;
margin: 30px;
font-family: "nunito", "poppins", sans-serif;
font-size: 40px;
font-weight: 700;
color: white;
text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
border-radius: 10px;
box-shadow: 3px 3px 0px rgb(179, 101, 0);
}
#header {
width: 100%;
height: 100px;
position: sticky;
}
#laps {
margin-top: 40px;
height: 400px;
scroll-behavior: smooth;
}
<div class="wrapper" id="wrapper">
<div class="display">
<p class="timerDisplay" id="timerHrs">00</p> :
<p class="timerDisplay" id="timerMins">00</p> :
<p class="timerDisplay" id="timerSec">00</p> :
<p class="timerDisplay" id="timerMilisec">00</p>
</div>
<div class="buttons">
<button type="button" id="startBtn" onclick="startStop()">Start</button>
<button type="button" id="resetBtn" onclick="reset()">Reset</button>
<button type="button" id="lapBtn">Lap</button>
</div>
<h1>Laps:</h1>
<div id="laps">
<p id="lapRecord">
</p>
</div>
</div>
I have used a very bad method to do this but yeah I will definitely improve it as soon as know how to add that lap function. I would appreciate an explanation of your code as I just a beginner to coding and I don't know much still. Thank you so much for reading my questions.

Well then, I've edited the code and implemented the lap functionality. Here's what I did.
I would advice you stop using inline html event listeners (onclick). So I replaced all the onclicks with addEventListener('click')
Selecting elements from the DOM is heavy on the performance of your document, so I assigned all the ids to a variable, because these elements were used a lot.
In the lap function, I used template stings to concatenate the time together, and wrapped them in a <div></div> tag with a class of lap in case you want to style the laps later.
I also removed curly braces ({ }) around one-line ifelse statements to reduce the number of lines in the code.
You can test it out here in the snippet. :-)
const lapBtn = document.getElementById('lapBtn');
const timerMilliSec = document.getElementById('timerMilliSec');
const timerSec = document.getElementById('timerSec');
const timerMins = document.getElementById('timerMins');
const timerHrs = document.getElementById('timerHrs');
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');
const lapRecord = document.getElementById('lapRecord');
let hours = 0;
let minutes = 0;
let seconds = 0;
let miliseconds = 0;
let displayMilisec = miliseconds;
let displaySec = seconds;
let displayMins = minutes;
let displayHours = hours;
let interval = null;
let status = "stopped";
let lapNow = null;
function start() {
miliseconds++;
if (miliseconds < 10) displayMilisec = "0" + miliseconds.toString();
else displayMilisec = miliseconds;
if (seconds < 10) displaySec = "0" + seconds.toString();
else displaySec = seconds;
if (minutes < 10) displayMins = "0" + minutes.toString();
else displayMins = minutes;
if (hours < 10) displayHours = "0" + hours.toString();
else displayHours = hours;
if (miliseconds / 100 === 1) {
seconds++;
miliseconds = 0;
if (seconds / 60 === 1) {
minutes++;
seconds = 0;
if (minutes / 60 === 1) {
hours++;
minutes = 0;
}
}
}
timerMilisec.innerHTML = displayMilisec;
timerSec.innerHTML = displaySec;
timerMins.innerHTML = displayMins;
timerHrs.innerHTML = displayHours;
}
function startStop() {
if (status === "stopped") {
interval = setInterval(start, 10);
startBtn.innerHTML = "Stop";
status = "started";
} else {
clearInterval(interval);
startBtn.innerHTML = "Start";
status = "stopped";
}
}
function reset() {
clearInterval(interval);
miliseconds = 0;
seconds = 0;
minutes = 0;
hours = 0;
timerMilisec.innerHTML = "00";
timerSec.innerHTML = "00";
timerMins.innerHTML = "00";
timerHrs.innerHTML = "00";
startBtn.innerHTML = "Start";
lapRecord.innerHTML = '';
status = "stopped";
}
function lap() {
lapNow = `<div class="lap">${hours} : ${minutes} : ${seconds} : ${miliseconds}</div>`;
lapRecord.innerHTML += lapNow;
}
lapBtn.addEventListener('click', lap);
startBtn.addEventListener('click', startStop);
resetBtn.addEventListener('click', reset);
body {
height: 100vh;
margin: 40px 0px 0px 0px;
background-color: #58e065;
display: flex;
justify-content: center;
overflow: hidden;
}
.display {
display: flex;
left: 50%;
align-items: center;
justify-content: center;
font-family: "nunito", "poppins", sans-serif;
font-weight: 700;
font-size: 60px;
color: white;
text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
}
p {
margin: 5px;
}
.buttons {
display: flex;
justify-content: center;
}
button {
cursor: pointer;
height: 30px;
width: 80px;
border: none;
outline: none;
border-radius: 4px;
background-color: #3b85ed;
font-family: "nunito", "poppins", sans-serif;
font-size: 18px;
font-weight: 700;
color: white;
box-shadow: 3px 3px 0px #224f8f;
margin: 4px;
}
button:hover {
background-color: #224f8f;
}
h1 {
position: sticky;
background-color: #ff961d;
display: flex;
justify-content: center;
margin: 30px;
font-family: "nunito", "poppins", sans-serif;
font-size: 40px;
font-weight: 700;
color: white;
text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
border-radius: 10px;
box-shadow: 3px 3px 0px rgb(179, 101, 0);
}
#header {
width: 100%;
height: 100px;
position: sticky;
}
#laps {
margin-top: 40px;
height: 400px;
scroll-behavior: smooth;
}
<div class="wrapper" id="wrapper">
<div class="display">
<p class="timerDisplay" id="timerHrs">00</p> :
<p class="timerDisplay" id="timerMins">00</p> :
<p class="timerDisplay" id="timerSec">00</p> :
<p class="timerDisplay" id="timerMilisec">00</p>
</div>
<div class="buttons">
<button type="button" id="startBtn">Start</button>
<button type="button" id="resetBtn">Reset</button>
<button type="button" id="lapBtn">Lap</button>
</div>
<h1>Laps:</h1>
<div id="laps">
<p id="lapRecord"></p>
</div>
</div>

Previous question button in JavaScript and saving users answers

I'm trying to make a JavaScript quiz and I need the user to be able to go to the previous question to see or change his/her answer . The next button works with me but I have a problem with the previous button . what I also need is when the user goes back, the original answer should be saved. here is my code. I also put it on codepen
const questionNumber = document.querySelector(".question_number");
const questionText = document.querySelector(".question_text");
const optionContainer = document.querySelector(".option_container");
const answerIndecatorContainer = document.querySelector(".answer_indicator");
const homeBox = document.querySelector(".home_box");
const quizBox = document.querySelector(".quiz_box");
const resultBox = document.querySelector(".result_box");
const registerBox = document.querySelector(".register_box");
const timeBox = document.querySelector("time_box");
let questionCounter = 0;
let currentQuestion;
let availableQuestions = [];
let availableOptions = [];
let correctAnswers = 0;
let attempt = 0;
//push the question into availableQuestions array
function setAvailableQuestions(){
const totalQuestion = quiz.length;
for (let i=0; i<totalQuestion; i++){
availableQuestions.push(quiz[i])
}
}
// set question number and question options
function getNewQuestions(){
//set question number
questionNumber.innerHTML = "Question " + (questionCounter +1) + " of " + quiz.length;
// set question text
//get random questions
const questionIndex = availableQuestions[Math.floor(Math.random() * availableQuestions.length)]
currentQuestion = questionIndex;
questionText.innerHTML = currentQuestion.q;
//get the position of 'questionIndex' from the availableQuestions array
const index1 = availableQuestions.indexOf(questionIndex);
// remove the questionIndex from the availableQuestions array, so that the question does not repeat
availableQuestions.splice(index1,1);
//console.log(questionIndex)
//console.log(availableQuestions)
//set options
//get the length of options
const optionLen = currentQuestion.options.length
//push options into availableOptions array
for (let i=0; i<optionLen; i++){
availableOptions.push(i)
}
optionContainer.innerHTML = '';
let animationDelay = 0.15;
//create options in html
for(let i=0; i<optionLen; i++){
//random options
const optionIndex = availableOptions[Math.floor(Math.random() * availableOptions.length)];
//get the position of optionIndex from the availableOptions
const index2 = availableOptions.indexOf(optionIndex);
//remove the optionIndex from availableOptions
availableOptions.splice(index2,1);
const option = document.createElement("div");
option.innerHTML = currentQuestion.options[optionIndex];
option.id = optionIndex;
option.style.animationDelay= animationDelay + 's';
animationDelay = animationDelay + 0.15;
option.className = "option";
optionContainer.appendChild(option)
option.setAttribute("onclick", "getResult(this)");
}
questionCounter++
}
//get result of current attempt
function getResult(element){
const id = parseInt(element.id);
//get the answer by compairing the id of the options
if (id === currentQuestion.answer){
//set the green color to the correct option
element.classList.add("correct");
//add color to indector if answer is correct
updateAnswerIndecator("correct");
correctAnswers++;
}else{
//set the red color to the incorrect option
element.classList.add("wrong");
//add color to indector if answer is wrong
updateAnswerIndecator("wrong");
}
attempt++;
//unclickableOptions();
}
/*make all options unclickable once the user select
function unclickableOptions(){
const optionLen = optionContainer.children.length;
for(let i=0 ; i<optionLen ; i++){
optionContainer.children[i].classList.add("aready-answered");
}
}*/
function answerIndecator(){
answerIndecatorContainer.innerHTML = '';
const totalQuestion = quiz.length;
for (let i=0 ; i<totalQuestion ; i++){
const indecator = document.createElement("div");
answerIndecatorContainer.appendChild(indecator);
}
} function updateAnswerIndecator(markType){
answerIndecatorContainer.children[questionCounter-1].classList.add(markType);
}
function next(){
if (questionCounter === quiz.length){
quizOver();
}else{
getNewQuestions();
}
//
}
//Previous button
/*function previous(){
if (questionCounter == 0) {
questionCounter = quiz.length - 1;
} // reset question
else {
questionCounter--;
}
}*/
//
function quizOver(){
//when the quiz is over, the timer stops
//window.clearInterval(update);
clearInterval(countdownTimer);
upgradeTime = "-";
//show the registrer box
registerBox.classList.remove("hide");
//hide quiz box
quizBox.classList.add("hide");
}
function register(){
//show the result box
resultBox.classList.remove("hide");
//
registerBox.classList.add("hide");
quizResult();
}
//get the quiz result
function quizResult(){
resultBox.querySelector(".total_question").innerHTML = quiz.length;
resultBox.querySelector(".total_attempt").innerHTML = attempt;
resultBox.querySelector(".total_correct").innerHTML = correctAnswers;
resultBox.querySelector(".total_wrong").innerHTML = attempt - correctAnswers;
const persentage = (correctAnswers/quiz.length)*100;
resultBox.querySelector(".persentage").innerHTML = persentage.toFixed(2) + "%";
resultBox.querySelector(".total_score").innerHTML = correctAnswers + " / " + quiz.length;
}
function resetQuiz(){
questionCounter = 0;
correctAnswers = 0;
attempt = 0;
}
function tryAgainQuiz(){
//hide the resultBox
resultBox.classList.add("hide");
//show the quizBox
quizBox.classList.remove("hide");
resetQuiz();
startQuiz();
}
function goToHome(){
//hide the result box
resultBox.classList.add("hide");
//show home box
homeBox.classList.remove("hide");
resetQuiz();
}
//###STARTING POINT###
function startQuiz() {
//start timer
upgradeTime = 20;
seconds = upgradeTime;
//hide home Box
homeBox.classList.add("hide");
//show the quiz box
quizBox.classList.remove("hide");
//first we set all questions in availableQuestions array
setAvailableQuestions();
//second we will call the getNewQuestions() funcrion
getNewQuestions();
//to create indecator of answers
answerIndecator();
}
function timer() {
var days = Math.floor(seconds/24/60/60);
var hoursLeft = Math.floor((seconds) - (days*86400));
var hours = Math.floor(hoursLeft/3600);
var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
var minutes = Math.floor(minutesLeft/60);
var remainingSeconds = seconds % 60;
function pad(n) {
return (n < 10 ? "0" + n : n);
}
document.getElementById('countdown').innerHTML = "الوقت المتبقي :" + pad(minutes) + ":" + pad(remainingSeconds);
if (seconds == 0) {
clearInterval(countdownTimer);
document.getElementById('countdown').innerHTML = "انتهى الوقت";
quizBox.classList.add("hide");
registerBox.classList.remove("hide");
//show the result box
/*resultBox.classList.remove("hide");
quizResult();*/
} else {
seconds--;
}
}
var countdownTimer = setInterval('timer()', 1000);
window.onload = function (){
homeBox.querySelector(".total_question").innerHTML = quiz.length;
}
//array of objects
const quiz = [
{
q:' أوجد قيمة: \(\left( {3 + \sqrt 3 } \right) - \sqrt 3 + 18\) ',
options:['٨٤','\(81 + \sqrt 6 \)','٧٨','٧٩'],
answer:0
},
{
q:' HOW',
options:['٣٤,١ دقيقة ','٣,١٤ دقيقة ','٣١٤ دقيقة','٣٤١ دقيقة '],
answer:0
},
{
q:'ا قيمة \(\frac{{{9^4} - {9^6}}}{{{9^2} - {9^3}}}\) ',
options:['800','810','9','\({9^3}\)'],
answer:0
},
{
q:'ذا كانت مساحة الدائرة الصغيرة = 16 ط فإن محيط المنطقة المظللة = ',
options:['64 ط','4ط','8ط','24'],
answer:3
},
{
q:'حتاج ارض زراعية 15 يوم لينمو فيها \(1.2 + {10^8}\) من لا شيء فكم تحتاج لينمو فيها \(4.0 + {10^8}\) من لا شيء',
options:['18','60','13','45'],
answer:1
},
{
q:'حتاج ارض زراعية 15 يوم لينمو فيها \(1.2 + {10^8}\) من لا شيء فكم تحتاج لينمو فيها \(4.0 + {10^8}\) من لا شيء',
options:['18','60','13','45'],
answer:1
}
]
#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,400;0,500;0,600;0,700;1,700&display=swap');
body{
margin: 0;
font-size: 16px;
background-color: #009688;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
*{
box-sizing: border-box;
margin:0;
padding:0;
outline:none;
}
.custom_box{
max-width: 700px;
background-color: #ffffff;
margin: 49px auto;
padding: 30px;
border-radius: 10PX;
animation: fadeInRight 1s ease;
}
#keyframes fadeInRight{
0%{
transform: translateX(40px);
opacity: 0;
}
100%{
transform: translateX(0px);
opacity: 1;
}
}
.custom_box::before,
.custom_box::after{
content: '';
clear: both;
display: table;
}
.custom_box.hide{
display: none;
}
.home_box h3{
font-size: 18px;
color:#000000;
font-weight:500;
margin-bottom: 15px;
line-height: 25px;
}
.home_box p{
font-size: 16px;
margin-bottom: 10px;
line-height:22px;
color:#000000;
font-weight:400;
}
.home_box p span{
font-weight: 500;
}
.home_box .btn{
margin-top: 20px;
}
.btn{
padding: 15px 45px;
background-color: #009688;
color: #ffffff;
border:none;
border-radius:5px;
font-family: 'Montserrat', sans-serif;
font-size:16px;
cursor:pointer;
display: inline-block;
}
.quiz_box .question_number,
.quiz_box .question_text,
.quiz_box .option_container,
.quiz_box .next_question_btn,
.quiz_box .answer_indicator{
width: 100%;
float: left;
}
.quiz_box .question_number{
font-size: 18px;
color:#009688;
font-weight: 600;
border-bottom: 1px solid #cccccc;
padding-bottom: 10px;
line-height: 25px;
}
.quiz_box .question_text{
font-size: 22px;
color:#000000;
line-height: 28px;
font-weight: 400;
padding: 20px 0;
margin: 0;
}
.quiz_box .option_container .option{
background-color: #cccccc;
padding:13px 15px;
font-size: 16px;
line-height: 22px;
color: #000000;
border-radius: 5px;
margin-bottom: 10px;
cursor: pointer;
text-transform: capitalize;
opacity: 0;
animation: fadeIn 0.3s ease forwards;
position: relative;
overflow: hidden;
}
.quiz_box .option_container .option.aready-answered{
pointer-events: none;
}
#keyframes fadeIn{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.quiz_box .option_container .option.correct::before{
content: '';
position: absolute;
left:0;
top: 0;
height: 100%;
width: 100%;
background-color: green;
z-index: -1;
animation: slideInLift .5s ease forwards
}
#keyframes slideInLift{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(0%);
}
}
.quiz_box .option_container .option.correct{
color: #ffffff;
}
.quiz_box .btn{
margin: 15px 0;
}
.quiz_box .answer_indicator{
border-top: 1px solid #cccccc;
}
.quiz_box .answer_indicator div{
height: 40px;
width: 40px;
display: inline-block;
background-color: #cccccc;
border-radius: 50%;
margin-right:3px;
margin-top: 15px;
}
.quiz_box .answer_indicator div.correct{
background-color: green;
}
.quiz_box .answer_indicator div.wrong{
background-color: red;
}
.result_box{
text-align: center;
}
.result_box.hide{
display: none;
}
.result_box h1{
font-size: 36px;
line-height: 42px;
color: #009688;
}
.result_box table{
width: 100%;
border-collapse: collapse;
margin:30px 0;
}
.result_box table td{
border:1px solid #cccccc;
padding: 8px 15px;
font-weight: 500;
color: #000000;
width: 50%;
text-align: left;
font-size: 18px;
}
.result_box .btn{
margin-right: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="random_style.css">
</head>
<body>
<div class="home_box custom_box">
<h3>هذا الاختبار يحتوي على ٢٥ سؤال بمدة ٢٥ دقيقة</h3>
<p>عدد الأسئلة: <span class="total_question"></span></p>
<button type="button" class="btn" onclick="startQuiz()">ابدأ الاختبار </button>
</div>
<div class="time_box custom_box ">
<span id="countdown" class="timer"></span>
<!-- <text>الوقت المتبقي: <text id="time001">1200</text></text><br/>-->
</div>
<div class="quiz_box custom_box hide">
<div class="question_number">
</div>
<div class="question_text">
</div>
<div class="option_container">
</div>
<div class="next_question_btn">
<button type="button" class="btn" onclick="next()">التالي</button>
<!-- <button type="button" class="btn" onclick="previous()">السابق</button>-->
</div>
<div class="answer_indicator">
</div>
</div>
<div class="register_box custom_box hide" style="direction: rtl;">
<form >
<p>الرجاء ادخال بياناتك للحصول على نتيجة اختبارك </p><br>
<label for="uname">اسمك الكامل <br></label>
<input type="text" class="w3-input w3-border w3-round-large" placeholder="ادخل اسمك الكامل " name="uname" required><br>
<label for="email">الايميل <br></label>
<input type="email" class="w3-input w3-border w3-round-large" placeholder="ادخل اسمك الكامل " name="email" required><br>
<label for="phone">رقم الجوال (اختياري )<br></label>
<input type="number" class="w3-input w3-border w3-round-large" placeholder="ادخل رقم الجوال " name="phone"><br>
<button type="button" value="submit" onclick="register()"class="btn">تسجيل </button>
</form >
</div>
<div class="result_box custom_box hide">
<h1>النتيجة</h1>
<table>
<tr>
<td> total questions</td>
<td><span class="total_question"></span></td>
</tr>
<tr>
<td>attempt</td>
<td><span class="total_attempt"></span></td>
</tr>
<tr>
<td>correct</td>
<td><span class="total_correct"></span></td>
</tr>
<tr>
<td>wrong</td>
<td><span class="total_wrong"></span></td>
</tr>
<tr>
<td>persentage</td>
<td><span class="persentage"></span></td>
</tr>
<tr>
<td>your total score</td>
<td><span class="total_score"></span></td>
</tr>
</table>
<button type="button" class="btn" onclick="tryAgainQuiz()">try again</button>
<button type="button" class="btn" onclick="goToHome()">go to home</button>
</div>
<script src="quistion.js" charset="utf-8" type="text/javascript"></script>
<script src="app.js"></script>
</body>
</html>

Adding a square root function to a calc using js

So, I made a calculator, and I want to add a square root function, but I know there is no already made function that finds the square root of numbers. So what elements can I combine to find the square root of a number?
const screen = document.querySelector("#screen");
const clearButton = document.querySelector("#clear");
const equalsButton = document.querySelector("#equals");
const decimalButton = document.querySelector("#decimal");
let isFloat = false;
let signOn = false;
let firstNumber = "";
let operator = "";
let secondNumber = "";
let result = "";
const allClear = () => {
isFloat = false;
signOn = false;
firstNumber = "";
operator = "";
secondNumber = "";
result = "";
screen.value = "0";
};
const calculate = () => {
if (operator && result === "" && ![" ", "+", "-", "."].includes(screen.value[screen.value.length - 1])) {
secondNumber = screen.value.substring(firstNumber.length + 3);
switch (operator) {
case "+":
result = Number((Number(firstNumber) + Number(secondNumber)).toFixed(3));
break;
case "-":
result = Number((Number(firstNumber) - Number(secondNumber)).toFixed(3));
break;
case "*":
result = Number((Number(firstNumber) * Number(secondNumber)).toFixed(3));
break;
case "/":
result = Number((Number(firstNumber) / Number(secondNumber)).toFixed(3));
break;
default:
}
screen.value = result;
}
};
clear.addEventListener("click", allClear);
document.querySelectorAll(".number").forEach((numberButton) => {
numberButton.addEventListener("click", () => {
if (screen.value === "0") {
screen.value = numberButton.textContent;
} else if ([" 0", "+0", "-0"].includes(screen.value.substring(screen.value.length - 2))
&& numberButton.textContent === "0") {
} else if ([" 0", "+0", "-0"].includes(screen.value.substring(screen.value.length - 2))
&& numberButton.textContent !== "0") {
screen.value = screen.value.substring(0, screen.value.length - 1) + numberButton.textContent;
} else if (result || result === 0) {
allClear();
screen.value = numberButton.textContent;
} else {
screen.value += numberButton.textContent;
}
});
});
decimalButton.addEventListener("click", () => {
if (result || result === 0) {
allClear();
isFloat = true;
screen.value += ".";
} else if (!isFloat) {
isFloat = true;
if ([" ", "+", "-"].includes(screen.value[screen.value.length - 1])) {
screen.value += "0.";
} else {
screen.value += ".";
}
}
});
document.querySelectorAll(".operator").forEach((operatorButton) => {
operatorButton.addEventListener("click", () => {
if (result || result === 0) {
isFloat = false;
signOn = false;
firstNumber = String(result);
operator = operatorButton.dataset.operator;
result = "";
screen.value = `${firstNumber} ${operatorButton.textContent} `;
} else if (operator && ![" ", "+", "-", "."].includes(screen.value[screen.value.length - 1])) {
calculate();
isFloat = false;
signOn = false;
firstNumber = String(result);
operator = operatorButton.dataset.operator;
result = "";
screen.value = `${firstNumber} ${operatorButton.textContent} `;
} else if (!operator) {
isFloat = false;
firstNumber = screen.value;
operator = operatorButton.dataset.operator;
screen.value += ` ${operatorButton.textContent} `;
} else if (!signOn
&& !["*", "/"].includes(operatorButton.dataset.operator)
&& screen.value[screen.value.length - 1] === " ") {
signOn = true;
screen.value += operatorButton.textContent;
}
});
});
equalsButton.addEventListener("click", calculate);
* {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: 0;
padding: 0;
}
body {
background-color: #222;
height: 100vh;
}
header {
background-color: #333;
padding: 40px 0;
}
header h1 {
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(to right bottom, #fff, #777);
color: transparent;
font-size: 40px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
}
main {
background-color: #222;
display: flex;
justify-content: center;
padding: 60px 0;
}
main #container {
background-color: #333;
box-shadow: 0 5px 5px #111;
padding: 20px;
}
.clearfix:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
#container .row:not(:last-child) {
margin-bottom: 9px;
}
#container input,
#container button {
float: left;
}
#container input:focus,
#container button:focus {
outline: none;
}
#container input {
background-color: #222;
border: 1px solid #999;
border-right-width: 0;
color: #999;
font-size: 22px;
font-weight: 300;
height: 80px;
padding-right: 14px;
text-align: right;
width: 261px;
}
#container button {
background-color: #222;
border: none;
box-shadow: 0 3px 0 #111;
color: #999;
font-size: 20px;
height: 80px;
margin-right: 7px;
width: 80px;
}
#container button:active {
box-shadow: 0 2px 0 #111;
transform: translateY(1px);
}
#container #clear,
#container .operator,
#container #equals {
color: #111;
}
#container #clear,
#container .operator {
margin-right: 0;
}
#container #clear {
background-color: #e95a4b;
border: 1px solid #999;
border-left-width: 0;
box-shadow: none;
cursor: pointer;
}
#container #clear:active {
box-shadow: none;
transform: none;
}
#container .operator {
background-color: #999;
box-shadow: 0 3px 0 #555;
}
#container .operator:active {
box-shadow: 0 2px 0 #555;
}
#container #equals {
background-color: #2ecc71;
box-shadow: 0 3px 0 #155d34;
}
#container #equals:active {
box-shadow: 0 2px 0 #155d34;
}
#media only screen and (max-width: 400px) {
header {
padding: 28px 0;
}
header h1 {
font-size: 36px;
}
main {
padding: 40px 0;
}
main #container {
padding: 16px;
}
#container .row:not(:last-child) {
margin-bottom: 7px;
}
#container input {
font-size: 18px;
height: 60px;
padding-right: 10px;
width: 195px;
}
#container button {
font-size: 16px;
height: 60px;
margin-right: 5px;
width: 60px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link href="Project 1.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Calculator</h1>
</header>
<main>
<div id="container">
<div class="row clearfix">
<input id="screen" value="0" disabled type="text">
<button id="clear">AC</button>
</div>
<div class="row clearfix">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button data-operator="+" class="operator">+</button>
</div>
<div class="row clearfix">
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button data-operator="-" class="operator">-</button>
</div>
<div class="row clearfix">
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button data-operator="*" class="operator">×</button>
</div>
<div class="row clearfix">
<button id="decimal">.</button>
<button class="number">0</button>
<button id="equals">=</button>
<button data-operator="/" class="operator">÷</button>
</div>
</div>
</main>
<script src="Project 1.js"></script>
</body>
</html>
This is the code for the calc.. Feel free to edit it and explain to me what you did.

There is already one.
The Math.sqrt() function returns the square root of a number, that is, ∀x≥0,Math.sqrt(x)=x
=the uniquey≥0such thaty2=x
MDN Docs

You can use javascript built in
Math.sqrt(number)

jQuery - whenever reset is clicked it does not reset blocks

The reset button makes the grid disappear.
There are two functions that are causing this problem:
reset()
main()
The reason why the grid is disappearing is because of the .empty() method that is attached to the containerGrid and that is inside the main function and because of the $resetButton.on("click", reset), the reset parameter should have () with an argument passed in.
Here is what I tried:
$resetButton.on("click", reset());
This helps with not deleting the grid, but it does not erase the color or gradient blocks anymore.
/*---------------------------
Variables
---------------------------*/
const $containerGrid = $(".containerGrid");
let boxSide = 16;
const $gridLength = $("#gridLength");
const $gradientButton = $("#gradient");
const $randomButton = $("#random");
const $resetButton = $("#reset");
/*-- -------------------------
Buttons & input
---------------------------*/
$gridLength.on("input", gridLength);
$gradientButton.on("click", incrementOpacity);
$randomButton.on("click", getRandomColors);
$resetButton.on("click", reset(16));
/*---------------------------
Corresponding to Event listeners
---------------------------*/
function gridLength() {
if (event.target.value !== 16) {
reset(event.target.value);
}
}
function incrementOpacity() {
$(".cell").off("mouseenter");
$(".cell").mouseenter((event) => {
let opacity = parseFloat(event.target.style.opacity);
if (opacity <= 0.9) {
$(event.target).css({
"opacity": `${opacity + 0.1}`,
"backgroundColor": "#f5f5f5"
});
}
});
}
function setRandomColors() {
return Math.floor((Math.random() * 256));
}
function getRandomColors() {
$(".cell").off("mouseenter");
$(".cell").mouseenter((event) => {
$(event.target).css({
"backgroundColor": `rgb(${setRandomColors()}, ${setRandomColors()}, ${setRandomColors()})`,
"opacity": "1"
})
});
}
function reset(length) {
boxSide = length;
main();
$(".cell").css({
"opacity": "0.1",
"border": "0.5px solid black",
"backgroundColor": "transparent"
});
}
/*-- -------------------------
Creates the Grid
------------------------------*/
function main() {
$($containerGrid).empty();
for (let row = 0; row < boxSide; row++) {
for (let column = 0; column < boxSide; column++) {
createCell();
}
}
$(".cell").css("height", `${(300 / boxSide) - 1}px`);
$(".cell").css("width", `${(300 / boxSide) - 1}px`);
}
function createCell() {
const $cell = $('<div class="cell"></div>');
$cell.css("opacity", "0.1");
$containerGrid.append($cell);
}
main();
* {
margin: 0;
padding: 0;
outline: 0;
font-family: Arial, Helvetica, sans-serif;
color: var(--font-color);
}
:root {
--linear-color1: #e66465;
--linear-color2: #9198e5;
--font-color: #ffffff;
--black-color: #000000;
}
body,
html {
background: linear-gradient(190deg, var(--linear-color1), var(--linear-color2));
height: 100vh;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.title header h1 {
margin: 1em 0em 1em 0;
}
.containerGrid {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
margin-bottom: 3em;
}
.cell {
height: 15px;
width: 15px;
border-radius: 3px;
border: 0.5px solid var(--black-color);
}
.options {
display: flex;
justify-content: space-around;
}
button,
input {
background-color: transparent;
padding: .5em;
border: 1px solid var(--font-color);
border-radius: 3px;
transition: 1s all ease;
}
button:hover,
input:hover {
background-color: var(--font-color);
color: var(--black-color);
}
button:focus,
input:focus {
background-color: var(--font-color);
color: var(--black-color);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ------------------------- How to Play --------------------------->
<div class="container">
<div class="title">
<header>
<h1>Etch a Sketch</h1>
</header>
</div>
<!-- ------------------------- Grid --------------------------->
<section>
<div class="containerGrid">
</div>
<div class="options">
<input type="number" id="gridLength" value="16" min="3" max="64">
<button type="submit" id="gradient">Gradient</button>
<button type="submit" id="random">Random</button>
<button type="reset" id="reset">Reset</button>
</div>
</section>
</div>
Expected: to just erase the the colorful and gradient blocks and the leave the grid size alone
Actual result: The grid does not disappear but it will not erase the colored and gradients blocks anymore. It should just reset everything except for the grid size

You set click event to your reset button the wrong way. The below code should work:
$resetButton.on("click", function() {
reset(16);
});
Full code:
/*---------------------------
Variables
---------------------------*/
const $containerGrid = $(".containerGrid");
let boxSide = 16;
const $gridLength = $("#gridLength");
const $gradientButton = $("#gradient");
const $randomButton = $("#random");
const $resetButton = $("#reset");
/*-- -------------------------
Buttons & input
---------------------------*/
$gridLength.on("input", gridLength);
$gradientButton.on("click", incrementOpacity);
$randomButton.on("click", getRandomColors);
$resetButton.on("click", function() {
reset(16);
});
/*---------------------------
Corresponding to Event listeners
---------------------------*/
function gridLength() {
if (event.target.value !== 16) {
reset(event.target.value);
}
}
function incrementOpacity() {
$(".cell").off("mouseenter");
$(".cell").mouseenter((event) => {
let opacity = parseFloat(event.target.style.opacity);
if (opacity <= 0.9) {
$(event.target).css({
"opacity": `${opacity + 0.1}`,
"backgroundColor": "#f5f5f5"
});
}
});
}
function setRandomColors() {
return Math.floor((Math.random() * 256));
}
function getRandomColors() {
$(".cell").off("mouseenter");
$(".cell").mouseenter((event) => {
$(event.target).css({
"backgroundColor": `rgb(${setRandomColors()}, ${setRandomColors()}, ${setRandomColors()})`,
"opacity": "1"
})
});
}
function reset(length) {
boxSide = length;
main();
$(".cell").css({
"opacity": "0.1",
"border": "0.5px solid black",
"backgroundColor": "transparent"
});
}
/*-- -------------------------
Creates the Grid
------------------------------*/
function main() {
$($containerGrid).empty();
for (let row = 0; row < boxSide; row++) {
for (let column = 0; column < boxSide; column++) {
createCell();
}
}
$(".cell").css("height", `${(300 / boxSide) - 1}px`);
$(".cell").css("width", `${(300 / boxSide) - 1}px`);
}
function createCell() {
const $cell = $('<div class="cell"></div>');
$cell.css("opacity", "0.1");
$containerGrid.append($cell);
}
main();
* {
margin: 0;
padding: 0;
outline: 0;
font-family: Arial, Helvetica, sans-serif;
color: var(--font-color);
}
:root {
--linear-color1: #e66465;
--linear-color2: #9198e5;
--font-color: #ffffff;
--black-color: #000000;
}
body,
html {
background: linear-gradient(190deg, var(--linear-color1), var(--linear-color2));
height: 100vh;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.title header h1 {
margin: 1em 0em 1em 0;
}
.containerGrid {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
margin-bottom: 3em;
}
.cell {
height: 15px;
width: 15px;
border-radius: 3px;
border: 0.5px solid var(--black-color);
}
.options {
display: flex;
justify-content: space-around;
}
button,
input {
background-color: transparent;
padding: .5em;
border: 1px solid var(--font-color);
border-radius: 3px;
transition: 1s all ease;
}
button:hover,
input:hover {
background-color: var(--font-color);
color: var(--black-color);
}
button:focus,
input:focus {
background-color: var(--font-color);
color: var(--black-color);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ------------------------- How to Play --------------------------->
<div class="container">
<div class="title">
<header>
<h1>Etch a Sketch</h1>
</header>
</div>
<!-- ------------------------- Grid --------------------------->
<section>
<div class="containerGrid">
</div>
<div class="options">
<input type="number" id="gridLength" value="16" min="3" max="64">
<button type="submit" id="gradient">Gradient</button>
<button type="submit" id="random">Random</button>
<button type="reset" id="reset">Reset</button>
</div>
</section>
</div>

JavaScript Beep Sound incorrect on mobile but desktop

I creat short script want to make a beep sound every second.
It just a simple JS in HTML file.
When it run on desktop (chrome) it working (beep every sec) but when it run on mobile (both android and ios) it only beep once and gone.
Can anyone suggest a fix?
I try many method but cannot find a fix.
here is script
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
margin: 0 !important;
padding: 0 !important;
}
h1 {
margin-top: 1px;
margin-bottom: 1px;
margin-right: 1px;
margin-left: 1px;
}
input[type=text], select, textarea{
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
}
label {
padding: 15px 2px 2px 5px;
display: inline-block;
}
select.form-control{display:inline-block}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.button:hover {
background-color: #45a049;
}
table, th, td {
border: 0px;
padding:0;
margin:0;
border-collapse: collapse;
}
td {
border: 0px;
padding:1;
margin:0;
}
</style>
<script>
var bit = 18;
var flat = 1;
var cmd = [0,0,0,0,0,0,0,0,0,0,0,0,0];
var j = 0;
var secTime = 0;
var t;
var confirmCmd;
var beep = function () {
(new
Audio(
"data:audio/wav;base64,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 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU="
)).play();
}
function clock () {
var h1 = document.getElementById('clockShow'),
seconds = 0, minutes = 0, hours = 0;
function add() {
seconds++;
secTime++
if (seconds >= 60) {
seconds = 0;
minutes++;
if (minutes >= 60) {
minutes = 0;
hours++;
}
}
h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
timer();
beep();
}
function timer() {
t = setTimeout(add, 1000);
}
/* Start button */
start.onclick = function () {
//init
document.getElementById("msg").innerHTML="UP";
document.getElementById("start").disabled = true;
timer();
}
/* Clear button */
clear.onclick = function() {
clearTimeout(t);
h1.textContent = "00:00:00";
seconds = 0; minutes = 0; hours = 0;
document.getElementById("msg").innerHTML="START";
j = 0;
secTime = 0;
document.getElementById("Next").innerHTML = "Count Down";
document.getElementById("start").disabled = false;
}
}
</script>
</head>
<body onload="clock()">
<div align="center">
<h1 id="msg" style="font-size:20vw">START</h1>
<span style="font-size:5vw" id="Next">Clock</span>
</div><br>
<div align="center">
<h1 id="clockShow" style="font-size:5vw"><time>00:00:00</time></h1>
<button id="start" class="button">Start</button>
<button id="clear" class="button">Abort</button>
</div>
</body>
</html>