└── AsyncProjects
    ├── app.js
    ├── chuckNorris.css
    ├── index.html
    ├── pokedexOne.css
    ├── pokedexTwo.css
    └── weather.css


/AsyncProjects/app.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // ###########################################
 3 | // CHUCK NORRIS API / FETCH API
 4 | 
 5 | const loadJoke = async () => {
 6 |     const chuckNorrisFetch = await fetch('https://api.chucknorris.io/jokes/random', {
 7 |         headers: {
 8 |             Accept: "application/json"
 9 |           }
10 |     });
11 | 
12 |     const jokeData = await chuckNorrisFetch.json();
13 | 
14 |     console.log(jokeData.value)
15 |     document.getElementById('loadingJoke').innerHTML = jokeData.value;
16 |   };
17 |   
18 | document.getElementById("loadJokeBtn").addEventListener("click", loadJoke);
19 | 
20 | 
21 | // ###########################################
22 | // WEATHER API / FETCH API
23 | 
24 | const date = document.querySelector('#date');
25 | const city = document.querySelector('#city');
26 | const temp = document.querySelector('#temp');
27 | const tempImg = document.querySelector('#temp-img');
28 | const description = document.querySelector('#description');
29 | const tempMax = document.querySelector('#temp-max');
30 | const tempMin = document.querySelector('#temp-min');
31 | 
32 | const monthNames = ["January", "February", "March", "April", "May", "June",
33 |     "July", "August", "September", "October", "November", "December"
34 | ];
35 | 
36 | let dateObj = new Date();
37 | let month = monthNames[dateObj.getUTCMonth()];
38 | let day = dateObj.getUTCDate() - 1;
39 | let year = dateObj.getUTCFullYear();
40 | 
41 | date.innerHTML = `${month} ${day}, ${year}`;
42 | 
43 | 
44 | const app = document.querySelector('.app');
45 | 
46 | const getWeather = async () => {
47 | 
48 |     try {
49 |         const cityName = document.getElementById('search-bar-input').value;    
50 |         const weatherDataFetch = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${"LOAD API KEY IN HERE"}`, {
51 |             headers: {
52 |                 Accept: "application/json"
53 |               }
54 |         });  
55 |     
56 |         const weatherData = await weatherDataFetch.json();    
57 |         console.log(weatherData)    
58 |         city.innerHTML = `${weatherData.name}`;
59 |         description.innerHTML = `${weatherData.weather[0].main}`
60 |         tempImg.innerHTML = `<img src="http://openweathermap.org/img/wn/${weatherData.weather[0].icon}@2x.png"/>`;
61 |         temp.innerHTML = `<h2>${Math.round(weatherData.main.temp)}°C</h2>`;    
62 |         tempMax.innerHTML = `${weatherData.main.temp_max}°C`;
63 |         tempMin.innerHTML = `${weatherData.main.temp_min}°C`;
64 |     }
65 |     catch(error) {
66 |         console.log(error)
67 |     }
68 | }
69 | 
70 | 
71 | // ###########################################
72 | // POKEDEX API / FETCH API
73 | 
74 | const getPokemon = async () => {
75 |     try{
76 |         const pokemonName = document.getElementById('searchName').value.toLowerCase();
77 |         const pokemonData = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`);
78 | 
79 |         if(!pokemonData.ok) {
80 |             throw new Error('Could not find pokemon');
81 |         }
82 | 
83 |         const data = await pokemonData.json();
84 |         const pokemonImage = data.sprites.front_default;
85 | 
86 |         const displayPokemon = document.getElementById('pokemonImg');
87 | 
88 |         displayPokemon.src = pokemonImage;
89 |         displayPokemon.style.display = "block";
90 |     }
91 |     catch(error) {
92 |         console.log(error);
93 |     }
94 | }


--------------------------------------------------------------------------------
/AsyncProjects/chuckNorris.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodeLab98/AsyncPartTwo/1d60d332408a50f0048a9b7cfecb681008dbb847/AsyncProjects/chuckNorris.css


