Otters | Tori Shade #85
Conversation
| city: "Seattle", | ||
| latitude: 47.6038321, | ||
| longitude: -122.3300624, | ||
| climate: temperature, |
| @@ -0,0 +1,323 @@ | |||
| /* Page Background */ | |||
| html { | |||
There was a problem hiding this comment.
Some bits of code (like the following) are repeated across the file. We can DRY css by stating it once in a more encompassing element, like in html:
font-family: 'Inter';
font-style: normal;
color: #FFFFFF;
| top: 50%; | ||
| left: 50%; | ||
| margin-right: -50%; | ||
| transform: translate(-50%, -50%); |
There was a problem hiding this comment.
Since #main-title and #sub-title also has a lot of overlapping information, we could pull that info out of the individual selectors and add them to a combined CSS block:
#main-title, #sub-title {
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
etc...
}
| document.addEventListener('DOMContentLoaded', getCurrentForecast); | ||
| document.addEventListener('DOMContentLoaded', changeTemperatureAndLandscapeStyling); | ||
| document.addEventListener('DOMContentLoaded', setTheMood); | ||
| document.addEventListener("DOMContentLoaded", registerEventHandlers); |
There was a problem hiding this comment.
Nice use of the helper method registerEventHandlers! ✨
| <!-- <section> | ||
| <button id="addCrabButton">Add Crab</button> | ||
| </section> | ||
| <section id="crabContainer"> | ||
| </section> --> |
There was a problem hiding this comment.
Remember to remove any superfluous code! 😉
| const cityNameInput = document.getElementById("city-name-input"); | ||
| cityNameInput.addEventListener("keyup", () => { | ||
| currentLocation.city = cityNameInput.value; | ||
| displayCurrentLocation(); | ||
| }); | ||
| } |
There was a problem hiding this comment.
For ever cleaner code, consider moving this event listener down to registerEventHandlers and refactoring this function.
| changeTemperatureAndLandscapeStyling(); | ||
| }) | ||
| .catch((error) => { | ||
| console.log(`Current Temperature for ${currentLocation.city} Not Found ${error.response.data}`); |
| window.onload = () => { | ||
| displayCurrentLocation(); | ||
| getCurrentForecast(); | ||
| setTheMood(); | ||
| changeTemperatureAndLandscapeStyling(); | ||
| }; |
There was a problem hiding this comment.
Great job researching and implementing a window.onload function!
| <div id = "sky-content-box"></div> | ||
| <h1 id = "sky-content-box-header">Sky</h1> | ||
| <select id = "sky-drop-down"> | ||
| <option value="What's the Vibe?">--What's the Vibe?--</option> |
No description provided.