How To Create A Magic 8 Ball Using HTML, CSS, and JavaScript?
Create A Magic 8 Ball Project Using HTML, CSS, and JavaScript.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magic 8 Ball - Created By Rohit Shah</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="ball">
<div class="whitesurface">
<p id="response">8</p>
</div>
</div>
<div class="inputfield">
<input type="text" id="clear" placeholder="Ask Me Anything!">
<button id="askme" onclick="myFunction()">Enter</button>
</div>
</body>
</html>
CSS Code
*{
margin: 0;
padding:0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
background-color: rgb(65,0,109);
}
.ball{
width: 300px;
height: 300px;
background-color: black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.inputfield{
display: flex;
justify-content: center;
}
input{
position: absolute;
top: 65vh;
padding: 15px 50px 15px 15px;
font-size: 15px;
border-radius: 30px;
text-align: left;
border: 0;
}
input:focus{
outline: 2px solid rgb(140,0,255);
}
button{
position: absolute;
top: 75vh;
padding: 10px 80px;
font-size: 20px;
border-radius: 30px;
background-color: purple;
color: white;
border: 2px solid rgb(18,0,31);
}
button:hover{
background-color: rgb(85,0,85);
}
button:active{
background-color: rgb(34,25,34);
}
#response{
width: 70px;
color: black;
border-radius: 50%;
text-align: center;
font-size: 120px;
}
.whitesurface{
width: 140px;
height: 140px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
JavaScript Code
const points = [
"It is certain",
"Without a doubt",
"You may rely on it",
"Yes definitely",
"It is decidedly so",
"As I see it, yes",
"Most likely",
"Yes",
"Outlook good",
"Signs point to yes",
"Reply hazy try again",
"Better not tell you now",
"Ask again later",
"Cannot predict now",
"Concentrate and ask again",
"Don’t count on it",
"Outlook not so good",
"My sources say no",
"Very doubtful",
"My reply is no"
];
document.getElementById("response").innerHTML=points;
function myFunction(){
points.sort(function(a,b){return 0.5 - Math.random()});
document.getElementById("response").innerHTML=points[0];
document.getElementById("response").style.fontSize="18px";
setTimeout(timeup, 4000);
function timeup(){
document.getElementById("response").innerHTML="8";
document.getElementById("response").style.fontSize ="120px";
document.getElementById("clear").value="";
}
}
.png)