How To Create A Magic 8 Ball Using HTML, CSS, and JavaScript?

Create A Magic 8 Ball Project Using HTML, CSS, and JavaScript.


<!DOCTYPE html>
<html lang="en">
    <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>
    <div class="ball">
        <div class="whitesurface">
            <p id="response">8</p>
    <div class="inputfield">
        <input type="text" id="clear" placeholder="Ask Me Anything!">
        <button id="askme" onclick="myFunction()">Enter</button>

CSS Code

    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    display: grid;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    background-color: rgb(65,0,109);
    width: 300px;
    height: 300px;
    background-color: black;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 65vh;
    padding: 15px 50px 15px 15px;
    font-size: 15px;
    border-radius: 30px;
    text-align: left;
    border: 0;
    outline: 2px solid rgb(140,0,255);
    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);
    background-color: rgb(85,0,85);
    background-color: rgb(34,25,34);
    width: 70px;
    color: black;
    border-radius: 50%;
    text-align: center;
    font-size: 120px;
    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",
    "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"

function myFunction(){
    points.sort(function(a,b){return 0.5 - Math.random()});
    setTimeout(timeup, 4000);

    function timeup(){
        document.getElementById("response").style.fontSize ="120px";

Trending Posts

12MP vs 48MP vs 64MP vs 108MP | Does More Megapixel Equal Better Image Quality?

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

Why iPhones Don't Have Memory Card Slots?

Sunrise And Sunset Animation Using HTML & CSS?

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

Why Do All Celebrities Use iPhones?

8 Characteristics Of Modern Computer

Computer Memory Measurement Units Chart

How To Earn Money With Only HTML and CSS Knowledge?