Conversation
tgoslee
left a comment
tgoslee
left a comment
There was a problem hiding this comment.
Great job Heather! I liked your weather app! It was clean and simple and I liked ASCII art instead of emojis. For wave 3, when I typed a city in the input it didn't change anywhere on your app. I also couldn't get the current city's weather. I would check on the type of event listener you are using and where you are intending the city to appear. The temperature worked fine and so did changing the sky/landscape. Take a look at my feedback and let me know if you have questions.
| <figure id="weather_display"> | ||
| <text id="numeric_temperature">25</text> | ||
| <div id="units_div"><button id="temperature_units">°C</button></div> | ||
| </figure> | ||
| <figure id="change_temperature"> | ||
| <button id="decrease"alt="Decrease Temperature"> － </button> | ||
| <button id="reset"alt="Reset Temperature">⃔ </button> | ||
| <button id="increase"alt="Increase Temperature"> + </button> | ||
| </figure> |
There was a problem hiding this comment.
I was curious why you decided on the figure tag. Normally you would see it with an img tag so you could embed an image with a caption. You could also use it for diagrams or listing code. An example here: https://www.geeksforgeeks.org/html5-figure-tag/
Here is an example of a flowchart you could look at for guidance on what tags to use for that focus on semantic html:
| <header> | ||
| <a id="site_title" href="index.html"> | ||
| <p>~ current temperature in ~</p> | ||
| </a> | ||
| <nav> | ||
| <div><button id="search_location" alt="Search or Enter Location">⌖</button></div> | ||
| <input type="search" id="location_text" value="Denver" placeholder="location"></input> | ||
| <div><button id="refresh_weather" alt="Refresh">⇢</button></div> | ||
| </nav> | ||
| </header> |
| <option value="snowy">snowy</option> | ||
| </select> | ||
| </div> | ||
| <div id="sky_display" class="ascii_art"> |
There was a problem hiding this comment.
I like this different approach to the sky display and landscape display
| </pre> | ||
| </div> | ||
| <div id="landscape" class="ascii_art"> | ||
| <pre> |
There was a problem hiding this comment.
good use of pre tag to keep your sky/landscape formatted
| // document.getElementById('#temperature_units').textContent; | ||
| // state.tempUnits = currentUnits; | ||
| console.log('current units: ' + currentUnits); |
There was a problem hiding this comment.
you can remove your console log and commented code
| }); | ||
| }; | ||
|
|
||
| const changeCity = () => { |
There was a problem hiding this comment.
When I am typing in the input it should change the city name. From wave 3:
- A text input element that allows the user to change the city name
You should have an event listener for input like
const cityNameInput = document.getElementById('cityNameInput');
cityNameInput.addEventListener('input', updateCityName);2 participants
No description provided.