--------------------------------------------------------------------------------
/AsyncProjects/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="styles.css">
 7 |     <link rel="stylesheet" href="weather.css">
 8 |     <link rel="stylesheet" href="chuckNorris.css">
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
10 |     <title>Weather App</title>
11 | </head>
12 | <body>
13 |     <!-- Chuck Norris API -->
14 |     <div id="container">
15 |         <h2>Chuck Norris Jokes API</h2>
16 |         <div id="joke-container">
17 |             <p id="loadingJoke">Press 'Load Another' for Joke..</p>  
18 |         </div>
19 |         <button id="loadJokeBtn">Load Another</button>
20 |         <img id="img" src="images/Chuck-norris.webp" alt="chuck norris">
21 |       </div>
22 |     <!-- Weather API -->
23 |     <div class="app">
24 | 
25 |         <!-- Search Bar -->
26 |         <div id="search-bar">
27 |             <input autocomplete="false" id="search-bar-input" type="text" placeholder="Search by City">
28 |             <button id="search-icon" onclick="getWeather()"><i class="fa fa-search" aria-hidden="true"></i></button>
29 |         </div>
30 | 
31 |        <!-- Date and City -->
32 |         <div id="info">
33 |             <p id="date"></p>
34 |             <h4 id="city"></h4>
35 |         </div>
36 | 
37 |         <!-- Icon  -->
38 |         <div id="temp-img"></div>
39 | 
40 |         <!-- Description of weather -->
41 |         <p id="description"></p>
42 | 
43 |         <!-- Temperture -->
44 |         <div id="temp"></div>
45 | 
46 |         <!-- Info at the bottom -->
47 |         <div class="extra-info">
48 |             <div class="col">
49 |                 <div class="info">
50 |                     <h5>Highs</h5>
51 |                     <p id="temp-max"></p>
52 |                 </div>
53 |             </div>            
54 |             <div class="col">
55 |                 <div class="info">
56 |                     <h5>Lows</h5>
57 |                     <p id="temp-min"></p>
58 |                 </div>
59 |             </div>
60 |         </div>
61 | 
62 |     </div>
63 |     <!-- Pokedex API -->
64 | </body>
65 | <script src="app.js"></script>
66 | </html>


--------------------------------------------------------------------------------
/AsyncProjects/pokedexOne.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     display: flex;
  3 |     align-items: center;
  4 |     justify-content: center;
  5 |     height: 100%;
  6 |     width: 100%;
  7 |     background-color: #fce3a6;
  8 |     padding-top: 20vh;
  9 | }
 10 | 
 11 | #pokedexOne {
 12 |     width: 350px;
 13 |     height: 520px;
 14 |     display: block;
 15 |     margin: auto;
 16 |     background-color: #fc2243;
 17 |     z-index: 3;
 18 | }
 19 | 
 20 | #top {
 21 |     width: 75%;
 22 |   display: block;
 23 |   margin:  auto;
 24 |   height: 50%;
 25 |   position: relative;
 26 |   background: none;
 27 |   border-radius: 0%;
 28 |   z-index: 1;
 29 | }
 30 | 
 31 | #topSquare {
 32 |     display: block;
 33 |     width: 55%;
 34 |     margin: auto;
 35 |     background: #d50625;
 36 |     z-index: 1;
 37 |     height: 25%;
 38 |     position: absolute;
 39 |     left: -16.5%;
 40 | }
 41 | 
 42 | #buttonWhite {
 43 |     background-color: white;
 44 |     border-radius: 50%;
 45 |     width: 50px;
 46 |     height: 50px;
 47 |     display: block;
 48 |     margin: auto;
 49 |     position: absolute;
 50 |     top: 10%;
 51 |     left: 5%;
 52 |     z-index: 2;
 53 | }
 54 | 
 55 | #buttonBlue {
 56 |     background-color: #71cdf4;
 57 |     border: 50%;
 58 |     width: 85%;
 59 |     height: 85%;
 60 |     display: block;
 61 |     margin: auto;
 62 |     position: absolute;
 63 |     top: 8%;
 64 |     left: 8%;
 65 |     z-index: 3;
 66 |     border-radius: 50%;
 67 | }
 68 | 
 69 | #topSquareTwo {
 70 |     display: block;
 71 |     margin: auto;
 72 |     background-color: #d50625;
 73 |     z-index: 3;
 74 |     height: 60%;
 75 |     width: 162%;
 76 |     position: absolute;
 77 |     left: 80%;
 78 | }
 79 | 
 80 | #buttonRed {
 81 |     background-color: #fc2243;
 82 |     border-radius: 50%;
 83 |     width: 15px;
 84 |     height: 15px;
 85 |     display: block;
 86 |     position: absolute;
 87 |     margin: auto;
 88 |     top: 45%;
 89 |     left: -18%;
 90 |     z-index: 2;
 91 | }
 92 | #buttonGreen {
 93 |     background-color: #58bb69;
 94 |     border-radius: 50%;
 95 |     width: 15px;
 96 |     height: 15px;
 97 |     display: block;
 98 |     position: absolute;
 99 |     margin: auto;
