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="";
    }
}



Trending Posts

How To Create a Fake Facebook Login Clone Using Only HTML and CSS?

How To Make Your Computer Fast?

The Secret to Flawless Web Design: Mastering Responsive Layouts

The Edge Advantage: How Smart Small Businesses Are Winning Without Waiting

Apple Supplier Hacked By REvil, Hacker Groups Claims For $50 Million From Apple

Why Should You Create Programming Notebooks?

How To Create A Parallelogram Using HTML and CSS?

5 Tips To Become A Computer Genius | How To Become A Computer Genius?

How To Earn Money With Only HTML and CSS Knowledge?