Basic idea is, we have an input field and submit button in a div, styled with CSS. Clicking the submit button invokes a function which inputs the city using document object model (DOM) query selector and we fetch an API with API key and city name as a query. Relevant data is extracted and displayed with a CSS styled div again selected using DOM.
Link of the weather app: https://weather-app-using-html-css-and-javascript.vercel.app/
We have an error display message which is styled as display: none by default, and is changed to display: block if the fetch method returns a 404 response, if the user enters an incorrect city name.
We also have an associated image displayed corresponding to the weather, which the instructor selected using if-else statement based on the weather property returned by the API, however, I used string interpolation with placeholder ${} to use the weather property to output file names directly, somewhat like images/${weather}.png and thus improved the code efficiency.
Link of associated code: https://github.com/Harshitnitw/Weather-App-using-HTML--CSS-and-Javascript
Thanks to GreatStack youtube channel for providing the learning experience: https://youtu.be/G0jO8kUrg-I?si=PxYmpNP420Et9LAp
Feel free to reach me out if you would like to learn and grow together 😄
Top comments (0)