Magic 8 Ball Game

kishanrajput23 · web-flow · commit f5b7dd519f43 · 2023-10-10T23:40:38.000+05:30
diff --git a/Magic8Ball/kishanrajput23/magic_8_ball/index.html b/Magic8Ball/kishanrajput23/magic_8_ball/index.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+<head>
+  <title>MAGIC 8 BALL</title>
+
+  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700|Montserrat:400,700' rel='stylesheet' type='text/css'>
+  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
+
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+  <body>
+  <div class="page">
+
+    <header>
+      <h1>MAGIC <span>8</span> BALL</h1>
+    </header>
+
+    <div class="ball" style="position:relative; width:80%" >
+
+      <p id="answer" class="answer">
+        THIS IS WHERE THE ANSWER GOES
+      </p>
+
+       <img id="8ball" src="https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/magic8ballQuestion.png" alt="Magic 8 Ball">
+
+    </div>
+
+    <br><br>
+
+    <div class="button" style="position:relative; width:80%">
+      <button id="questionButton">ASK ME ANYTHING </button>
+    </div>
+
+    <footer>
+      <p>&copy; Skillcrush 2016</p>
+    </footer>
+
+
+  <script type="text/javascript" src="script.js"></script>
+
+  </div>
+  </body>
+
+</html>
diff --git a/Magic8Ball/kishanrajput23/magic_8_ball/script.js b/Magic8Ball/kishanrajput23/magic_8_ball/script.js
@@ -0,0 +1,46 @@
+$(document).ready(function() {
+
+  var magic8Ball = {};
+  magic8Ball.listOfAnswers = ["No", "Yes", "I don't think so...", "Of course!", "Indubitably", "In your dreams."];
+
+  $("#answer").hide();
+
+  magic8Ball.askQuestion = function(question) {
+    $("#8ball").effect("shake");
+
+    $("#8ball").attr("src", "https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/magic8ballAnswer.png");
+
+    $("#answer").fadeIn(4000);
+
+    var randomNumber = Math.random();
+
+    var randomNumberForListOfAnswers = randomNumber * this.listOfAnswers.length;
+
+    var randomIndex = Math.floor(randomNumberForListOfAnswers);
+
+    var answer = this.listOfAnswers[randomIndex];
+
+    $("#answer").text(answer);
+
+    console.log(question);
+    console.log(answer);
+  };
+
+  var onClick = function() {
+
+    $("#answer").hide();
+
+    $("#8ball").attr("src", "https://s3.amazonaws.com/media.skillcrush.com/skillcrush/wp-content/uploads/2016/09/magic8ballQuestion.png");
+
+
+    setTimeout(function(){
+      var question = prompt("ASK A YES/NO QUESTION!");
+      magic8Ball.askQuestion(question);
+    }, 500);
+
+
+  };
+
+  $("#questionButton").click(onClick);
+
+});
diff --git a/Magic8Ball/kishanrajput23/magic_8_ball/style.css b/Magic8Ball/kishanrajput23/magic_8_ball/style.css
@@ -0,0 +1,59 @@
+body {
+  font-family: "Montserrat", sans-serif;
+  color: #454545;
+  margin: 0px;
+  padding: 0px;
+  background-color: #f8f8f8;
+  background-image: url('bkgd2.png');
+}
+.page {
+  width: 80%;
+  max-width: 960px;
+  margin: 0 auto;
+}
+.ball, .button {
+  margin: 0 auto;
+}
+.answer {
+  position:absolute;
+  width:14%;
+  top:50%;
+  left:50%;
+  margin-top:-60px;
+  margin-left:-65px;
+  font: 16px 'Open Sans', Helvetica, Arial, sans-serif;
+  color: #222;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+#questionButton {
+  font: 26px 'Montserrat', Helvetica, Arial, sans-serif;
+  border-radius: 5px;
+  border: none;
+  color: #f8f8f8;
+  background-color: #f16059;
+  padding: 10px 75px;
+  display: block;
+  margin: 0 auto;
+}
+
+header {
+  padding-top: 0.25em;
+  text-align: center;
+}
+header span {
+  font-size: 60px;
+  color: #f16059;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Montserrat", sans-serif;
+}
+
+footer p {
+  font-family: "Montserrat", sans-serif;
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 12px;
+}
