Skip to main content

Building a Weather App with JavaScript and Open Weather API

How I Built a Weather App using JavaScript and OpenWeather API

Have you ever wondered how weather apps work behind the scenes? In this blog, I’ll walk you through how I built a simple yet powerful weather app using HTML, CSS, JavaScript, and the OpenWeather API.

🧾 Prerequisites

  • Basic knowledge of HTML, CSS, and JavaScript
  • Code editor (like VS Code)
  • OpenWeather API key (free to generate)
  • Basic understanding of REST APIs

📁 Project Structure

weather-app/
├── index.html
├── style.css
├── script.js

✨ Features

  • 🌆 Search weather by city name
  • 🌡️ Display temperature, humidity, wind speed
  • 🌤️ Dynamic icon and weather description
  • 🌈 Background image changes based on weather
  • 🕔 5-day forecast using OpenWeather's Forecast API
  • 🔄 Reset button to clear UI
  • 📱 Responsive layout with Bootstrap

🔌 How It Works

The app connects to two endpoints from the OpenWeather API:

  • /weather – Gets current weather data
  • /forecast – Gets 5-day forecast in 3-hour intervals

When a user searches for a city:

  1. The current weather data is fetched and displayed
  2. The 5-day forecast is filtered to one result per day (at noon)
  3. The icon and background are updated dynamically

🖼️ Dynamic Background

Based on the weather type (like Clear, Rain, Clouds), the app changes the background image using Unsplash:


const backgroundImages = {
  Clear: "url('https://source.unsplash.com/1600x900/?sunny')",
  Rain: "url('https://source.unsplash.com/1600x900/?rain')",
  Clouds: "url('https://source.unsplash.com/1600x900/?cloudy')"
};

document.body.style.backgroundImage = backgroundImages[weatherMain] || defaultBg;

📄 Forecast Filter

To limit the forecast to one result per day (12:00pm):


const daily = forecastList.filter(item =>
  item.dt_txt.includes("12:00:00")
).slice(0, 5);

✅ What I Learned

  • How to consume public APIs with Axios
  • Dynamically updating UI with JavaScript
  • Handling errors and form validation
  • Filtering and slicing forecast data from JSON
  • Creating responsive designs with Bootstrap

🔗 Live Demo and Code

💬 What’s Next?

  • 🌓 Add dark mode toggle
  • 📍 Use Geolocation API for local weather
  • 📲 Turn it into a PWA for offline access

🎉 Final Words

This project helped me solidify key frontend concepts and API handling. If you're learning web development, building something real like this is one of the best ways to learn. Try adding your own features and make it your own!

🤔 What feature would you add to this app? Let me know in the comments!

Labels:

Comments

Post a Comment

Popular posts from this blog

How to Display Flash Messages in EJS using Node.js and Express

Displaying Flash Messages in EJS with Node.js and Express Flash messages are a great way to give users quick feedback — like "Login successful!" or "Please enter all fields!" . In this guide, you’ll learn how to implement them using: express-session connect-flash EJS templating 📦 Step 1: Install Required Packages npm install express express-session connect-flash ejs ⚙️ Step 2: Setup Express App and Middleware const express = require('express'); const session = require('express-session'); const flash = require('connect-flash'); const app = express(); // Set view engine app.set('view engine', 'ejs'); // Middleware app.use(express.urlencoded({ extended: true })); app.use(session({ secret: 'yourSecretKey', resave: false, saveUninitialized: true })); app.use(flash()); // Make flash messages available to all views app.use((req, res, next) => { res.lo...
Post a Comment
Read more

Realtime Device Tracker using Node.js, Socket.IO & Leaflet

Realtime Device Tracker using Node.js, Socket.IO & Leaflet In this tutorial, you’ll learn how to build a realtime location tracking application that uses the browser’s GPS, Socket.IO for live communication, and Leaflet.js to display users on a map. 🚀 Project Overview Backend: Node.js, Express.js, Socket.IO Frontend: HTML, Leaflet.js, Socket.IO client Features: Live GPS tracking, multi-user map, disconnect cleanup 📁 Folder Structure project-root/ ├── app.js ├── package.json ├── src/ │ ├── public/ │ │ ├── css/ │ │ │ └── style.css │ │ └── js/ │ │ └── script.js │ ├── routes/ │ │ └── routers.js │ ├── socket/ │ │ └── socketHandler.js │ └── views/ │ └── index.ejs 🧠 How It Works Each user shares their location using the browser's navigator.geolocation API. Location is sent to the server via Socket.IO . The server broadcasts each user’s position to all clien...
Post a Comment
Read more

How to Send Emails in Node.js using Nodemailer and Ethereal

How to Send Email in Node.js using Nodemailer Email functionality is essential in modern web applications. Whether you're sending confirmation emails, password resets, or notifications, Node.js with Nodemailer makes this simple. In this blog, we'll walk through setting up email sending using Node.js , Express , and Ethereal Email for testing. 🧾 Prerequisites Node.js installed Basic knowledge of Express.js Internet connection 📁 Project Structure project-folder/ ├── index.js ├── .env ├── package.json └── app/ └── controller/ └── emailSendController.js 📦 Step 1: Install Dependencies npm init -y npm install express nodemailer dotenv npm install --save-dev nodemon 🔁 Configure nodemon (Optional but Recommended) Update your package.json with a custom start script: "scripts": { "start": "nodemon index.js" } 🔐 Step 2: Create a .env File Create a .env file a...
Post a Comment
Read more