100 |     top: 45%;
101 |     left: -8%;
102 |     z-index: 2;
103 | }
104 | #buttonYellow {
105 |     background-color: #ffcf54;
106 |     border-radius: 50%;
107 |     width: 15px;
108 |     height: 15px;
109 |     display: block;
110 |     position: absolute;
111 |     margin: auto;
112 |     top: 45%;
113 |     left: 2%;
114 |     z-index: 2;
115 | }
116 | 
117 | #screen {
118 |     position: absolute;
119 |     background-color: #e6e6e6;
120 |     display: block;
121 |     margin: auto;
122 |     border-radius: 5%;
123 |     position: absolute;
124 |     height: 75%;
125 |     width: 100%;
126 |     bottom: -10%;
127 | }
128 | 
129 | #screenTwo {
130 |     position: absolute;
131 |     background-color: #e5f6fc;
132 |     display: block;
133 |     margin: auto;
134 |     border-radius: 8%;
135 |     position: absolute;
136 |     height: 75%;
137 |     width: 80%;
138 |     bottom: 10%;
139 |     left: 10%;
140 | }
141 | 
142 | #bottom {
143 |     width: 100%;
144 |     display: block;
145 |     margin: auto;
146 |     height: 50%;
147 |     border-radius: 5%;
148 |     position: relative;
149 | }
150 | 
151 | 
152 | #start {
153 |     cursor: pointer;
154 |     width: 15%;
155 |     display: block;
156 |     margin: 10px auto;
157 |     height: 8%;
158 |     position: absolute;
159 |     left: 48%;
160 |     top: 30%;
161 |     background-color: #f07147;
162 |     border-radius: 30px;
163 | }
164 | 
165 | #select {
166 |     cursor: pointer;
167 |     width: 15%;
168 |     display: block;
169 |     margin: 10px auto;
170 |     height: 8%;
171 |     position: absolute;
172 |     left: 30%;
173 |     top: 30%;
174 |     background-color: #58bb69;
175 |     border-radius: 30px;
176 | }
177 | 
178 | #buttonBlueTwo {
179 |     cursor: pointer;
180 |     background-color: #1697f9;
181 |     border-radius: 50%;
182 |     width: 50px;
183 |     height: 50px;
184 |     display: block;
185 |     margin: auto;
186 |     position: absolute;
187 |     top: 29%;
188 |     left: 5%;
189 |     z-index: 2;
190 | }
191 | 
192 | #buttonYellowTwo {
193 |     cursor: pointer;
194 |     background-color: #ffcf54;
195 |     border-radius: 5%;
196 |     width: 120px;
197 |     height: 50px;
198 |     display: block;
199 |     margin: auto;
200 |     position: absolute;
201 |     top: 59%;
202 |     left: 25%;
203 |     z-index: 2;
204 | }
205 | 
206 | #dpadHorizontal {
207 |     cursor: pointer;
208 |     background-color: #404040;
209 |     height: 80px;
210 |     width: 23px;
211 |     display: block;
212 |     position: absolute;
213 |     top: 32%;
214 |     right: 16%;
215 | }
216 | 
217 | #dpadVertical {
218 |     cursor: pointer;
219 |     background-color: #404040;
220 |     height: 23px;
221 |     width: 80px;
222 |     display: block;
223 |     position: absolute;
224 |     top: 42%;
225 |     right: 8%;
226 | }


