DEV Community: CourtneyKerr

Building a Single Page Weather App with JavaScript

CourtneyKerr — Fri, 24 Jan 2025 13:33:59 +0000

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!

Building a Single Page Weather Application in JavaScript

CourtneyKerr — Tue, 26 Nov 2024 20:57:45 +0000

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

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.
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.

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.
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.

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!