Building a Single Page Weather Application in JavaScript

Introduction
To finally close off Phase-1 of Flatiron School's Software Engineering curriculum, we were assigned to create a single-page web application using only HTML, CSS, and JavaScript, as well as incorporating a public API that would provide the data for our webpage.

For my project, I decided to create my own weather app titled, 'Today's Weather Forecast'. While the project itself was admittedly a bit basic, it was a fun challenge to take on. The goal was to build a user-friendly, responsive application that provided real-time weather updates and a detailed forecast for any city in the world.

Project Requirements
The project came with several requirements, each reinforcing fundamental concepts and lessons that were taught throughout Phase-1:

The application must run entirely on a single page. No redirects or reloads are allowed, and data must come from a public API or a db.json file.
The API or db.json file must return at least five different objects, each containing at least three attributes.
All client and API interactions should be handled asynchronously, using JSON as the communication format.
The project must use at least three unique event listeners, each listening for a different type of event, added using the addEventListener() method. Each event listener must have its own unique callback.
The application must implement at least one instance of array iteration.

I personally found the implementation on the API to be the most challenging, partially due to my own indecisiveness but also because the concept just felt the most foreign to me. After some exploring however, I found that API implementation was actually one of the easier aspects of this project.

Features of 'Today's Weather Forecast':

Real-Time Weather Updates
When the user enters a city name, the application will return real-time weather data specific to that location. The front page will display the current temperature in celsius, a brief weather description, and an icon to visually represent the forecast.

3-Hourly Forecast:
The application also provides a 24-hour forecast in 3-hour intervals. This section displays to the user both the current time of day and the predicted temperature in celsius.

Dynamic Updates:
All data is dynamically fetched and displayed without reloading the page, ensuring a seamless user experience.

How I Met the Requirements

1. Single Page Application
   This weather application operates entirely on a single page. When a user searches for a city, JavaScript fetches the required data, clears the old content, and dynamically updates the page with the new information—all without redirects or reloads.

2. Five Objects with Attributes
   The following objects were implemented:

1.) City Object:
Attributes: Includes name, latitude, and longitude.

2.) Weather Object:
Attributes: Includes temperature, description, and icon.

3.) Forecast Object:
Attributes: Includes time, temperature, and icon.

4.) DateTime Object:
Attributes: Includes date, time, and day.

5.) DOM Element Object:
Attributes: Includes id, type, and content.

Each object played a role in structuring the data and ensuring modularity.

1. Asynchronous API Handling
   Using the fetch API, the app retrieves real-time weather and forecast data from the OpenWeather API. All data interactions use JSON, meeting the project requirements.

2. Three Unique Event Listeners
   The app incorporates three distinct event listeners:

Click Event: When users click the "Search" button, it fetches weather data.
Keypress Event: When the "Enter" key is pressed in the input field, it triggers the same weather-fetching functionality.
Mouseover Event: When the user hovers over the weather icon, additional information (e.g., "Data provided by OpenWeatherMap") is displayed dynamically.

1. Array Iteration The forecast section uses the forEach method to dynamically create HTML elements for each 3-hour forecast.

Challenges and Solutions
Some challenges I encountered during this project was understanding how to handle asynchronous operations while fetching data from the OpenWeather API, as well as understanding the API in itself and how it differs from a db.json file.
Styling the app was another big challenge for me as CSS has been a weak spot I tend not to focus on in favor of dealing with more daunting and technical concepts.
With practice, however, these concepts didn't seem as monstrous and while I know my code is far from perfect, I feel a lot more confident in my skills as a developer after tackling these challenges.

Conclusion
This project not only solidified my understanding of JavaScript but also taught me valuable lessons about perseverance, problem-solving, and the importance of clean, modular code.

I hope you enjoy exploring the application as much as I enjoyed building it. Feel free to share your feedback or suggestions for improvement—I’d love to hear your thoughts!

If you'd like to take a look at the source code for this project, you can access it in this repository: https://github.com/CourtneyKerr19/Todays_Weather_Forecast

Thank you for reading!

The above is the detailed content of Building a Single Page Weather Application in JavaScript. For more information, please follow other related articles on the PHP Chinese website!