Magic Eight Ball Javascript

BuckGup · March 5, 2017

I found this cool magic eight ball online that uses javacript. It displays all the code but I have a few problems. I am adding a prompt for the user's name and question. This works but I can't get the text to display in the triangle. I also tried removing the link to the google font and used a default sans serif to see if that was the problem.

Here is my code.

<!DOCTYPE html>
	<html>
		<title>Magic 8 Ball</title>
		<link rel="stylesheet" type="text/css" href="Magic8.css">
	</head>
</html>

<body>
<div class="shadow"></div>

<div class="epos">
<div class="eball">
  <div class="egrad"></div>
  <div class="ewin"><div>
  <div class="triangle"></div>
  <div class="textbox"></div>
</div>
</div>

	<script>
	prompt("The Magic 8-Ball Knows All! Ask It A Question!");
	var words = [
    'It is certain',
'It is decidedly so',
'Without a doubt',
'Yes definitely',
'You may rely on it',
'As I see it, yes',
'Most likely',
'Outlook good',
'Yes',
'Signs point to yes',
'Reply hazy try again',
'Ask again later',
'Better not tell you now',
'Cannot predict now',
'Concentrate and ask again',
'Do not count on it',
'My reply is no',
'My sources say no',
'Outlook not so good',
'Very doubtful'
    ];

    var getRandomWord = function () {
      return words[Math.floor(Math.random() * words.length)];
    };
(function() {('.eball').mouseenter(function(){
    ('.textbox').html(getRandomWord());
    });

});
</script>
</body>

With the CSS


*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
  
}

html, body{
  width: 100%;
  height: 100%;
  background: rgba(20,0,20,1);
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
}

.epos{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 10;
}

.eball{
  height: 400px;
  width: 400px;
  background: rgb(30,30,30);
  border-radius: 100%;
  overflow: hidden;
  position: relative;
  box-shadow: inset -10px 10px 50px rgba(255,255,255,0.4), inset 5px -5px 50px rgba(0,0,0,1), inset 50px -50px 200px rgba(0,0,0,1), inset 0px -20px 20px rgba(60,0,60, 1);
}

.egrad{
  position: absolute;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.2) 0%,rgba(242,242,242,0.2) 7%,rgba(30,30,30,0.1) 30%,rgba(30,30,30,0.00) 100%);
  width: 400px;
  height: 400px;
  border-radius: 100%;
  left: 60%;
  top: 30%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

.ewin{
  position: absolute;
  background: linear-gradient(45deg, rgba(20,0,20,1) 0%, rgba(40,0,40,1) 100%);
  width: 160px;
  height: 160px;
  border-radius: 100%;
  border: solid 4px rgba(20,20,20,0.8);
  box-shadow: 10px -10px 10px rgba(20,20,20,0.6), 10px -10px 1px rgba(20,20,20,0.5),-10px -10px 1px rgba(20,20,20,0.5),10px 10px 1px rgba(50,50,50,0.5),-10px 10px 1px rgba(50,50,50,0.5), 8px -10px 10px rgba(20,20,20,0.6), -8px 10px 10px rgba(60,60,60,0.6), inset -10px 10px 40px rgba(200,0,20,0.05), inset 10px -10px 40px rgba(20,0,200,0.1);
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

.triangle{
  -webkit-transform: translate(-50%,-50%) rotate(5deg);
  transform: translate(-50%,-50%) rotate(5deg);
  position: absolute;
	width: 0px; 
	height: 0px;
  left: 50%;
  top: 60%;
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;
	border-top: 90px solid rgba(60,10,120,0.0);
  opacity: 0;
  transition: ease-in all 0.2s;
}

.textbox{
  font: 400 11px Helvetica, Arial, Sans-Serif;
  text-shadow: 1px 1px 2px rgba(40,0,200,0.8);
  color: rgba(240,220,240,0.8);
  text-align: center;
  line-height: 1.1;
  -webkit-transform: translate(-50%,-50%) rotate(5deg);
  transform: translate(-50%,-50%) rotate(5deg);
  position: absolute;
  text-transform: uppercase;
	width: 48px; 
	height: 50px;
  left: 50%;
  top: 53%;
  opacity: 0;
  transition: ease-in all 0.2s;
}

.eball:hover .textbox{
   opacity: 1;
    -webkit-transform: translate(-50%,-50%) rotate(0deg);
    transform: translate(-50%,-50%) rotate(0deg);
   transition: ease-in all 0.2s;
}

.eball:hover .triangle{
  border-top: 90px solid rgba(60,10,120,0.9);
  -webkit-transform: translate(-50%,-50%) rotate(0deg);
  transform: translate(-50%,-50%) rotate(0deg);
  opacity: 1;
   transition: ease-in all 0.2s;
}

.shadow{
  background: rgba(10,10,10,1);
  border-radius: 100%;
  height: 200px;
  width: 200px; 
  filter: blur(40px);
  -webkit-filter: blur(50px);
  position: absolute;
  margin-top: 200px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%) scaleY(0.1);
  transform: translate(-50%,-50%) scaleY(0.1);
  z-index: 1;
}

I would also like to put some sort of loop into it. Like a while loop or a for loop. Thanks!

themctipers · March 5, 2017

should i kill myself?

" YES DEFINITEL "

tempting.

BuckGup · March 5, 2017

3 minutes ago, themctipers said:

should i kill myself?

" YES DEFINITEL "

tempting.

Does it work for you?

themctipers · March 5, 2017

Just now, SamStrecker said:

Does it work for you?

yes, it does.

BuckGup · March 5, 2017

Just now, themctipers said:

yes, it does.

Not in the browser though. You need to open a text editor and copy and paste the code into it and link the CSS file to it

themctipers · March 5, 2017

Just now, SamStrecker said:

Not in the browser though. You need to open a text editor and copy and paste the code into it and link the CSS file to it