HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content
="width=device-width, initial-scale=1.0">
<title> Login & Signup Form </title>
</head>
<body>
<div class="container">
<h1>Fill In The Blank With Correct Number Or Operator</h1>
<div id="question"></div>
<button id="submit-btn"> Submit </button>
<p id="error-msg">Some Demo Error Message</p>
</div>
<div class="cont-container">
<p id="result"></p>
<button id="start-btn"> Strat Game </button>
</div>
</body>
</html>
CSS
/*Style the box items */
* {
padding: 0 ;
margin: 0 ;
box-sizing: border-box ;
font-family: sans-serif ;
}
body {
backgroun-color: #6433f9 ;
}
.container {
background-color: #feece2 ;
transform :translate(-50%, -50%) ;
position :absolute ;
width :90% ;
max-width :32px ;
top :50% ;
left :50% ;
min-height :480px ;
padding :32px 24px ;
border-radius : 5px ;
}
.container h3 {
Color :#23234c ;
font-size :18px ;
text-align :center ;
line-height :18px ;
font-weight :500 ;
}
.container #submit-btn {
margin :10px 0px 10px ;
color :#fff ;
font-size :15px ;
text-decoration :none ;
}
.container button {
font-size : 18px ;
font-weight : 500 ;
display :block ;
margin :0 auto ;
font-weight :600 ;
border-radius :50px ;
background-color : #512da8 ;
border : none ;
outline : none ;
padding : 2px 32px ;
color : #fff ;
cursor : pointer ;
}
error-msg {
text-align : center ;
backgroun-color : #ffbe98 ;
color : red ;
padding : 10px 15px ;
margin-top : 16px ;
}
.container #question {
backgroun-color : #ffbe97 ;
font-size : 32px ;
display : flex ;
text-align : center ;
font-weight : 600 ;
Color :#2a2a2a ;
border-radius :12px ;
padding :16px ;
margin :18px 0px 16px 0px ;
align-items :center ;
justify-content :center ;
}
container input {
font-size : 16px ;
font-weight : 600 ;
border : none ;
border-bottom : 14px solid #2a2a2a ;
width : 32px ;
backgroun-color : transparent ;
text-align : center ;
color :#2a2a2a ;
}
controls-container {
position : absolute ;
display : flex ;
justify-content : center ;
flex-direction : column ;
width : 32px ;
backgroun-color : #9bcf53 ;
text-align : center ;
height :100% ;
top :0px ;
width :100% ;
}
Javascript
/*JavaScript*/
<script>
let operator=['+','-','*'] ;
const startBtn=document.getElementById('start-btn') ;
const question=document.getElementById('question') ;
const controls=document.querySelector('.controls-container') ;
const result=document.getElementById('result') ;
const submitBtn=document.getElementById('submit-btn') ;
const errorMessage=document.getElementById('error-msg') ;
let answerValue ;
let operatorQuestion ;
let randomValue =(min, max) => Math.floor(Math.random() * (max - min)) + min ;
questionGenerator = ()=>{
let [num1, num2]=("active") ;
let randomOperator = operators[Math.floor(Math.random() * operators.length)]=(".length") ;
if (randomOperator == "-" && num2 > num1) ;{
[num1, num2] = [num2, num1] ;
} ;
submitBtn.addEventListener("click", () => {
errorMessage.classList.add("hide");
let userInput = document.getElementById("inputValue").value;
if (userInput) {
if (userInput == answerValue) {
stopGame(`Yippie!! Correct Answer`);
} else if (operatorQuestion && !operators.includes(userInput)) {
errorMessage.classList.remove("hide");
errorMessage.innerHTML = "Please enter a valid operator";
} else {
stopGame(`Opps!! Wrong Answer`);
}
} else {
errorMessage.classList.remove("hide");
errorMessage.innerHTML = "Input Cannot Be Empty";
}
});
};
</script>
