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

What Are The Use of Function Keys F1 to F12 on The Keyboard?

Image
On your Computer Keyboard or Laptop keyboard, you always see F1 to F12 Function Keys, right. But, have you ever wondered what are these keys(F1 to F12) and their uses are? What are Function Keys? Function Keys are the keys that are on the top of the keyboard from F1 to F12 for performing different functions that make the use of the computer ease. Like for example, Function Key can be used to Refresh/Reload webpage or computer, saving the file, closing the window, etc. To Use Function Key On Laptop, you should press function keys with the 'fn' key which is on the bottom of your keyboard. What are the Uses of F1 To F12 Function Key? F1 Key: The F1 key is used to open the Help Center of the Application. For example, if you press the F1 key while using Chrome Browser, Google Chrome Help Center will open. F2 Key: The F2 key is used to Rename the file or folder on the computer quickly. Usually, to rename a file/folder, you right-click on it and click on rename to change its name, rig...
Read More

Create Light & Dark Theme Toggle Using HTML, CSS & JavaScript

Image
Dark mode is one of the most popular features in modern websites and apps. In this tutorial, you will learn how to build a simple Light & Dark Theme Toggle using just HTML, CSS, and JavaScript. This small project is perfect for beginners and helps you understand DOM manipulation and event handling. ⭐ GitHub Source Code You can download or view the full project on GitHub: 🔗 View on GitHub 🌗 What We Are Building This project contains a rounded switch. When you click the button: The background switches from light to dark The button slides smoothly The icon changes between ☀️ and 🌙 🧱 1. HTML Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Light and Dark Theme</title> <link rel="stylesheet" href="style.css"> </hea...
Read More

10 Hidden Features/Settings On Samsung Smartphone

Image
If you use a Samsung smartphone then you must know these 10 Hidden Features. These 10 features can make your smartphone uses more efficient and interesting. Turn Off Notification of The App Quickly and Permanently On our smartphones, we daily get different types of notifications from different apps. Some App Notification can become so much annoying when the Notification is popping up many times. If you want to quickly disable Notification of the particular app or make Notification Silent then you can long-press on the Notification and disable it or select the silent or alert option.   Camera Flash Notification You can also make your smartphone camera flash when the notifications pop up on your smartphone. To Enable Camera Flash Notification you have to Follow These Steps: Open Smartphone Settings. Go To Accessibility Option. Go To Advanced Settings Then, Go To Flash Notification and Enable it. Or Simply Search "Flash Notification" on Smartphone Settings Search Bar.   Swipe Do...
Read More

Shield Your Small Business: Must-Have Cybersecurity Strategies

Image
Image via Freepik In an era where digital threats loom large, small businesses must prioritize cybersecurity to protect their operations. Cybercriminals increasingly target smaller enterprises, often perceiving them as easier targets due to limited resources and defenses. By adopting robust cybersecurity measures, small businesses can safeguard their digital assets and ensure their longevity and reputation in the market. This article explores practical strategies to help small enterprises bolster their defenses against cyber threats. Embracing Staging Environment Testing Testing updates in a staging environment is essential for spotting bugs and performance issues before they impact your customers. This environment mimics your production setup, helping to identify discrepancies that might lead to security vulnerabilities. By thoroughly vetting updates in this controlled space, you minimize risks to your live system. Implementing role-based access control and conducting regular...
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

🚀 Build a QR Code Generator Using HTML, CSS & JavaScript

Image
QR Codes are everywhere — websites, apps, menus, payments, and more. In this tutorial, you will learn how to create a simple and powerful QR Code Generator using HTML, CSS, and JavaScript. This is a perfect beginner-friendly project and a great addition to your portfolio. We are also using a lightweight library called qrcodejs : CDN: https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.min.js ✅ Features Generate QR codes instantly Accepts text or URL Press Enter to generate Download QR code as PNG Modern UI with smooth design 📌 Full Source Code (HTML, CSS & JavaScript) 📄 HTML Code <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="style.css">   <title>QR Code Generator</title> </head> ...
Read More

What is Web Development? A Beginner's Guide

Image
Welcome to our beginner's guide to web development! In this blog post, we will demystify the world of web development and provide you with a clear understanding of what it entails. Whether you're considering a career in web development or simply curious about how websites are created, this guide is for you. Let's dive in! What is Web Development? Web development refers to the process of building and maintaining websites and web applications. It involves a combination of programming, designing, and problem-solving skills to create interactive and functional websites that can be accessed by users across the internet. Front-End Development: Front-end development focuses on the user-facing part of a website. Front-end developers use HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript to create the visual and interactive elements that users see and interact with in their web browsers. They are responsible for creating an engaging user exper...
Read More

Build a Simple Calculator Using HTML, CSS, and JavaScript 💻

Image
In this tutorial, we’ll create a simple yet fully functional calculator using HTML, CSS, and JavaScript . This project is perfect for beginners who want to practice DOM manipulation, event handling, and basic CSS layout techniques. 🎯 What You’ll Learn How to structure a calculator interface using HTML. How to style it beautifully using CSS Grid. How to make it functional using JavaScript. 🧱 Step 1: Create the HTML Structure Start by writing the basic layout for your calculator. Create a file named index.html and paste the following code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculator</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="co...
Read More

The Secret Formula to Grow as a Programmer

Image
Programming is not just a skill; it’s a journey. Whether you’re starting from scratch or have some experience under your belt, growing as a programmer is about more than just writing lines of code. It’s about mindset, discipline, and continuous learning. If you’ve ever wondered why some developers seem to progress faster than others, there’s a reason—it’s not just talent; it’s a formula. Today, we’ll break down the secret formula to grow as a programmer. 1. Embrace the Beginner’s Mindset Every expert programmer was once a beginner. Accept that you won’t know everything and that learning is a continuous process. When you approach coding with curiosity rather than fear, you’ll be more open to learning new languages, frameworks, and technologies. Don’t hesitate to ask questions, experiment, and even make mistakes—because mistakes are powerful learning tools. 2. Master the Fundamentals First Before diving into complex frameworks or libraries, ensure you have a strong grasp of the fun...
Read More

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

Image
Being a computer genius or knowing how to use a computer is one of the great skills in today's world. If you want to become a computer genius or expert then here are 5 tips that will help to develop your computer skill or to become a computer genius/expert. To become a computer genius you should have to follow these tips. You have to spend your time learning and developing new computer-related skills. Learn Computer Basic To Become A Computer Genius In order to become a computer genius, you have to learn computer basics. If you are new to computers, then this is the most necessary step. You should know what is a computer? How does the computer work? What is the use of Keyboard, Mouse, Monitor, CPU? What is Software/Hardware? etc. To learn computer basics you can go search on YouTube and Google and learn it by watching videos and reading articles on different websites. There are lots of professionals who provide Computer Basic Courses on the Internet. You can Google all these kinds ...
Read More