Capstone: Weather Dashboard

1What is a Weather Dashboard?✨

A Weather Dashboard is a web application that displays real-time weather information for various locations. It allows users to search for cities and view current weather conditions and forecasts, making it a practical and engaging project.

2Why Build a Weather Dashboard?🎯

• ✓ Utilizes API calls to fetch live data
• ✓ Implements user interaction with forms
• ✓ Enhances understanding of asynchronous JavaScript
• ✓ Combines skills from previous lessons into a complete project

3Setting Up Your Project💡

Start by creating an HTML file, a CSS file for styling, and a JavaScript file for functionality. Link them together so your JavaScript can control the web page.

4```html🚀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Weather Dashboard</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app"></div>
    <script src="script.js"></script>
</body>
</html>
```

5Fetching Weather Data🔍

Use the Fetch API to get data from a weather service like OpenWeatherMap. You'll need an API key, which you can obtain by signing up for their service.

6```javascript⭐

const apiKey = 'YOUR_API_KEY';
const getWeather = async (city) => {
    const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`);
    const data = await response.json();
    displayWeather(data);
};
```

7Displaying Weather Information🧩

Once you have the weather data, create a function to display it on your dashboard. Use DOM manipulation to present the information clearly.

8```javascript🎈

const displayWeather = (data) => {
    const weatherDiv = document.getElementById('app');
    weatherDiv.innerHTML = `
        <h2>${data.name}</h2>
        <p>Temperature: ${Math.round(data.main.temp - 273.15)}°C</p>
        <p>Condition: ${data.weather[0].description}</p>
    `;
};
```

9User Interaction✨

Add an input field and a button for users to search for a city. Use event listeners to trigger the weather data fetch when a user submits their request.

10```html🎯

<input type="text" id="cityInput" placeholder="Enter city">
<button id="searchBtn">Search</button>
```

11```javascript💡

document.getElementById('searchBtn').addEventListener('click', () => {
    const city = document.getElementById('cityInput').value;
    getWeather(city);
});
```

12What You'll Achieve🚀

• ✓ A fully functional weather app that fetches live data
• ✓ User-friendly interface for city searches
• ✓ Understanding of API interaction and data display
• ✓ A project that showcases your JavaScript skills and creativity!