The Magic 8 Ball (Simple)

Press the "ask a question" button on the bottom of the screen, enter your question, and receive an answer!

by Littledoggy12

HTML

<html>
  <head>
    <title>Magic 8 Ball</title>
  </head>
  <body>
    <h1>
      THE MAGIC 8 BALL
    </h1>
    <p id = "p">8</p>
    <button id = "question">
      Ask a question
    </button>
  </body>
</html>

CSS

p {
  text-align: center;
  position: absolute;
  background: black;
  font-size: 10em;
  border-radius: 100%;
  width: 35%;
  height: 60%;
  top: -30%;
}

#question {
  position: absolute;
  top: 20em;
}

JavaScript

// set the color of the magic 8 ball to blue. This can be changed to any color
document.getElementById("p").style.color = "cyan";

//declare varaibles
var random;
var toSay;

//button pressed?
document.getElementById("question").onclick = start;

function start() {
	prompt("What's your question?");
  
  //make random decision
  random = Math.floor(Math.random() * 12) + 1;
  
  //change random number into words
  if(random==1) {
  	toSay = "Yes";
  }
  
  if(random==2) {
  	toSay = "No";
  }
  
  if(random==3) {
  	toSay = "Maybe";
  }
  
  if(random==4) {
  	toSay = "Answer unclear. Try again.";
  }
  
  if(random==5) {
  	toSay = "Very doubtful.";
  }
  
  if(random==6) {
  	toSay = "Signs point to yes.";
  }
  
  if(random==7) {
  	toSay = "Better not tell you now.";
  }
  
  if(random==8) {
  	toSay = "Not so sure.";
  }
  
  if(random==9) {
  	toSay = "Outlook good.";
  }
  
  if(random==10) {
  	toSay = "Why not?";
  }
  
  if(random==11) {
  	toSay = "Outlook not so good.";
  }
  
  if(random==12) {
  	toSay = "Answer can not be seen.";
  }
  
  //alert answer
  alert("The Magic 8 Ball says:" + " " + toSay);
}