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

Balancing Intelligence: Navigating the Edge AI and Cloud AI Equation in Modern Business

Image
Image via Pexels As artificial intelligence becomes deeply embedded in modern business operations, companies face a pivotal decision: should they lean on centralized, cloud-based AI for scalability, or opt for the immediacy and autonomy of edge-based AI? This choice isn’t just technical—it affects cost structure, data privacy, system responsiveness, and operational agility. While each model offers clear benefits, the most future-ready organizations are increasingly blending the two to harness the strengths of both. This convergence, known as hybrid Edge-Cloud AI, may well define the next decade of intelligent systems. Closer to the Source, Faster to React Edge AI refers to the processing of data locally on a device or at a nearby server, rather than transmitting that data to the cloud for analysis. This design minimizes latency and reduces the bandwidth needed to send massive volumes of data over the internet. In time-sensitive environments like autonomous vehicles, smart manu...
Read More

The Secret to Flawless Web Design: Mastering Responsive Layouts

Image
Ever visited a website that looked great on your laptop but was a total mess on your phone? Maybe the text was too small, the images were all over the place, or buttons were impossible to click. Annoying, right? Well, that’s exactly why responsive web design is a game-changer. If you’re a web developer (or aspiring to be one), mastering responsive layouts is the secret sauce to making websites look flawless on all devices —whether it’s a massive desktop monitor, a tablet, or a tiny smartphone screen. What is a Responsive Layout? A responsive layout is a web design approach where your website automatically adjusts to fit any screen size. Instead of designing separate sites for desktop and mobile, responsive design ensures one website works everywhere. Why Does It Matter? Better User Experience (UX): No one likes zooming in and out just to read content. SEO Boost: Google ranks mobile-friendly websites higher. More C...
Read More

How To Create A Trapezium Using HTML and CSS?

Image
STEP 1: Add <div class="trapezium"></div> in your HTML document in the <body> section. STEP 2: Add this CSS code. .trapezium{ border-width: 100px; border-style: solid; border-color: transparent transparent black transparent; width: 200px;  }   Output The border-width: 100px; property gives width to the border, border-s tyle: solid; makes the border surface area solid, and border-color: transparent transparent black transparent; make the top, left, right side border transparent and keep the bottom border black which creates a triangle. Then, the width: 200px; property extends it to make a trapezium or trapezoid.
Read More

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

Image
First of all these HTML elements into your HTML document. Copy the code From Our Github   <div><h1>Facebook</h1>         <p>Connect with friends and the world<br> around you on Facebook.</p>     </div>     <div class="form">         <form action="">        <div>         <input type="text" name="Username" id="Username" placeholder="Email or Phone Number">        </div>        <div>         <input type="password" name="Password" id="Password" placeholder="Password">        </div>        <div>         <input type="submit" value="Log ...
Read More

Top 10 AI Tools Every Developer Should Know in 2025

Image
Alright, let’s get real—AI isn’t just some futuristic concept anymore. It’s here, and it’s changing the game for developers like you and me. But with so many AI tools popping up, it can be tricky to know which ones are actually worth your time. Don’t worry, I’ve got you covered. I’ve done the research, tried out the tools, and I’m here to share the top 10 AI tools that can genuinely make your life easier as a developer. 1. GitHub Copilot Imagine having a coding buddy who’s always got your back—GitHub Copilot is exactly that. This AI-powered tool, powered by OpenAI, is like a super-smart assistant that can autocomplete your code, suggest improvements, and even write entire functions for you. It works directly within VS Code, making your coding experience smoother. 2. ChatGPT (OpenAI) Ever been stuck on a bug you just can’t figure out? Or maybe you need a quick explanation for a tricky concept? That’s where ChatGPT comes in. It’s like having a coding mentor available 24/7. Wheth...
Read More

Why Project-Based Learning is the Best Way to Learn Web Development

Image
If you’ve ever felt stuck in "tutorial hell" — constantly watching coding tutorials but forgetting everything once you try to build something — you’re not alone. Many beginners face this exact issue. The solution? Project-based learning . What is Tutorial Hell? "Tutorial hell" is when you binge-watch tutorials thinking you’re learning, but the moment you try to code something on your own, your mind goes blank. It’s like watching someone cook for hours and then freezing when you have to make the recipe yourself. Why Projects Work So Well Here’s why building projects is 10x more effective: Active Learning: You're not just watching — you're doing. That hands-on experience sticks with you. Problem Solving: Projects force you to think, search, debug, and truly understand concepts. Portfolio Boost: Every project you finish is something you can showcase to potential clients or employers. Confidence Building: When you build something that ...
Read More

How To Create A Parallelogram Using HTML and CSS?

Image
STEP 1: Add <div class="parallelogram"></div> into your HTML document inside <body> section. STEP 2: Add this CSS code. .parallelogram{   width: 250px;   height: 150px;   background-color: black;   transform: skew(-30deg);  } Output The width: 250px and height: 150px give width and height to the object. The background-color: black; make the object's background color black to make it visible. Then, the transform: skew(-30deg); property skew the object in X-axis by -30degree. And the parallelogram is created using HTML and CSS.
Read More

Sunrise And Sunset Animation Using HTML & CSS?

Image
HTML Code <html lang="en"> <head>     <meta charset="UTF-8"></meta>     <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>     <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>     <title>Sunrise and Sunset</title>     <link href="style.css" rel="stylesheet"></link> </head> <body>     <div id="sun"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div id="land"></div> </body> </html> CSS Code *{ box-sizing: border-box; margin: 0; padding:0; } body{ background-...
Read More

How To Create A Semi-circle Using Only HTML and CSS?

Image
STEP 1: Add a <div class="semi-circle"></div> in the body section of an HTML document. STEP 2: Go To your CSS file and add this code.  .semi-circle{  width: 150px;   height: 75px;   background-color: black;   border-radius: 100px 100px 0 0; } Output The width: 150px; and height: 75px; gives width and height and create a rectangle. Then, background-color: black; gives color to the background so that we can see the actual rectangle created. And the last one, border-radius: 100px 100px 0 0; , it create a rounded border on the top-left and top-right corner of  the rectangle. The two zeros in ( border-radius: 100px 100px 0 0 ; ) is for the border-radius for bottom-right and bottom-left and we kept it width 0 to make it look like a semi-circle.
Read More