DEV Community

Cover image for 🌤️ Weather App using JavaScript – API Project
Gaurav Mehra
Gaurav Mehra

Posted on

🌤️ Weather App using JavaScript – API Project

#javascript #webdev #api #opensource

Hey DEV Community! 👋

  • I'm excited to share a project I recently completed — a Weather Application built using HTML, CSS, and JavaScript.

  • This was my first real experience working with APIs, and I learned a lot about how to fetch and display real-time data dynamically on a webpage.

🔗 Live Demo
Check it out here 👉 https://weather-app-gaurav-s-projects-d25bef28.vercel.app

- 💻 GitHub Repository
Source code available here 👉 https://github.com/Gaurav-creater317/Weather-App

- 🚀 About the Project

  • The weather app allows users to:
  • Search for any city 🌍
  • Get real-time temperature 🌡️
  • View weather conditions with icons ☁️
  • See humidity and wind speed 💧🌬️
  • Handle errors like "city not found" ❌

- 🛠️ Technologies Used

  • HTML – Structure
  • CSS – Styling
  • JavaScript – App Logic
  • OpenWeatherMap API – Weather Data
  • Vercel – Deployment

🧪 Key Features

✅ Fetch weather by city name

✅ Display weather icon, temperature, and description

✅ Shows humidity and wind speed

✅ Error handling for invalid inputs

✅ Responsive design

- 🧠 What I Learned

  • This project helped me understand:
  • Working with fetch() and async/await .
  • Parsing and using JSON data .
  • Dynamically updating the DOM .
  • Handling API errors gracefully.
  • Deploying projects using Vercel .

📸 Screenshots

🔍 Sample Code Snippet

async function getWeather(city) {
  const response = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY&units=metric`
  );

  if (!response.ok) {
    showError("City not found!");
    return;
  }

  const data = await response.json();
  updateUI(data);
}
Enter fullscreen mode Exit fullscreen mode

- 💬 Final Thoughts

  • Building this weather app really boosted my confidence with JavaScript and API integration. 🌟
  • If you're just starting out with web development, I highly recommend trying out a project like this. It’s simple, useful, and gives you a hands-on experience working with real-world data.
  • Feel free to check out the app, explore the code, and let me know what you think. Feedback and suggestions are always welcome! 😊

*- Want help with your first API project? Drop a comment! Let’s connect and grow together 🚀
*

Top comments (0)