Kassidy Buslach Sharks #81
Conversation
yangashley
left a comment
yangashley
left a comment
There was a problem hiding this comment.
Great job! Your code was easy to read and I was able to do all of the required tasks in your weather app! Please let me know if you have any questions.
🟢 for weather-report!
| <footer class="seasons"> | ||
| <h2>Landscape: | ||
| <span id="conditions"> 🌸☀️🌸☀️🌸☀️🌸☀️🌸☀️</span> | ||
| </h2> | ||
|
|
||
|
|
||
| </footer> |
There was a problem hiding this comment.
While this part of the page is at the bottom of the screen when I view it in a browser, it might be more fitting to use a section tag here instead of a footer tag.
A footer typically contains information about the author of the section, copyright data or links to related documents:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer
| <!-- <link rel="node_modules" href="./node_modules/axios/dist/axios.min.js" --> | ||
|
|
||
| </head> | ||
| <header> |
There was a problem hiding this comment.
👍 Your HTML is semantic and clearly written. Nice job!
| tempChangeColor(state.fahrenheit); | ||
| weatherGarden(); | ||
| const decrease = document.getElementById('f'); | ||
| decrease.textContent = `Degrees Fahrenheit:${state.fahrenheit}`; | ||
| return decrease.textContent; |
There was a problem hiding this comment.
Notice lines 18-22 are almost identical to lines 9-13 above. You can put these 5 lines into a helper method like updateTempAndDisplay() and then call that helper method in the tempUp and tempDown methods.
| return decrease.textContent; | ||
| }; | ||
|
|
||
| const cityInput = (event) => { |
There was a problem hiding this comment.
The method name getCityWeather on line 30 is very descriptive because it tells me exactly what the method will do. The name cityInput is vague here. If you refactor this method from cityInput to updateCityInputAndGetRealWeather then you increase readability overall because someone could read the method name and know what the method will do.
| let element = document.getElementById('temperatureContainer'); | ||
| if (state.fahrenheit >= 80) { | ||
| element.style.backgroundColor = 'red'; | ||
| } else if (80 > state.fahrenheit && state.fahrenheit >= 70) { | ||
| element.style.backgroundColor = 'orange'; | ||
| } else if (70 > state.fahrenheit && state.fahrenheit >= 60) { | ||
| element.style.backgroundColor = 'yellow'; | ||
| } else if (60 > state.fahrenheit && state.fahrenheit >= 50) { | ||
| element.style.backgroundColor = 'green'; | ||
| } else if (50 > state.fahrenheit && state.fahrenheit >= 33) { | ||
| element.style.backgroundColor = 'teal'; | ||
| } else if (state.fahrenheit <= 32) { | ||
| element.style.backgroundColor = 'blue'; | ||
| } |
There was a problem hiding this comment.
Check out the logic in tempChangeColor(), see how similar the branches are of the conditional statement. We look for whether the temperature is within a range, and pick a color accordingly. What if we had a list of records that we could iterate through to find the values. We could set up something like
const TEMP_COLORS = [
{ upperBound: 49, color: "teal"},
{ upperBound: 59, color: "green"},
{ upperBound: 69, color: "yellow"},
{ upperBound: 79, color: "orange"},
{ upperBound: 80, color: "red"}
];Then your method would iterate through TEMP_COLORS and find the first record that has an upper bound higher than our temperature, then use it as the source of picking the color which would help make the function a bit more concise.
This could accommodate a scenario where you might have even more colors in the future, which would prevent your conditional statement from being a really long block of if/elif/elif and so on
|
|
||
| const resetCity = (event) => { | ||
| const resetInput = document.getElementById('input'); | ||
| resetInput.value = 'Edmonds'; |
There was a problem hiding this comment.
Consider creating a constant like DEFAULT_CITY for 'Edmonds' instead of using a string literal here. It's good practice to use constants when the literal value won't change and also if someone reads
cityInput.value = DEFAULT_CITY;the intent is a little more clear.
| @@ -0,0 +1,26 @@ | |||
| header {text-align: center;} | |||
There was a problem hiding this comment.
You can change how this is formatted property and value on its own line (like what you did on lines 3-5) to be in line with the rest of the formatting in this file
|
|
||
|
|
There was a problem hiding this comment.
Delete unnecessary whitespace here before the closing bracket to improve code readability
| } | ||
| section.info { |
There was a problem hiding this comment.
There should be a white space between a closing bracket and the start of the next rule
|
|
||
|
|
||
|
|
||
|
|
||
|
|
2 participants
No description provided.