Project 2 Weather App with API
javascript
const API_KEY = “YOUR_API_KEY”; // Get free key at openweathermap.org
async function getWeather(city) {
try {
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;
const response = await fetch(url);
if (!response.ok) throw new Error(“City not found!”);
const data = await response.json();
document.querySelector(“#city-name”).textContent = data.name;
document.querySelector(“#temperature”).textContent = `${Math.round(data.main.temp)}°C`;
document.querySelector(“#description”).textContent = data.weather[0].description;
document.querySelector(“#humidity”).textContent = `Humidity: ${data.main.humidity}%`;
document.querySelector(“#wind”).textContent = `Wind: ${data.wind.speed} m/s`;
} catch (error) {
document.querySelector(“#error”).textContent = error.message;
}
}
document.querySelector(“#search-btn”).addEventListener(“click”, () => {
let city = document.querySelector(“#city-input”).value.trim();
if (city) getWeather(city);
});
Project Difficulty Chart
|
Project |
Skills Used |
Difficulty |
|
To-Do List |
DOM, Events, Arrays, Local Storage |
⭐⭐ |
|
Calculator |
DOM, Events, Math, Functions |
⭐⭐ |
|
Quiz App |
Arrays, Objects, Loops, Events |
⭐⭐⭐ |
|
Weather App |
Fetch, async/await, JSON, API |
⭐⭐⭐ |
|
Full Dashboard |
Everything combined |
⭐⭐⭐⭐⭐ |
Topic 17 — Final JavaScript Mastery Project
Final Project — Student Dashboard App
Build a complete Single Page Application (SPA) that combines everything.
Features to Build:
- Login screen — validate username/password, save session to Local Storage
- Dashboard with student name, score, and animated progress bar
- To-Do task manager with add, complete, and delete
- Quiz section — 10 questions with countdown timer and score tracking
- Dark mode toggle — preference saved to Local Storage
- Fetch and display live data from a free API
- Fully responsive layout using CSS Grid and Flexbox
- Smooth CSS animations triggered by JavaScript
Final Project Requirements Checklist
|
Requirement |
JavaScript Concept |
|
Login & session management |
Local Storage, Conditions |
|
Dynamic task list |
DOM, Arrays, Events |
|
Countdown timer |
setInterval, Functions |
|
Fetch live data |
Fetch API, async/await, JSON |
|
Dark mode with memory |
classList.toggle, Local Storage |
|
Score tracking |
Variables, Objects, Math |
|
Form validation |
Events, Error Handling |
|
Page navigation |
classList, show/hide sections |
What to Learn After JavaScript
- React.js — Build powerful component-based UIs (most in-demand skill)
- Node.js — Use JavaScript on the server side too
- TypeScript — JavaScript with types — used in big companies
- Next.js — Full-stack React framework — build complete apps
- Git & GitHub — Version control — work in teams
“JavaScript is not just a programming language — it is a superpower. With JavaScript, you can build anything you can imagine: websites, apps, games, servers, and even AI tools.
You started as a complete beginner. Now you understand variables, functions, the DOM, APIs, and how to build real projects.
The world needs more great developers. Keep coding every day. Build projects. Make mistakes. Learn from them. Grow.
You have got this!”