--------------------------------------------------------------------------------
/AsyncProjects/pokedexTwo.css:
--------------------------------------------------------------------------------
  1 | #container {
  2 |     display: flex;
  3 | }
  4 | 
  5 | #hinge {
  6 |     width: 20px;
  7 |     background-color: #d50625;
  8 |     border: 5px;
  9 |     height: 470px;
 10 |     margin-top: 45px;
 11 | }
 12 | 
 13 | #pokedexTwo {
 14 |     width: 350px;
 15 |     height: 450px;
 16 |     display: block;
 17 |     margin-top: 70px;
 18 |     background-color: #fc2243;
 19 |     z-index: 3;
 20 |     position: relative;
 21 | }
 22 | 
 23 | #hidden {
 24 |     position: absolute;
 25 |     background-color: #fc2243;
 26 |     height: 30px;
 27 |     width: 60%;
 28 |     top: -30px;
 29 | }
 30 | 
 31 | #searchBar {
 32 |     background-color: black;
 33 |     display: flex;
 34 |     height: 50px;
 35 |     margin-top: 60px;
 36 |     margin-left: 20px;
 37 |     margin-right: 20px;
 38 | }
 39 | 
 40 | #searchName {
 41 |     width: 90%;
 42 |     border: none;
 43 |     background-color: #404040;
 44 |     color: azure;
 45 |     outline: none;
 46 |     height: 50px;
 47 |     padding-left: 15px;
 48 |     font-size: 1.6rem;
 49 | }
 50 | 
 51 | ::placeholder {
 52 |     font-size: 1.6rem;
 53 |     margin-left: 5px;
 54 |     color: lightgray;
 55 | }
 56 | 
 57 | #searchBtn {
 58 |     color: #fff;
 59 |     background-color: #404040;
 60 |     height: 52px;
 61 |     font-size: 20px;
 62 | }
 63 | 
 64 | #sectionTwo {
 65 |     height: 100px;
 66 |     width: 88%;
 67 |     margin: 20px;
 68 |     display: grid;
 69 |     grid-template-columns: repeat(4, 1fr);
 70 |     grid-gap: 5px;
 71 | }
 72 | 
 73 | .squares {
 74 |     background-color: aqua;
 75 | }
 76 | 
 77 | #sectionThree {
 78 |     height: 70px;
 79 |     margin: 10px;
 80 |     display: flex;
 81 |     justify-content: space-between;
 82 | }
 83 | 
 84 | #twoSquares {
 85 |     width: 100%;
 86 |     display: flex
 87 | }
 88 | 
 89 | .two {
 90 |     background-color: beige;
 91 |     width: 60px;
 92 |     margin: 5px;
 93 | }
 94 | 
 95 | #bottomYellowBtn {
 96 |     width: 60px;
 97 |     height: 60px;
 98 |     background-color: #ffcf54;
 99 |     margin-right: 30px;
100 |     margin-top: 10px;
101 |     border-radius: 50%;
102 | }
103 | 
104 | #sectionFour {
105 |     width: 91%;
106 |     margin: 15px;
107 |     display: flex;
108 |     justify-content: space-between;
109 | }
110 | 
111 | #sectionFour .bottomTwo {
112 |     height: 40px;
113 |     width: 130px;
114 |     background-color: #404040;
115 | }
116 | 
117 | #pokemonImg {
118 |     z-index: 10000;
119 |     width: 100%;
120 |     height: 100%;
121 | }


