-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathday13.html
101 lines (91 loc) · 4.05 KB
/
day13.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Silkscreen&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles13.css">
<title>30DAYSOFCODE</title>
</head>
<body onload="askName()">
<nav id="navManipulation">
<h1 class="navLogo">30DAYSOFCODE</h1>
<ul class="navItems">
<a href="index.html">
<li>
<<</li>
</a>
<a id="toPrevious">
<li>
<</li>
</a>
<a id="toNext">
<li>></li>
</a>
<a href="day30.html">
<li>>></li>
</a>
<a>
<li id="myBtn">Preferences</li>
</a>
</ul>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p class="modal-text">Choose your banner color:</p>
<span id="red">Red</span>
<span id="blue">Blue</span>
<span id="yellow">Yellow</span>
<span id="green">Green</span>
<span id="black">Black</span>
<p class="modal-text">Choose your text color:</p>
<span id="textred">Red</span>
<span id="textblue">Blue</span>
<span id="textyellow">Yellow</span>
<span id="textgreen">Green</span>
<span id="textblack">Black</span>
<span id="textwhite">White</span>
</div>
</div>
</nav>
<section id="textManipulation" class="container">
<h2>Day <span id="pageIdentify">13</span></h2>
<p id="greeting"></p>
<p>Today is day 13. I was able to get the randomized responses functioning yesterday, so today I'd like to focus on making the correct response highlight green, while the incorrect responses highlight red, after clicking one of the responses.<br><br> If I can get that functioning, I'd consider today a success.<br><br>NOTE: The trivia section of this page is currently not wired up, due to some refactoring. I took Day 13 to refactor/restructure how the trivia data was flowing in, and it
will set this application up for success as I start manipulating the data, and displaying it for the user. It will be back for Day 14.
</p>
</section>
<section class="container">
<h2>Applications</h2>
<section class="applications" id="pokedex">
<h2 id="pokedexlogo">PokeDex</h2>
<img id="pokemonScreen" src="" alt="" onerror="this.src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDbZjWMgKBy2PUf1AZKJRvPeNEc76NuiB5Qw&usqp=CAU'">
<h2 id="pokemonname"></h2>
<h2 id="pokemontype"></h2>
<h2 id="pokemonheight"></h2>
<h2 id="pokemonweight"></h2>
<input type="text" name="" id="pokemoninput" placeholder="Enter Pokemon Name or ID">
<button id="getPokemon">Get Pokemon</button>
<button id="getRandomPokemon">Random</button>
</section>
<section class="applications" id="trivia">
<h2>trivia</h2>
<p id="triviaQuestion"></p>
<p id="answer1"></p>
<p id="answer2"></p>
<p id="answer3"></p>
<p id="answer4"></p>
<button id="showAnswer">Get Answer</button>
<span class="hidden" id="correctAnswer"></span>
</section>
</section>
</section>
<button class="darkModeButton" id="darkModeButton" onclick="darkModeSwitch()">☽</button>
</body>
<script src="script.js"></script>
</html>