Weather App

https://umutweatherapp.netlify.app/

Project Purpose

The primary objective of this project is to enhance and demonstrate my skills in working with APIs by developing a web application that fetches and displays weather data from the OpenWeatherMap API using the axios library and async/await for API requests. This project serves as a practical application to showcase my proficiency in using axios, async/await, and fetch for API requests. The application provides weather information based on the user's location and allows searching for weather data of a specific city.

Project Skeleton

(folder)

|----assets
|----img
|----LICENSE
|----project.gif
|----app.js
|----index.html
|----style.css
|----readme.md

Outcome

Technologies Used

• HTML: Used for structuring the content and layout of the application.
• CSS: Employed for styling and enhancing the visual aspects of the app.
• Bootstrap: Integrated for responsive design and layout components.
• JavaScript: Implemented for handling API requests and displaying data using axios and async/await. Key JavaScript features include:
  • Fetching weather data from the OpenWeatherMap API using axios
  • Using async/await for asynchronous operations
  • Handling errors and displaying error messages to the user
  • Using navigator.geolocation API to get user's location
  • Displaying weather information based on user's location and input city
  • Language selection feature (English and German) using API support

APIs Used

• OpenWeatherMap API: Provides weather information based on location and input city.
  • API link: OpenWeatherMap API

At the end of the project, will be able to;

This project has significantly contributed to my understanding and mastery of working with APIs in JavaScript. By developing this weather application, I have gained practical experience in making asynchronous API requests, handling geolocation data, and dynamically updating the DOM with the fetched data. Additionally, I have improved my ability to handle errors and provide a responsive and user-friendly interface.

🌦️ Happy Coding! ☔