Ruby- Samantha H #59
Ruby- Samantha H #59
Conversation
…andscape change mostly finished, css wanting
| <section id="grid_space_one" class="grid-item"> | ||
| <section id="city-space"> | ||
| <section id="city-name-section"> |
There was a problem hiding this comment.
I'd recommend trying to consolidate some of these section tags so that you don't have as many tags to keep track of and maintain 😌 🧹
| </section> | ||
|
|
||
| <section class="search"> | ||
| <input id="city_input" type="text" placeholder="enter city name" spellcheck="true"> |
There was a problem hiding this comment.
Nice usage of the placeholder and spellcheck attributes!
| </section> | ||
|
|
||
|
|
||
| <section id="grid_space_three" class="grid-item"> |
There was a problem hiding this comment.
Make sure you're being consistent with your class and id naming conventions. Best practice is lowercase with hyphens (-) separating words when needed (unless you're using the BEM convention).
| <h1> ✨Look Inspiration✨</h1> | ||
|
|
||
| <section class="fashion-image-container"> | ||
| <img id="fashion_landscape" src="assets/80_degree_outfit.jpeg"> |
|
|
||
| function changeSkyImage() { | ||
| let selectedSky = skySelector.value; | ||
| switch(selectedSky) { |
There was a problem hiding this comment.
Great usage of a switch statement here 👏🏾
| } | ||
| } | ||
|
|
||
| async function updateWeather() { |
There was a problem hiding this comment.
Similar to how you handled changing the city name, I'd recommend adding some logic to this function to have it only execute after the Enter key is pressed. At the moment, it executes after every single character that's entered into the input box which is causing a lot of unnecessary API calls and errors.
| } | ||
|
|
||
| function resetCity(){ | ||
| const cityName = document.getElementById('city_name') |
There was a problem hiding this comment.
Note that this city_name element is already available for use in the global variable city. I think I prefer this locally scoped variable better though so I'd probably recommend moving the global variable inside the changeCity function too.
| @@ -0,0 +1,157 @@ | |||
| const city = document.getElementById('city_name') | |||
| let inputCity = document.getElementById('city_input') | |||
There was a problem hiding this comment.
| let inputCity = document.getElementById('city_input') | |
| const inputCity = document.getElementById('city_input') |
Note these type of variables storing html elements can be declared as const variables since under the hood they're just objects, so you'll still be able to modify the data inside the object. This just ensures the variable itself can't be reassigned.
| case 'skySnowy': | ||
| skyImage.src = 'assets/skies/snowy_sky.jpeg'; | ||
| break; | ||
|
|
||
| case 'skyStarry': | ||
| skyImage.src = 'assets/skies/starry_sky_blue.jpeg'; | ||
| break; |
There was a problem hiding this comment.
Note that there are some formatting issues for the Starry and Snowy options where the section header The Sky Today and the dropdown menu for sky selection get pushed out of the visible area of the box due to the images being too large. This makes a page refresh required to get the selection box back.
For things like this, it's really good to restrict the maximum size of images, make all images the same size, and/or make the position of the header and dropdown menu fixed so they can't disappear.
| } | ||
|
|
||
| main { | ||
| display: grid; |
No description provided.