--------------------------------------------------------------------------------
/AsyncProjects/weather.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     font-family: 'Montserrat', sans-serif;
  3 |     font-size: 16px;
  4 | }
  5 | 
  6 | p, h5 {
  7 |     margin: 0.5rem;
  8 | }
  9 | 
 10 | .app {
 11 |     position: relative;
 12 |     width: 414px;
 13 |     height: 420px;
 14 |     display: block;
 15 |     margin: auto;
 16 |     text-align: center;
 17 |     padding: 40px 0;
 18 |     overflow: hidden;
 19 |     border-radius: 50px;
 20 |     background-image: linear-gradient(
 21 |     325deg,
 22 |     hsl(240deg 97% 55%) 0%,
 23 |     hsl(240deg 97% 65%) 32%,
 24 |     hsl(240deg 97% 70%) 59%,
 25 |     hsl(240deg 96% 75%) 74%,
 26 |     hsl(240deg 96% 79%) 84%,
 27 |     hsl(240deg 96% 82%) 90%,
 28 |     hsl(240deg 96% 85%) 94%,
 29 |     hsl(240deg 96% 88%) 97%,
 30 |     hsl(240deg 96% 91%) 99%,
 31 |     hsl(240deg 96% 93%) 100%,
 32 |     hsl(240deg 96% 96%) 100%,
 33 |     hsl(240deg 95% 98%) 100%,
 34 |     hsl(0deg 0% 100%) 100%
 35 | );
 36 | }
 37 | 
 38 | #search-bar {
 39 |     display: flex;
 40 |     justify-content: space-between;
 41 |     padding: 0 40px;
 42 |     margin-bottom: 30px;
 43 |     color: #fff;
 44 | }
 45 | 
 46 | #search-bar-input {
 47 |     background-color: none;
 48 |     border: none;
 49 |     outline: none;
 50 |     width: 90%;
 51 |     background: none;
 52 |     font-size: 1.4rem;
 53 |     color: #fff;
 54 |     border-bottom: solid 1px lightblue ;
 55 | }
 56 | 
 57 | input::placeholder {
 58 |     color: #fff;
 59 |     opacity: .6;
 60 | }
 61 | 
 62 | #search-icon {
 63 |     border: none;
 64 |     background-color: transparent;
 65 |     color: #fff;
 66 |     font-size: 1.5rem;
 67 | }
 68 | 
 69 | #info {
 70 |     line-height: 0.5rem;
 71 |     color: #fff;
 72 | }
 73 | 
 74 | #info h4 {
 75 |     font-size: 40px;
 76 |     font-weight: bold;
 77 |     text-transform: uppercase;
 78 |     margin: 2rem;
 79 | }
 80 | 
 81 | #info .description {
 82 |     text-transform: uppercase;
 83 | }
 84 | 
 85 | #temperature {
 86 |     background: rgb(206, 206, 206);
 87 |     border-radius: 500px;
 88 |     width: 50px;
 89 |     height: 50px;
 90 |     text-align: center;
 91 |     display: block;
 92 |     margin: auto;
 93 |     box-shadow: 0 30px 20px #1d1d1d36;
 94 |     margin: auto;
 95 |     margin-top: 30px;
 96 |     margin-bottom: 300px;
 97 | }
 98 | 
 99 | #temp-img {
100 |     margin-bottom:-30px;
101 | }
102 | 
103 | #description {
104 |     color: #fff;
105 | }
106 | 
107 | #temp {
108 |     font-size: 2rem;
109 |     color: #fff;
110 | }
111 | 
112 | #temperature p {
113 |     font-size: 14px;
114 | }
115 | 
116 | #temperature h2 {
117 |     margin: 0;
118 |     font-size: 60px;
119 |     font-weight: 300;
120 | }
121 | 
122 | .extra-info {
123 |     position: absolute;
124 |     bottom: 5px;
125 |     width: 100%;
126 |     display: flex;
127 |     justify-content: space-around;
128 |     border: black 2px;
129 |     color: #fff;
130 |     padding-bottom: 30px;
131 | }
132 | 
133 | .extra-info h5 {
134 |     font-size: 1.1rem;
135 |     text-transform: uppercase;
136 | }
137 | 
138 | .extra-info p {
139 |     font-size: 1.7rem;
140 | }


--------------------------------------------------------------------------------