Assignment 8 of the Front-End Web Dev bootcamp to create a weather app with 5-day forecast.
A web app to show current weather and 5-day forecast for any city searched by a user.
Weather app · GitHub repo ·Table of Contents
The goal of this project is to practice web APIs (specifically OpenWeatherAPI), jQuery, a web library like Day.js, and using local storage.
The tasks for this challenge are outlined in the following requirements.
The weather app must have these features:
- Create a weather dashboard with form inputs.
- When a user searches for a city they are presented with current and future conditions for that city and that city is added to the search history.
- When a user views the current weather conditions for that city they are presented with:
- The city name
- The date
- An icon representation of weather conditions
- The temperature
- The humidity
- The wind speed
- When a user view future weather conditions for that city they are presented with a 5-day forecast that displays:
- The date
- An icon representation of weather conditions
- The temperature
- The humidity
- When a user click on a city in the search history they are again presented with current and future conditions for that city
We were provided with the original demo of the weather app:
We were provided with a starter html file which I only slightly updated with links and code for Bootstrap modals.
I built the files in JavaScript (using jQuery) and css (leveraging Bootstrap classes to be assigned dynamically by js).
The project was built with:
I have to say that it was a quite challenging assignment. I wanted to go beyond just the requirements and make sure that the visual aspects and the logic would approximate both the demo image and the real world. To achieve this, I searched for solutions across the web and sometimes leveraged AI.
When a user searches for a city, I wanted not only to remove unnecessary white spaces, but also make sure that the city name is always displayed in Proper Case. That is to say, if a user enters 'new york' or 'pArIS', these will be displayed as 'New York' and 'Paris' on the screen. To achieve this using jQuery, I used the code from this blog.
The OpenWeather API supplies the date in the format "YYYY-DD-MM hh-mm-ss" (eg. "2024-01-16 15:00:00"), whereas the demo image shows date in the format "DD/MM/YYYY". I used the following resources to achieve the date transformation:
- Rearrange date format using regex based on code snippet 6 from StackOverflow
- Extract just the day from the timestamp using a date object obtained using code from this article
When extracting weather icons from the API, I realized that the API had misalignment between the time in the timestamp and the day/night code. For example, for a timestamp "2024-01-17 09:00:00" it has "pod": "n" and "icon": "04n" ('n' stands for 'night'). I used the code in snippet 4 in this StackOverflow article to swap 'n' for 'd'.
I had an issue with multiple bindings on the event listener on buttons with search history. All my web research did not let me solve this problem. Finally, I turned to ChatGPT and it provided me with the best solution:
To extract the forecast data for the next few days, I wanted to focus on the array items related to midday, i.e. those that contained timestamp of '12:00:00'.
Initially I used an if statement but realized there should be a simpler way using .filter and .includes methods. However, as much as I tried to devise ways to combine them, I could not do it, and I didn't find any articles online with instructions.
Finally, I asked ChatGPT and received an answer which I used in my code (lines 117-118 in script.js):
I needed to find a way to prevent adding a button with a location name if the location name was invalid (eg. 'dfdfdfd' or 'Pariz'). I was stuck on it for quite some time, and has to consult support specialists from the Bootcamp. I raised the support ticket ask-297965 and the analyst (screen name nmendu) helped me figure it out.
My logic for extracting the records for midday had a flaw: if I check the weather in the morning, the free API provides an array with only 40 snapshots of forecast weather data, which excludes the midday of day 5. Since I do not include today's midday in the forecast, I was left with only 4 cards with forecast weather.
I discussed this with my tutor, Benicio Lopez and he helped me include a condition that checks the number of cards created, and extracts the last record in the forecast data (i.e. record #40) to be included as Day 5 forecast.
The project is now live.
The deployed page looks like this:
You can find the Day Planner app and its corresponding code here: