-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (125 loc) · 3.79 KB
/
index.html
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<title>Eight-Ball-Magic</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<div>
<img src="images/logo-fort.jpg" width="10%" alt="">
<ul>
<li> Community</li>
<li> Blog</li>
<li> Learn More</li>
</ul>
</div>
</header>
<div class="headline">
<span style="color: red;">SPONSORED CONTENT</span>BRANDHUB
<h1>2022's Best Online Fortune Teller Websites for Accurate, Insightful, Free Fortune Telling</h1>
<p id="today-date">
</p>
</div>
<!--img background-->
<div class="back">
</div>
<!--main content-->
<center>
<h1>8 Ball Magic Fortune Telling</h1>
<div>
<p>The Magiv 8-Ball is a plastic sphere made to resemble an eight-ball used in pool billbards that's used for
fortune-telling and seeking advice.</p>
</div>
<h3> Lets Get Started!</h3>
<div id="main">
<div class='card'>
<label for="username" class="que">What's your Name?</label><br>
<input type="text" name="username" id="username" /><br><br>
<label for="question" class="que">Ask The Magic Ball</label><br>
<input type="text" name="question" id="question" /><br><br>
<button onclick="predict()">Submit</button>
<div id="predict"></div>
</div>
</div>
<div id="ad">
<h2>
You might also like
</h2>
<iframe src="https://www.youtube.com/embed/BS-z6fjJR5A?start=4" title="YouTube video player" frameborder="0"
alt='Epic dark Fantasy: connect to internet'
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<br>
<br>
<div>
<li>
<a href="https://www.youtube.com/watch?v=BS-z6fjJR5A">Epic Dark Fantasy Music</a>
</li><br>
<li>
<a href="https://www.youtube.com/watch?v=6Mx3oQdaucs">Are Pyschics and Fortune Tellers Evil?</a>
</li>
</div>
</div>
</center>
<script>
//initialize name as empty
var userName = '';
userName == '' ? console.log(`Hello ${userName}`) : console.log(`Hello!`)
//your question
var userQuestion = '';
console.log(userQuestion)
console.log(`${userName} asked ${userQuestion}`);
//generate random whole num since we need random answer to be chosen
const randomNumber = Math.floor(Math.random() * 8);
let eightBall = '';
console.log(`value of eightball is :${randomNumber}`);
//conditions
switch (randomNumber) {
case 0:
eightBall = 'It is certain';
break;
case 1:
eightBall = 'It is decidedly so';
break;
case 2:
eightBall = 'Reply hazy try again';
break;
case 3:
eightBall = 'Cannot predict now';
break;
case 4:
eightBall = 'Do not count on it';
break;
case 5:
eightBall = 'My sources say no';
break;
case 6:
eightBall = 'Outlook not so good';
break;
case 7:
eightBall = 'Signs point to yes';
break;
case 8:
eightBall = 'It is amazing';
break;
default:
console.log('you only have 8 trials')
break;
}
//DOM Manipulation
function predict() {
var userQuestion = document.getElementById('question').value;
var userName = document.getElementById('username').value;
let final = document.getElementById('predict').innerText = ` ${userQuestion}?
Hello ${userName}, ${eightBall}`;
}
console.log(eightBall);
//current date
const date = new Date()
const todayDate = document.getElementById('today-date').innerText = `Today's Date: ${date.toDateString()}
Time: ${date.toTimeString()}`
;
</script>
</body>
</html>