C17 Otters Ying Goings #83
Conversation
There was a problem hiding this comment.
Wonderful work, Ying! 🎉
I'm so impressed with your JS and CSS savviness! You met all the project requirements and then some. I love so many things about this implementation, namely how the sky and the temperature colors create a unique gradient, all the error handling details, and the week's entire forecast! This project is a Green. 🟢
I'm so excited to see what you'll make out there! Keep it up! ⭐
| } | ||
|
|
||
| document.addEventListener('DOMContentLoaded', registerEventHandlers); | ||
| document.addEventListener('DOMContentLoaded', displayStates); |
There was a problem hiding this comment.
Nit: Remember to put a newline at the end of files!
| <section class="left-col"> | ||
| <h1 id="city-name"></h1> | ||
| <div class="search-bar"> | ||
| <input id="text-input" type="text"> |
There was a problem hiding this comment.
To make this label even more screen-reader friendly, I recommend making the id name even more specific, something like city-name-text-input!
| <h1 id="city-name"></h1> | ||
| <div class="search-bar"> | ||
| <input id="text-input" type="text"> | ||
| <button class="button" id="fetchweather"><img class="icon" src="./assets/getliveweather.png" alt="Fetch current weather conditions and weather forecast"></button> |
There was a problem hiding this comment.
Class name button here isn't all too informative since we could select all buttons using the element marker button in CSS,
| </div> | ||
| <div id="error-box"></div> | ||
| <div class="skies-section"> | ||
| <label for="skies">Change sky:</label> |
There was a problem hiding this comment.
Love the use of the for attribute for this label! 💯
| const state = { | ||
| title: initialTitle, | ||
| temp: 60, | ||
| sky: null, | ||
| unit: 'F', | ||
| land: null, | ||
| cur_conditions: null, | ||
| timezone: null, | ||
| toc: false | ||
| }; |
There was a problem hiding this comment.
Great job setting the global state of this app at the top of the file!
| const displayStates = () => { | ||
| tempDisplay.textContent = Math.round(state.temp); | ||
| updateColor(); | ||
| cityDisplay.textContent = state.title; | ||
| updateLandState(); | ||
| updateSkyState(); | ||
| cityCurConditions.textContent = state.cur_conditions; | ||
| displayDateTime(); | ||
| updateForecast(); | ||
| } |
| } | ||
| } | ||
|
|
||
| const fetchAll = async () => { |
There was a problem hiding this comment.
Great implementation of a async/await function!
| return localDateTime; | ||
| }; | ||
|
|
||
| const displayDateTime = () => { |
| @@ -0,0 +1,78 @@ | |||
| body { | |||
There was a problem hiding this comment.
Love the craiglist-chic minimalism and the gradients! 🎉
| await fetchAll(); | ||
| }; | ||
| const error = (err) => { | ||
| alert('Your browser does not permit location sharing.'); |
No description provided.