Merge pull request #185 from Gaurav0203Shetty/magic

Magic 8 Ball
shrey141102 · Dec 29, 2023 · b71e7cf · b71e7cf
2 parents dfd92b4 + 5a784eb
commit b71e7cf
Show file tree

Hide file tree

Showing 7 changed files with 214 additions and 0 deletions.
diff --git a/Magic-8-ball/.DS_Store b/Magic-8-ball/.DS_Store
diff --git a/Magic-8-ball/.vscode/settings.json b/Magic-8-ball/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}
diff --git a/Magic-8-ball/README.md b/Magic-8-ball/README.md
@@ -0,0 +1,26 @@
+Magic 8 Ball Project
+
+Welcome to the Magic 8 Ball project!
+This simple web application allows users to ask a question and receive a mysterious and random answer from the virtual Magic 8 Ball.
+
+How to Use
+Ask a Question: Enter your question in the input field provided.
+Get an Answer: Click the "Ask" button to reveal the Magic 8 Ball's response.
+Concentration Matters: For more accuracy, concentrate hard on your question!
+
+Project Structure-
+HTML: The structure of the web page is defined in the index.html file. It includes the title, input field, button, and the Magic 8 Ball container.
+JavaScript: The logic for generating random responses and updating the UI is handled by the script.js file.
+CSS: The styling of the web page is defined in the style.css file.
+
+Customize and Contribute-
+Feel free to customize the project, add more responses to the Magic 8 Ball, or enhance the user interface. If you have ideas for improvement, create a pull request or open an issue.
+
+Technologies Used-
+HTML
+CSS
+JavaScript
+
+The Magic 8 Ball's responses are for entertainment purposes only and should not be taken seriously.
+
+Enjoy using the Magic 8 Ball!
diff --git a/Magic-8-ball/index.html b/Magic-8-ball/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Magic 8 ball</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h3 class="app__title">Magic 8 ball</h3>
+    <p class="app__info">Just ask a question and click below to see what the Magic 8 ball has to say.</p>
+    <div class="info"><label for="input__info" class="input__color">Enter your Question: &nbsp;</label>
+       <input type="text" class="input__info" id="in__info">
+       <button type="submit" class="btn" id="magicbutton" onclick="magicBallClick()">Ask</button>
+    </div> 
+    <br><br><br>
+    <div class="magicball__outer" id="mb-container">
+        <div class="magicball__inner">
+            <h3 class="magicball__response" id="response">8</h3>
+        </div>
+        <div class="magicball__spotlight"></div>
+        <div class="magicball__bg__shadow"></div>
+        <div class="magicball__upper__shadow"></div>
+        <div class="magicball__lower__shadow"></div>
+    </div>
+    <p class="app__info">For more accuracy, make sure to concentrate very hard on your question!</p>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Magic-8-ball/script.js b/Magic-8-ball/script.js
@@ -0,0 +1,12 @@
+const magicball = document.getElementById("mb-container");
+const response = document.getElementById("response");
+
+function magicBallClick() {
+    const options = [ 'It is certain', 'It is decidedly so', 'Without a doubt', 'Don\'t count on it', 'Outlook not so good', 'Very doubtful', 'Reply hazy', 'Try again', 'My sources say no', 'You can rely on it', 'As I see it, yes', 'Cannot predict now', 'Most likely', 'Better not tell you now', 'Yes in due time', 'Outlook good', 'My instincts say yes', 'Ask someone else', 'Concentrate and ask again', 'No not at all', 'Signs point to yes', 'Definetly not', 'Yes but be cautious', 'My reply is no', 'It is a possibility', 'Ask when the stars align', 'Chances are slim', 'Absolutely', 'In you dreams', 'Very likely' ]
+    const index = Math.floor(Math.random() * options.length);
+    const message = options[index];
+    document.getElementById("response").textContent = message;
+    document.getElementById("response").style.fontSize = '1.1rem';
+}
+
+document.getElementById("magicball").addEventListener("click", magicBallClick);
diff --git a/Magic-8-ball/style.css b/Magic-8-ball/style.css
@@ -0,0 +1,139 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    color: #ccc;
+}
+
+body{
+    width: 100vw;
+    height: 100vh;
+    background: rgb(2,0,36);
+    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    letter-spacing: 0.1rem;
+}
+
+.info{
+    font-size: 2rem;
+    text-transform: uppercase;
+    padding: 2rem;
+    font-weight: 300;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.input__info{
+    height: 26px;
+    border: none;
+    border-radius: 10px;
+    color: #111;
+    padding-left: 10px;
+}
+
+.input__color{
+    color: #ffffff;
+}
+
+.info .btn{
+    padding: 0;
+    border: black 1px solid;
+    padding: 5px;
+    background: none;
+    cursor: pointer;
+    border-radius: 5px;
+    margin-left: 10px;
+    color: #ffffff;
+}
+
+.app__title{
+    font-size: 3rem;
+    text-transform: uppercase;
+    padding: 2rem;
+    font-weight: 300;
+}
+
+.app__info{
+    text-align: justify;
+    text-justify: inter-word;
+    font-size: 1.5rem;
+    line-height: 1.6rem;
+    padding: 0 1rem;
+    margin: 2rem 0;
+}
+
+.magicball__outer{
+    width: 300px;
+    height: 300px;
+    background-color: #111;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2rem, 0;
+    box-shadow: 10px 10px 30px rgb(11, 38, 216), -10px -10px 30px rgb(4, 42, 114);
+    position: relative;
+}
+
+.magicball__inner{
+    width: 150px;
+    height: 150px;
+    background: #fff;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 999;
+}
+
+.magicball__response{
+    text-align: center;
+    font-size: 8rem;
+    color: #222;
+    line-height: 1.2rem;
+}
+
+.magicball__spotlight{
+    position: absolute;
+    width: 250px;
+    height: 250px;
+    top: 5px;
+    border-radius: 50%;
+    background: #333;
+    opacity: 0.07;
+}
+
+.magicball__bg__shadow{
+    position: absolute;
+    width: 175px;
+    height: 175px;
+    top: 0px;
+    border-radius: 50%;
+    background: #666;
+    opacity: 0.05;
+}
+
+.magicball__upper__shadow{
+    position: absolute;
+    width: 75px;
+    height: 50px;
+    top: 5px;
+    background: #191919;
+    opacity: 0.8;
+    border-radius: 50%;
+}
+
+.magicball__lower__shadow{
+    position: absolute;
+    width: 175px;
+    height: 175px;
+    top: 5px;
+    background: #191919;
+    opacity: 0.8;
+    border-radius: 50%;
+}
diff --git a/script.js b/script.js
@@ -344,6 +344,11 @@ const projects = [
     link: "Chess game/index.html",
     image: "https://observer.com/wp-content/uploads/sites/2/2014/12/172016427.jpg?quality=80&strip"
   },
+  { title: "Magic 8 ball",
+    discription: "Welcome to the Magic 8 Ball project! This simple web application allows users to ask a question and receive a mysterious and random answer from the virtual Magic 8 Ball.", 
+    link: "Magic-8-ball/index.html", 
+    image: "https://www.adweek.com/wp-content/uploads/files/magic-8-hed-2015.jpg" 
+  }
 
 ];