Introduction
As part of Flatiron School's Phase-1 Final Project, I was tasked with creating a single-page web application using only HTML, CSS, and JavaScript while also incorporating a public API to fetch and display real-time data dynamically.
For this project, I decided to build a Weather Application titled "Your Weather Forecast". The goal was to design a responsive and user-friendly application that provides real-time weather updates along with an accurate forecast for any city across the globe. I found this project to be just as rewarding as it was challenging, allowing me to apply the knowledge I gained from Phase-1 of this course by building a personal tool that is simple and practical to work with.
Project Requirements:
1.) The application must run entirely on a single page—no redirects or reloads allowed—and fetch data from a public API or a local db.json file.
2.) he API must return at least five different objects, each containing at least three unique attributes.
3.) The application must include at least three unique event listeners, each listening for a different type of event and added using the .addEventListener() method.
4.) At least one instance of array iteration must be implemented.
*App Features: *
1.) Real-Time Weather Updates
When a user enters a city name, the application fetches real-time weather data specific to that location. The page dynamically displays:
- Current temperature (in Celsius).
- Humidity and wind speed.
- A weather condition icon (e.g., clouds, sun, rain).
- Geographic coordinates (latitude and longitude). 2.) 5-Time-Point Forecast In addition to current weather updates, the app provides a 5-time-point weather forecast, showing predictions for the next 15 hours in 3-hour intervals. Each forecast includes:
- Date and time of the forecast.
- Predicted temperature (in Celsius).
- Weather condition. 3.) Dynamic Updates This Weather Application ensures quality user experience by dynamically fetching and displaying weather data without any refresh or reloads from the page. Any changes in weather information is updated instantly. 4.) Error Handling This application The app gracefully handles invalid input by displaying an error message if a city cannot be found. Users are also given feedback for any incorrect or empty inputs.
How I met the requirements
1.) Single Page Application:
The entire application operates on a single page. All interactions—such as searching for a city or viewing the weather forecast—are handled through JavaScript, which dynamically updates the DOM based on user input and API responses.
2.) Incorporating five different objects each with at least three of their own attributes.
This application incorporates five key objects:
1.) Main Object (Weather Details):
-Attributes: temp, humidity, pressure
-Role: Provides real-time weather data, including
temperature, humidity levels, and atmospheric
pressure.
2.) Wind Object (Wind Information):
-Attributes: speed, deg, gust
-Role: Captures wind speed, direction, and gusts
for the selected city.
3.) Weather Object (Weather Description):
-Attributes: main, description, icon
-Role: Describes the overall weather condition,
such as "Clear" or "Rain," and includes an icon
for visual representation.
4.) Custom City Object (cityInfo):
-Attributes: name, coordinates, timezone
-Role: Represents the city information, including
its name, geographic coordinates, and timezone
offset.
5.) Forecast Object (Each Entry in data.list):
-Attributes: date, temperature, condition
-Role: Displays detailed 3-hourly weather
forecasts for the next 15 hours, retrieved from
the API.
3.) Three unique Event Listeners.
The app uses three distinct event listeners, each with its own callback function:
-Search Button Click: Fetches weather data
when the "Search" button is clicked.
-"Enter" Keypress: Triggers the search
functionality when the "Enter" key is pressed.
-Input Event: Dynamically updates a city preview
as the user types in the search field.
4.) At least one instance of Array Iteration.
The forecast section uses the .map() method to iterate over the data.list array from the OpenWeatherMap API and extract forecast data.
Challenges and Solutions
1.) Handling APIs
Understanding how to fetch data asynchronously and handle API responses was initially challenging. By carefully reading the OpenWeatherMap documentation and practicing with fetch and async/await, I gained confidence in working with APIs.
2.) Styling
CSS has always been a weak spot for me. However, this project pushed me to focus on creating a visually appealing interface, resulting in a design that is both functional and attractive.
3.) Error Handling
Implementing robust error handling was another challenge. I ensured that the app could gracefully handle invalid city names or empty inputs, enhancing the user experience.
Conclusion
This project has given me confidence in using techniques such as asynchronous programming, handling APIs, and responsive design. This Weather Application has allowed me to put to use all the lessons and skills I've learned throughout Phase-1.
If you'd like to explore the code or provide feedback, feel free to check out the repository:
https://github.com/CourtneyKerr19/Your_Weather_Forecast
Thanks for reading!
Top comments (0)