Day 10: Building a Weather App

Congratulations! You’ve learned variables, loops, DOM, events, and API calls. Today, we build a Real Application: A Weather Dashboard.

The HTML Structure

Imagine this structure (or create it in index.html):

<div class="app">
    <input type="text" id="cityInput" placeholder="Enter city name">
    <button id="searchBtn">Get Weather</button>
    <div id="result"></div>
</div>

The JavaScript Logic

We need to:

1. Listen for the button click.
2. Get the city name from input.
3. Fetch weather data from an API.
4. Display the result.

const apiKey = 'YOUR_API_KEY'; // (Mocking for this demo)
const searchBtn = document.getElementById('searchBtn');
const cityInput = document.getElementById('cityInput');
const resultDiv = document.getElementById('result');

// 1. Helper function to fetch data
// We'll simulate an API for this tutorial since real keys are private
async function fetchWeather(city) {
    // Simulate network delay
    await new Promise(r => setTimeout(r, 500));
    
    // Mock response logic
    if (city.toLowerCase() === 'london') return { temp: 15, condition: 'Rainy' };
    if (city.toLowerCase() === 'dubai') return { temp: 40, condition: 'Sunny' };
    
    // Default mock
    return { temp: 22, condition: 'Cloudy' };
}

// 2. Main Logic
searchBtn.addEventListener('click', async () => {
    const city = cityInput.value;
    if (!city) return alert("Please enter a city!");

    // Show loading state
    resultDiv.innerHTML = "Loading...";

    try {
        const data = await fetchWeather(city);
        
        // Update DOM
        resultDiv.innerHTML = `
            <h2>Weather in ${city}</h2>
            <p>Temperature: <strong>${data.temp}°C</strong></p>
            <p>Condition: ${data.condition}</p>
        `;
    } catch (error) {
        resultDiv.innerHTML = "Error fetching weather.";
    }
});

Why this matters?

This small app uses everything we learned:

• Variables (const city)
• DOM (innerHTML, value)
• Events (click)
• Async/Await (await fetchWeather)
• Conditionals (if (!city))

Conclusion

You have completed the JavaScript Fundamentals Series! 🎓

Recap:

• You went from console.log to building async web apps.
• You understand the DOM and how to manipulate it.
• You write modern, clean ES6+ code.

What’s Next?

• TypeScript: Add type safety to your JS (Check out our TypeScript Series).
• Frameworks: Learn React or Angular to build massive apps.

Keep coding, and welcome to the world of Web Development!