Web Development Internship Project – Week 3

🗓️ Month 2: Project Phase | Week 3 Project

Welcome to Week 3 of your project journey in the Naman Digital Web Development Internship!
This week, we’re diving into APIs and asynchronous JavaScript by building a real-world app: a Weather App using OpenWeatherMap API.

🎯 Project Title: “Live Weather Web App using API”

📌 Objective:

Create a simple web application that allows users to search for any city and view the current weather information (temperature, condition, humidity, etc.) using data fetched from a live API.

This will strengthen your understanding of API integration, async/await, fetch(), and error handling in JavaScript.

🛠️ Tech Stack:

🗂️ Suggested Folder Structure:

weather-app/
│
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── assets/
    └── (icons, background images)

✅ Functional Requirements:

🔍 City Search

  • Input field to enter a city name
  • Button to trigger the search
  • Display weather info of the city searched

🌦️ Display Weather Data

  • Temperature (°C)
  • Weather condition (e.g., Sunny, Cloudy)
  • Humidity (%)
  • Wind Speed (km/h)
  • Icon for weather condition

⚠️ Error Handling

  • Show a message if the city is not found or API fails

💡 Bonus Features (Optional for Extra Credit):

  • Auto-detect user’s location using Geolocation API
  • Show a 5-day forecast
  • Add background image based on weather condition
  • Store last searched city in localStorage

🖼️ UI Tips:

  • Use card-style layout
  • Add weather icons from OpenWeatherMap or custom SVGs
  • Use gradients and animations for better look

🧪 Sample API Call:

javascriptCopyEdithttps://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY&units=metric

📤 Submission Instructions:

  1. Upload your project to GitHub or Google Drive
  2. Share the live project link and repo in the submission form provided in the Telegram group

📅 Deadline:

Submit this project by a Week

📘 Learning Outcomes:

  • Using APIs and handling JSON data
  • Writing asynchronous code with fetch() and async/await
  • Building dynamic content on the web
  • Handling user input and errors

✅ Project Checklist:

FeatureRequired
City-based weather search✅
Weather data display✅
Responsive layout✅
API integration✅
Error handling✅

🚀 Keep Pushing Forward!

This is your first step toward building real-time data-driven web apps. Next week, we’ll build something even more powerful—stay tuned!

Leave a Comment