-
Notifications
You must be signed in to change notification settings - Fork 0
/
Facts.html
261 lines (217 loc) · 8.76 KB
/
Facts.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Facts about planets</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<!--modernizr below-->
<script src="js/modernizr.custom.05819.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="no-sidebar">
<!-- Header -->
<div id="header">
<div class="container">
<!-- Logo -->
<h1><a href="#" id="logo">Facts</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="OurPlanet.html">Our Planets</a></li>
<li><a href="KnowThis.html">Know This</a></li>
<li><a href="Myths.html">Myths</a></li>
<li><a href="Facts.html">Facts</a></li>
</ul>
</nav>
</div>
</div>
<!-- Main -->
<div style="background-color:honeydew" id="main" class="wrapper style1">
<div class="container">
<header class="major">
<h2>Enter a planet to know a fact</h2>
</header>
<a href="#"><img title="our solar system" src="images/solarsystem.png" alt="solar system" height="250"
width="250" /></a>
<article>
<form>
<p>
Enter these planets to know a fact about them: Earth, Jupiter, Saturn, Mars
</p>
<fieldset>
<label for="planet">Enter planet</label>
<input type="text" id="planet" />
</fieldset>
<fieldset>
<button type="button" id="button">See</button>
</fieldset>
</form>
<h2 id="Show">Results will show here</h2>
<p id="media"></p>
</article>
<script>
function result() {
var userInput = document.getElementById("planet").value;
//converting input values to all lower case to make case-insensitive
var GetInput = userInput.toLowerCase();
//try catch for chapter 4 Case Project
try {
//if else series for chapter 3 case project
if (GetInput == "earth") {
document.getElementById("Show").innerHTML =
"Earth is the only place in the known universe confirmed to host life";
var uImg = document.createElement("img");
uImg.setAttribute("src", "images/Earth.jpg");
uImg.setAttribute("alt", "Earth");
document.getElementById("media").append(uImg);
} else if (
GetInput == "mars") {
document.getElementById("Show").innerHTML =
"Mars is home to the tallest mountain in the solar system called Olympus Mons";
var uImg = document.createElement("img");
uImg.setAttribute("src", "images/Mars.jpg");
uImg.setAttribute("alt", "Planet Mars");
document.getElementById("media").append(uImg);
} else if (GetInput == "jupiter") {
document.getElementById("Show").innerHTML =
"Jupiter orbits the Sun once every 11.8 Earth years";
var uImg = document.createElement("img");
uImg.setAttribute("src", "images/Jupiter.jpg");
uImg.setAttribute("alt", "Planet Jupiter");
document.getElementById("media").append(uImg);
} else if (GetInput == "saturn") {
document.getElementById("Show").innerHTML =
"The day Saturday was named after Saturn.";
var uImg = document.createElement("img");
uImg.setAttribute("src", "images/saturn.jpg");
uImg.setAttribute("alt", "Planet Saturn");
document.getElementById("media").append(uImg);
} else if (GetInput == "") throw "empty";
else {
throw "Invalid";
}
} catch (err) {
document.getElementById("Show").innerHTML =
"Input is " + err;
}
}
document
.getElementById("button")
.addEventListener("click", result, false);
</script>
<!-- Sidebar -->
<div id="sidebar" class="4u sidebar">
<section>
<header class="major">
<h2 style="color:Red"><b>Simple Quiz!</b></h2>
</header>
<div class="row half">
<form id="test">
<!--Adding a short quiz-->
<ul>
<li>Mars has 3 moons</li>
</ul>
<input name="q1" type="radio" value="true" />
True
<input name="q1" type="radio" value="false" />
False
<br />
<ul>
<li>Which of the following is saturn's moon?</li>
</ul>
<input name="q2" type="radio" value="europa" />
Europa
<input name="q2" type="radio" value="titan" />
Titan
<input name="q2" type="radio" value="deimos" />
Deimos
<input name="q2" type="radio" value="triton" />
Triton
<input onclick="gradeTest()" name="submit" type="button" value="Grade" />
<input type="button" onclick="Reset()" value="Reset" />
</form>
<script>
function gradeTest() {
//variables with global implications
var totalQuestions = 2;
var correctAnswers = 0;
var alertText;
var i;
var a1 = document.getElementsByName('q1');
for (i = 0; i < a1.length; i++) {
if (a1[i].checked) {
if (a1[i].value == 'false') {
correctAnswers++;
break;
}
}
}
var a2 = document.getElementsByName('q2');
for (i = 0; i < a2.length; i++) {
if (a2[i].checked) {
if (a2[i].value == 'titan') {
correctAnswers++;
break;
}
}
}
if (correctAnswers == totalQuestions) {
alertText = "Congratulations! You got all the questions right!";
}
else {
alertText = "You got " + correctAnswers + " out of " + totalQuestions + " correct!";
}
alert(alertText);
}
function Reset() {
document.getElementById("test").reset();
}
</script>
<article>
<br />
<br />
<h3>Debugging method for this Case Project assignment:</h3>
<p>I used the console.log() debugging method. I checked if my input values are passing through each
if-else blocks using the console log. On my web browser (Chrome), I put console logs to each block and
ran it. I check if there is any code error from developer tools in my browser. Document.write or alert()
is also a good way to find out if my code is ruuning properly.As there are some browsers that do not
support console.log() anymore, I just replaced it with document.write and it printed my message on the
web page, thus letting me know if the code is running properly.
</p>
</article>
</div>
</section>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="container">
<!-- Copyright -->
<div class="copyright">
Design: <a href="http://templated.co">©TEMPLATED</a> Editor:
<a href="mailto:[email protected]">Sabbir Ahmed</a>
<br />
<p style="text-align: center;">
<a href="http://validator.w3.org/check?uri=referer" title="HTML5 Validation">HTML5 Validation</a>
</p>
<p>
This site is for educational purpose only. No commercial value.
</p>
</div>
</div>
</div>
</body>
</html>