(Weather App )=>{Building a Weather App Using JavaScript – My Learning Journey...}

Introduction

Today, I explored some exciting concepts in JavaScript by creating a simple Weather Web Application. My goal was to learn how to get data from another web application (API) and use it effectively in a real project.

This blog shares what I learned and how I applied those concepts using JavaScript features like async, await, fetch, and axios.

---

What I Learned (With Code)

During this project, I worked with asynchronous JavaScript and data fetching from APIs. Here are the key concepts I learned:

---

async & await

These help write asynchronous code in a clean and readable way.

🔸 Example:

async function getData() {
  let response = await fetch('https://api.example.com/data');
  let data = await response.json();
  console.log(data);
}
getData();

• async makes a function return a promise.
• await pauses the code until the promise resolves.

---

fetch()

A built-in browser method to make HTTP requests.

🔸 Example:

fetch('https://api.example.com/weather')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log("Error:", error));

• Great for basic API calls.
• Requires manual JSON parsing using .json().

---

axios

A promise-based HTTP client that's simpler and more powerful than fetch.

🔸 Example:

import axios from 'axios';

axios.get('https://api.example.com/weather')
  .then(response => console.log(response.data))
  .catch(error => console.log("Error:", error));

• Automatically parses JSON.
• Cleaner syntax.
• Supports advanced features like interceptors, timeouts, etc.

---

Project Overview: Weather Web App

The app I built allows users to enter a city name, then fetches the current weather information for that city using an external API like OpenWeatherMap.

Features:

• Takes user input (city name)
• Sends a GET request to the weather API

• Displays weather data like:

  • City name
  • Temperature
  • Weather description

Weather Web Application (Screenshot)

---

Technologies Used

• HTML & CSS – For layout and styling
• JavaScript (ES6+) – For app logic
• Fetch API & Axios – For making HTTP requests
• Weather API – To get live weather data

---

My Experience

This project helped me:

• Understand asynchronous JavaScript (async/await)
• Work with real-world APIs and fetch live data
• Build a small but useful web application from scratch

It was a fun, hands-on way to reinforce my understanding of core JavaScript concepts while applying them in a real-world scenario.

---