-
Notifications
You must be signed in to change notification settings - Fork 0
/
8 Ball
119 lines (106 loc) · 2.94 KB
/
8 Ball
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<html>
<head>
<title>Magic 8 Ball</title>
<script type="text/javascript">
// we define answers
var answers = ["It is certain",
"It is decidedly so",
"Without a doubt",
"Yes - definitely",
"You may rely on it",
"As I see it, yes",
"Most likely",
"The Monkeys will decide your fate",
"Outlook good",
"Yes", "Signs point to yes",
"Don't count on it",
"My reply is no",
"My sources say no",
"Outlook not so good",
"Very doubtful",
"Reply hazy, try again",
"Ask again later",
"Better not tell you now",
"Cannot predict now",
"Concentrate and ask again"];
window.onload = function() {
var eight = document.getElementById("eight");
var answer = document.getElementById("answer");
var eightball = document.getElementById("eight-ball");
var question = document.getElementById("question");
eightball.addEventListener("click", function() {
if (question.value.length < 1) {
alert('Enter a question!');
} else {
eight.innerText = "";
var num = Math.floor(Math.random() * Math.floor(answers.length));
answer.innerText = answers[num];
}
});
};
</script>
<style type="text/css">
h1 { font-weight: 100; font-size: 2.5em;}
#content {
width: 600px;
margin: 0 auto;
margin-top: 50px;
border: 1px dotted black;
text-align: center;
font-family: 'Helvetica Neue', arial;
font-weight: 100;
}
div.eight-ball {
background-color: black;
border: 1px solid black;
border-radius: 50%;
width: 300px;
height: 300px;
margin: 0 auto;
margin-bottom: 30px;
margin-top: 30px;
}
div.answer {
background-color: #333;
border: 1px solid #333;
border-radius: 50%;
width: 50%;
height: 50%;
margin: 25% auto;
}
p#eight {
font-size: 5em;
margin: 20% auto;
color: white;
}
p#answer {
padding: 23px;
color: lightblue;
letter-spacing: 2px;
font-size:18px;
}
#question {
margin: 20px;
padding: 10px;
width: 400px;
font-size:22px;
}
#info {
font-size: 22px;
}
</style>
</head>
<body>
<div id="content">
<h1>Magic 8 ball</h1>
<p id="info">Ask me what you want to know and click on the Magic 8 Ball.</p>
<input type="text" id="question" />
<div id="eight-ball" class="eight-ball">
<div class="answer">
<p id="eight">8</p>
<p id="answer"></p>
</div>
</div>
</div>
</body>
</html>