Creating a comprehensive weather app involves multiple steps, including fetching data from a weather API, designing the user interface, and handling user interactions. Here, we'll provide a step-by-step guide with code blocks on how to build a simple weather app using HTML, CSS, and JavaScript.

Step 1: Set Up Your Environment

Before you start coding, make sure you have a code editor (e.g., Visual Studio Code) and a web browser installed on your computer.

Step 2: Design the HTML Structure

Create an HTML file (e.g., index.html) and define the basic structure of your weather app. You can use the following HTML code as a starting point:

<!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="locationInput" placeholder="Enter a city">
        <button id="searchButton">Search</button>
        <div class="weather-info">
            <h2 id="location"></h2>
            <p id="temperature"></p>
            <p id="description"></p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 3: Style Your App

Create a CSS file (e.g., styles.css) to style your weather app. Here's a basic CSS code example:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.container {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.5); /* Set the background color to be transparent */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Adjust the alpha value here for the box shadow transparency */
    margin-top: 105px;
}

h1 {
    font-size: 24px;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.weather-info {
    margin-top: 20px;
}

/* Add more styles as needed */

Step 4: Fetch Weather Data with JavaScript

Create a JavaScript file (e.g., script.js) to fetch weather data from a public weather API. We'll use the OpenWeatherMapAPI as an example. You'll need to sign up for a free API key from OpenWeatherMap.

const apiKey = 'YOUR_API_KEY';
const apiUrl = 'https://api.openweathermap.org/data/2.5/weather';

const locationInput = document.getElementById('locationInput');
const searchButton = document.getElementById('searchButton');
const locationElement = document.getElementById('location');
const temperatureElement = document.getElementById('temperature');
const descriptionElement = document.getElementById('description');

searchButton.addEventListener('click', () => {
    const location = locationInput.value;
    if (location) {
        fetchWeather(location);
    }
});

function fetchWeather(location) {
    const url = `${apiUrl}?q=${location}&appid=${apiKey}&units=metric`;

    fetch(url)
        .then(response => response.json())
        .then(data => {
            locationElement.textContent = data.name;
            temperatureElement.textContent = `${Math.round(data.main.temp)}°C`;
            descriptionElement.textContent = data.weather[0].description;
        })
        .catch(error => {
            console.error('Error fetching weather data:', error);
        });
}

Step 5: Get Your API Key

Sign up for a free API key from OpenWeatherMap (or another weather API provider of your choice). Replace 'YOUR_API_KEY' in the JavaScript code with your actual API key.

Step 6: Test Your Weather App

Open your HTML file (index.html) in a web browser, enter a city name, and click the "Search" button. You should see the weather information displayed on the page.

I've added the background picture to the body element in the CSS style to beautify the weather app. Here's the updated code snippet with the background image included:

body {
  font-family: Arial, sans-serif;
    /* background-color: #f0f0f0; */

  background-image: url('weather1.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh; /* Set the height to fill the viewport */
  margin: 0; /* Remove default margin */
  padding: 0; 
}

Step 7: Deploy Your Weather App

To share your weather app with others, you can deploy it on a web hosting platform or use a service like GitHub Pages.

This is a basic example of a weather app. You can further enhance it by adding features like icons, more detailed weather information, and a five-day forecast. You can also improve the styling to make it more visually appealing.

LinkedIn Account : LinkedIn
Twitter Account: Twitter
Credit: Graphics sourced from Hackr.io

Building a Complete Weather App from Scratch with HTML, CSS, and JavaScript: A Step-by-Step Guide