fbpx

Overview

In this blog, we’ve covered the step-by-step process of creating a weather-app using HTML,CSS and JavaScript. We started by setting up a new project  name weather-app. We make basic structure using HTML and JavaScript elements, and basic styling was applied for improved appearance by CSS. With this overview, you should be equipped to start creating your own weather app, tailored to your specific needs.

 

Step 1: Get an API Key

First, sign up for a free API key from OpenWeatherMap.

Step 2: Setting up the Environment.

We’ll start by setting up a project.

After creating project folder. We make a file and name it index.html.

Now copy paste the below given code in index.html.

				
					<!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">
        <button onclick="getWeather()">Get Weather</button>
        <div id="weatherResult">
            <h2 id="cityName"></h2>
            <p id="temperature"></p>
            <p id="description"></p>
            <p id="humidity"></p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 3: Creating a CSS file for styling.

Make a another file name style.css.

Open style.css and copy paste the below given code

				
					body {
    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: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

input {
    padding: 10px;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    margin-left: 10px;
    cursor: pointer;
}

#weatherResult {
    margin-top: 20px;
}

h2 {
    margin: 0;
    font-size: 24px;
}

p {
    margin: 5px 0;
}

NOTE: Link the CSS file to HTML using “<link rel=”stylesheet” href=”style.css” /> ” in HTML head section.

 

Step 4: Creating a JS file for detaling in music player.

 

Create a new file name script.js.

Open script.js and copy paste the below given code. 

 
				
					const apiKey = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key
const apiUrl = 'https://api.openweathermap.org/data/2.5/weather';

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

    const url = `${apiUrl}?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) {
        alert(error.message);
    }
}

function displayWeather(data) {
    document.getElementById('cityName').textContent = data.name;
    document.getElementById('temperature').textContent = `Temperature: ${data.main.temp} °C`;
    document.getElementById('description').textContent = `Description: ${data.weather[0].description}`;
    document.getElementById('humidity').textContent = `Humidity: ${data.main.humidity}%`;
}

NOTE: Link the JS file to HTML using “<script src=”script.js”></script> ” in the end of HTML Body section section.

 

Explanation:

HTML: Defines the structure of the web page, including an input field for the city name and a button to fetch weather data.

CSS: Provides basic styling for the app.

JavaScript:

  • Fetches weather data from the OpenWeatherMap API using the fetch function.
  • Parses and displays the weather data on the page.

Conclusion:

Creating weather app provides a powerful way to handle user input and interaction in web applications. With HTML, CSS and JavaScript declarative approach, managing form state and handling user events becomes more intuitive and efficient.

Remember, this is just a basic example. Depending on your project requirements, you might need to add validation, integrate with a backend service for form submission, or include additional features like dynamic form fields.

Feel free to experiment and expand upon this example to build more complex forms tailored to your specific needs. Happy coding!

Close Menu