Panthers--Maggie T #92
Conversation
| <h1>Weather for <span id="city"></span></h1> | ||
| <div> | ||
| <input id="cityInput" type="text" size="30" placeholder="Enter city" /> | ||
| <button id="citySearch">Search</button> | ||
| <button id="cityReset">Reset</button> | ||
| </div> | ||
|
|
||
| <h4>Temperature is <span id="temperature"></span>º F</h4> | ||
| <div> | ||
| <button id="decreaseTemp">-</button> | ||
| <button id="increaseTemp">+</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class = "landscapeSky"> | ||
| <h4>Landscape is <span id="landscape"></span></h4> | ||
|
|
||
| <h4>Sky is <span id="sky"></span></h4> | ||
| <div> | ||
| <select id="skyInput"> | ||
| <option value="sunny">Sunny</option> | ||
| <option value="cloudy">Cloudy</option> | ||
| <option value="rainy">Rainy</option> | ||
| <option value="snowy">Snowy</option> | ||
| </select> |
| #skyInput { | ||
| margin: 0; | ||
| width: calc(100% - 200px); | ||
| font-size: 105%; | ||
| border: 1px solid purple; | ||
| background-color: antiquewhite; | ||
| color: black; | ||
| font-family: inherit; | ||
| padding: 1.5em 1em; | ||
| float: left; | ||
|
|
||
| } | ||
|
|
||
| #decreaseTemp{ | ||
| font-size: 36px; | ||
| font-weight: 600; | ||
| } | ||
| #increaseTemp { | ||
| font-size: 28px; | ||
| font-weight: 600; | ||
| } | ||
|
|
| body { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| height: 100vh; | ||
| margin: 30px; | ||
| background-color: rgb(136, 55, 211); | ||
| font-size: 120%; | ||
| flex-direction: column; | ||
| } |
There was a problem hiding this comment.
I would suggest adding media queries to account for all types of screen sizes
| const state = { | ||
| sky: 'sunny', | ||
| temperature: 0, | ||
| city: '', | ||
| }; |
There was a problem hiding this comment.
Instead of having a hard coded default sky state, how might you refactor this so the logic is more data driven? The sky should really be displayed based on the call to the api
| temperature: 0, | ||
| city: '', | ||
| }; | ||
| const temperatureChangeStep = 1; |
| setTemperature(state.temperature - temperatureChangeStep); | ||
| }; | ||
|
|
||
| const kelvinToFarenheit = (k) => 1.8 * (k - 273) + 32; |
|
|
||
| //use the city to get lat/long | ||
| const fetchCityLatLong = (city) => { | ||
| console.log('fetchCityLatLong()', city); |
There was a problem hiding this comment.
Remember to remove debugging log statements
|
|
||
| // use lat/lon coordinates to get temperature | ||
| const fetchLatLongTemperature = (latLong) => { | ||
| const { lat, lon } = latLong; |
| elCityReset.addEventListener('click', (event) => { | ||
| setCity(''); | ||
| elCityInput.focus(); | ||
| }); |
There was a problem hiding this comment.
There's an issue with wave 06 (resetting the city name), the requirements specify that you must include a button that resets the city name & when a user clicks on this button, the city name will be set to a default name along with the temperature for that city. Currently your code is not displaying the city name when you reset the city.
There was a problem hiding this comment.
When you reset the city it should be updated to a selected city instead of an empty string like so:
cityNameInput.value = 'Seattle';
| //initialization - render all state first | ||
| renderCity(); | ||
| renderTemperature(); | ||
| renderSky(); | ||
|
|
||
| //run initial search and show a temperature | ||
| setCity('Denver'); | ||
| searchCityWeather('Denver'); | ||
|
|
There was a problem hiding this comment.
Since your script file is included at the end of the HTML file, it's probably fine to invoke this directly. But prefer to register it to be called in response to the DOMContentLoaded event. In the similar live code we did, we did call our onLoaded function directly, since codesandbox got in the way of our code being able to see the DOMContentLoaded event.
No description provided.