My Blog

Step 1: Set Up Your Project

—

by

Awais
in

Step 1: Set Up Your Project

Create a new folder for your project and add the following files:

  • index.html
  • styles.css
  • script.js

Step 2: HTML Structure

In index.html, add the following code:

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Weather App</h1>
        <input type="text" id="cityInput" placeholder="Enter city name">
        <button id="getWeatherBtn">Get Weather</button>
        <div id="weatherResult"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 3: CSS Styling

In styles.css, add some basic styles:

cssCopy codebody {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

.container {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input {
    padding: 10px;
    margin: 10px 0;
    width: 200px;
}

button {
    padding: 10px 20px;
}

#weatherResult {
    margin-top: 20px;
}

Step 4: JavaScript Logic

In script.js, write the logic to fetch weather data from the API:

javascriptCopy codeconst apiKey = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key

document.getElementById('getWeatherBtn').addEventListener('click', getWeather);

async function getWeather() {
    const city = document.getElementById('cityInput').value;
    if (!city) {
        alert('Please enter a city name');
        return;
    }

    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('City not found');
        
        const data = await response.json();
        displayWeather(data);
    } catch (error) {
        document.getElementById('weatherResult').innerText = error.message;
    }
}

function displayWeather(data) {
    const { name, main, weather } = data;
    const weatherResult = `
        <h2>Weather in ${name}</h2>
        <p>Temperature: ${main.temp}°C</p>
        <p>Condition: ${weather[0].description}</p>
    `;
    document.getElementById('weatherResult').innerHTML = weatherResult;
}

Step 5: Get Your API Key

  1. Sign up at OpenWeatherMap.
  2. Get your API key from the API keys section.
  3. Replace YOUR_API_KEY in the JavaScript code with your actual API key.

Step 6: Run Your App

Open index.html in your web browser. You should see a simple weather app where you can input a city name and get the current weather.Create a new folder for your project and add the following files:

  • index.html
  • styles.css
  • script.js

Step 2: HTML Structure

In index.html, add the following code:

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Weather App</h1>
        <input type="text" id="cityInput" placeholder="Enter city name">
        <button id="getWeatherBtn">Get Weather</button>
        <div id="weatherResult"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 3: CSS Styling

In styles.css, add some basic styles:

cssCopy codebody {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
}

.container {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input {
    padding: 10px;
    margin: 10px 0;
    width: 200px;
}

button {
    padding: 10px 20px;
}

#weatherResult {
    margin-top: 20px;
}

Step 4: JavaScript Logic

In script.js, write the logic to fetch weather data from the API:

javascriptCopy codeconst apiKey = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key

document.getElementById('getWeatherBtn').addEventListener('click', getWeather);

async function getWeather() {
    const city = document.getElementById('cityInput').value;
    if (!city) {
        alert('Please enter a city name');
        return;
    }

    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('City not found');
        
        const data = await response.json();
        displayWeather(data);
    } catch (error) {
        document.getElementById('weatherResult').innerText = error.message;
    }
}

function displayWeather(data) {
    const { name, main, weather } = data;
    const weatherResult = `
        <h2>Weather in ${name}</h2>
        <p>Temperature: ${main.temp}°C</p>
        <p>Condition: ${weather[0].description}</p>
    `;
    document.getElementById('weatherResult').innerHTML = weatherResult;
}

Step 5: Get Your API Key

  1. Sign up at OpenWeatherMap.
  2. Get your API key from the API keys section.
  3. Replace YOUR_API_KEY in the JavaScript code with your actual API key.

Step 6: Run Your App

Open index.html in your web browser. You should see a simple weather app where you can input a city name and get the current weather.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *