Weather Dashboard Tutorial

Welcome to the Weather Dashboard tutorial! This guide will walk you through the process of creating a weather dashboard using our API. Whether you are a beginner or an experienced developer, this tutorial will help you get started.

Prerequisites

Before you begin, make sure you have the following prerequisites:

A basic understanding of HTML, CSS, and JavaScript.
A text editor or IDE of your choice.
An internet connection.

Getting Started

Set Up Your Project

Create a new directory for your project and open it in your text editor.
```
mkdir weather-dashboard
cd weather-dashboard
```

Create the HTML File

Create a new file named index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather Dashboard</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Weather Dashboard</h1>
    <div id="weather-container">
        <!-- Weather information will be displayed here -->
    </div>
    <script src="script.js"></script>
</body>
</html>

Create the CSS File

Create a new file named styles.css and add the following code:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
}

#weather-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

Create the JavaScript File

Create a new file named script.js and add the following code:

document.addEventListener('DOMContentLoaded', function() {
    const weatherContainer = document.getElementById('weather-container');

    // Fetch weather data from the API
    fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=YOUR_LOCATION')
        .then(response => response.json())
        .then(data => {
            const weather = data.current;

            // Create elements to display weather information
            const city = document.createElement('h2');
            city.textContent = weather.location.name;

            const temperature = document.createElement('p');
            temperature.textContent = `Temperature: ${weather.current.temp_c}°C`;

            const condition = document.createElement('p');
            condition.textContent = `Condition: ${weather.current.condition.text}`;

            const wind = document.createElement('p');
            wind.textContent = `Wind: ${weather.current.wind_kph} kph`;

            // Append elements to the weather container
            weatherContainer.appendChild(city);
            weatherContainer.appendChild(temperature);
            weatherContainer.appendChild(condition);
            weatherContainer.appendChild(wind);
        })
        .catch(error => {
            console.error('Error fetching weather data:', error);
        });
});

Replace YOUR_API_KEY with your actual API key and YOUR_LOCATION with the location you want to fetch weather data for.

Run Your Project

Open your browser and navigate to http://localhost:8080/. You should see your weather dashboard displaying the current weather information for the specified location.

For more information on how to create a weather dashboard, you can read our full guide on building a weather dashboard.