Conversation
beccaelenzil
left a comment
beccaelenzil
left a comment
There was a problem hiding this comment.
Great work on this vanilla javascript project. Your code is clear and you've clearly met the learning goals around dynamic styling and event handling. Nice work using both flexbox and grid to create a clean layout!
|
|
||
| //reset City | ||
| const resetCity = (event) => { | ||
| event.target.value = 'Seattle'; |
There was a problem hiding this comment.
Rather than setting the event.target.value to 'Seattle', we want to selected the input box itself, and set the value of that element to "Seattle". This will put 'Seattle' into the input box.
| skyDropdown.addEventListener('change', (event) => { | ||
| if (event.target.value === 'sunny') { | ||
| selectedSky.textContent = ' ☁️ ☁️ ☀️ ☁️ ☁️ ☀️ ☀️ ☀️ ☁️ ☀️☀️ ☀️ ☁️ ☀️'; | ||
| gardenBackground.style.backgroundColor = '#D6FFFF'; | ||
| } else if (event.target.value === 'cloudy') { | ||
| selectedSky.textContent = '☁️☁️ ☁️ ☁️☁️ ☁️ 🌤 ☁️ ☁️☁️🌤 ☁️ ☁️☁️'; | ||
| gardenBackground.style.backgroundColor = '#C9C9C9'; | ||
| } else if (event.target.value === 'rainy') { | ||
| selectedSky.textContent = '🌧🌈⛈🌧🌧💧⛈🌧🌦🌧💧🌧🌧🌧🌈⛈🌧'; | ||
| gardenBackground.style.backgroundColor = '#9FCFE0'; | ||
| } else if (event.target.value === 'snowy') { | ||
| selectedSky.textContent = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨🌨❄️❄️🌨🌨'; | ||
| gardenBackground.style.backgroundColor = '#A1B6D6'; | ||
| } |
There was a problem hiding this comment.
To enhance readability, you might consider refactoring and moving the sky/color change functionality into a named function that's passed here as a callback function (rather than an anonymous function)
| }); | ||
| }; | ||
|
|
||
| const defaultSetup = () => { |
There was a problem hiding this comment.
Nice work encapsulating this default set-up here!
| const displayCity = document.getElementById('cityNameDisplay'); | ||
| const resetButton = document.getElementById('resetCity'); | ||
|
|
||
| const state = { |
| <main> | ||
| <section class ="content-wrapper"> | ||
| <div class="items-wrapper"> | ||
| <div class="item-wrapper" id="temperatureContainer"> |
There was a problem hiding this comment.
You might consider making the temperatureContainer, cityNameContainer, skyContainer, and weatherGardenContainer section elements
| gardenBackground.style.backgroundColor = '#9FCFE0'; | ||
| } else if (event.target.value === 'snowy') { | ||
| selectedSky.textContent = '🌨❄️🌨🌨❄️❄️🌨❄️🌨❄️❄️🌨🌨🌨❄️❄️🌨🌨'; | ||
| gardenBackground.style.backgroundColor = '#A1B6D6'; |
There was a problem hiding this comment.
Directly applying styles works and is a valid approach. You may also consider applying a class name to keep the styles in the stylesheet.
2 participants
No description provided.