Web Dev II - Assignment 2: Async Weather Tracker

Course: Web Dev II (Advanced JS & React)
Author: Harsh Dev Jha - 2501010168

Overview

This is a simple Vanilla JavaScript web application that fetches and displays real-time weather data for any city in the world. It was designed strictly following the layout constraints and reference materials, built with HTML5, CSS3, and JavaScript—without the use of any external UI frameworks like Bootstrap or Tailwind.

The project relies on the free Open-Meteo API to gather coordinates, temperature, humidity, and wind-speed data using native browser fetch().

Features

• City Search: Users can enter a city name to get the current temperature, weather conditions, humidity, and wind speed.
• Asynchronous Data Handling: Uses async/await and try...catch blocks to make network requests without freezing the webpage.
• Visual Console (Event Loop): A built-in terminal UI at the bottom of the screen visually logs the exact execution order of the asynchronous functions in real-time, demonstrating the Call Stack, Microtask queue, and Macrotask queue parsing!
• Local Storage Integration: Every successful search is permanently saved into the browser's localStorage and mapped dynamically to history tags under the search bar. Clicking these orange tags re-triggers an instant fetch.

Event Loop & Call Stack Analysis

As required by the assignment constraints, I have built a visual "Console - Event Loop" window directly into the UI.

When you search for a city, watch the bottom console fill up dynamically:

1. ▶ Sync Start fires instantly.
2. The code schedules a setTimeout (Macrotask) and a Promise.then (Microtask).
3. ▶ Sync End fires, proving synchronous code resolves first.
4. ▶ Promise.then (Microtask) triggers before setTimeout, proving the JS Microtask queue has higher priority than the Macrotask queue.
5. The async function continues fetching and awaits the Web API ([ASYNC] tags) before resolving with the payload.

How to Run

1. Download this folder.
2. Open index.html in any modern web browser.
3. Search for a city like "Delhi" or "London".
4. Watch the Event Loop render directly in the UI!