weather-report #9
Conversation
| <h1>Weather Report</h1> | ||
| <h5> | ||
| For the lovely city of | ||
| <span class="header_city"></span> |
There was a problem hiding this comment.
You could put a default city name here so that it won't be blank when the page loads.
| <section class="weather_garden"> | ||
| <h2><em>Weather Garden</em></h2> | ||
| <div id="sky" class="sky_content"></div> | ||
| <div id="landscape" class="landscape_content"></div> | ||
| </section> | ||
|
|
||
| <section class="temp"> | ||
| <h2>Temperature: <span class="yellow" id="temp_num"> 60</span></h2> | ||
| <button id="temp_increase">^</button> | ||
| <button id="temp_decrease">v</button> | ||
| </section> | ||
|
|
||
| <section id="skyContainer"> | ||
| <h2>Sky</h2> | ||
| <select id="sky_select"> | ||
| <option>Sunny</option> | ||
| <option>Cloudy</option> | ||
| <option>Rainy</option> | ||
| <option>Snowy</option> | ||
| </select> | ||
| </section> |
| const change_landscape = (if_temp) => { | ||
| const earthContainer = document.getElementById("landscape"); | ||
|
|
||
| let landscape = ""; | ||
| if (if_temp >= 80) { | ||
| landscape = "🌵__🐍_🦂_🌵🌵__🐍_🏜_🦂"; | ||
| } else if (if_temp >= 70 && if_temp <= 79) { | ||
| landscape = "🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷"; | ||
| } else if (if_temp >= 60 && if_temp <= 69) { | ||
| landscape = "🌾🌾_🍃_🪨__🛤_🌾🌾🌾_🍃"; | ||
| } else if (if_temp <= 59) { | ||
| landscape = "🌲🌲⛄️🌲⛄️🍂🌲🍁🌲🌲⛄️🍂🌲"; | ||
| } | ||
| earthContainer.textContent = landscape; | ||
| }; |
| background.className = skySelected; | ||
| }; | ||
|
|
||
| const state = { location: "" }; |
There was a problem hiding this comment.
best practice to have state at the top of your file.
| const state = { location: "" }; | ||
|
|
||
| const reset = (typed_city) => { | ||
| // state.location = ""; |
|
|
||
| const reset = (typed_city) => { | ||
| // state.location = ""; | ||
| typed_city = document.querySelector("#typed_city").value; |
There was a problem hiding this comment.
in html you need to add a value attribute so you can access it here.
| <section class="reset_location"> | ||
| <h2>City</h2> | ||
| <div><button id="reset">Reset</button></div> | ||
| <input id="typed_city" type="text" /> |
| typed_city = document.querySelector("#typed_city").value; | ||
| const resetClick = document.querySelector("#typed_city"); | ||
| resetClick.textContent = typed_city; | ||
| }; |
There was a problem hiding this comment.
you also need to update the city name. I would add a function that gets the header city name and change the input to whatever the user input value is.
| const handleReset = () => { | ||
| const resetClick = document.querySelector("#reset"); | ||
| resetClick.addEventListener("click", reset); | ||
| }; | ||
|
|
||
| document.addEventListener("DOMContentLoaded", handleReset); |
There was a problem hiding this comment.
this can be moved into the registerEventHandlers you have below
| @@ -0,0 +1,77 @@ | |||
| body { | |||
| color: hsl(309, 42%, 32%); | |||
There was a problem hiding this comment.
your page was responsive and clean. I like that you also changed the text color with the change of the sky.
|
Great job! I loved the look of your page and that it was responsive. I added some comments to get your reset button to work and some syntax suggestions. |
No description provided.