Weather App Using HTML CSS and JS: Build a Dynamic Weather Forecast Application

The weather app is a web application that utilizes the OpenWeatherMap API to fetch and display real-time weather information for a specific location. The app presents essential weather details including actual temperature, feels like temperature, city name, weather description, humidity, and wind speed.

HTML(index.html)

<html>

<head>
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <title>Weather App</title>
      <link rel="stylesheet" href="style.css">
    </head>

<body>
      <div class="card">
        <div class="search">
          <input type="text" placeholder="Enter City Name" spellcheck="false">
          <button><img src="images/search1.gif">Search</button>
        </div>
        <div class="weather">
          <img src="images/wea.gif" class="weather-icon">
          <h1 class="temp">Temperature</h1>
          <h2 class="city">City</h2>
          <h1 class ="description">Description</h1>
          <div class="details">
            <div class="col">
              <img src="images/humidity.gif">
              <div>
                <p class="humidity">0%</p>
                <p>Humidity</p>
              </div>
            </div>
            <div class="col">
              <img src="images/wind.gif">
              <div>
                <p class="wind">0km/h</p>
                <p>Wind Speed</p>
              </div>
            </div>
            <div class="col">
              <img src="images/hot.gif">
              <div>
                <p class="feels_like"></p>
                <p>Feels Like</p>
              </div>
            </div>
          </div>
        </div>
        </div>
      <script src="script.js"></script>
    </body>

</html>

CSS(style.css)

* {
        margin: 0;
        padding: 0;
        font-family: 'Popins', sans-serif;
        box-sizing: border-box;
      }

body {
        background-color: #4a4187;
        min-height: 100vh;
        background-image: url('images/weather.jpg');
      }

.card {
        width: 80%;
        max-width: 560px;
        background: linear-gradient(135deg, rgb(12, 76, 77), #4a4187);
        color: #fff;
        margin: 100px auto 0;
        border-radius: 10px;
        padding: 40px 35px;
        text-align: center;
        max-height: 100%;
        opacity: 0.6;
      }

.search {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

.search input {
        border: 0;
        outline: 0;
        background: #ebfffc;
        color: #555;
        padding: 10px 25px;
        height: 60px;
        border-radius: 30px;
        flex: 1;
        margin-right: 16px;
        font-size: 18px;
      }

.search button {
        outline: 0;
        background: transparent;
        width: 60px;
        height: 60px;
        cursor: pointer;
        font-size: 1.2em;
        color: cornsilk;
        border-radius: 10px;
      }

.search button img {
        width: 60px;
      }

.weather-icon {
        width: 170px;
        margin-top: 50px;
        grid-template-columns: repeat(1,3fr);
        background: transparent;
      }
      .weather h1 {
        font-size: 50px;
        font-weight: 300;
      }
      .h3{
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 300;
        font-size: 20px;
        vertical-align: bottom;
      }
      .weather h2 {
        font-size: 40px;
        font-weight: 400;
        margin-top: -10px;
      }

.wf {
        width: 100px;
        margin-top: 70px;
      }

.details {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        margin-top: 50px;
      }

.col {
        display: flex;
        align-items: center;
        text-align: left;
      }

.col img {
        width: 40px;
        margin-right: 10px;
      }
      .humidity,
      .wind,
      .feels_like{
        font-size: 25px;
        margin-top: -6px;
      }

JS(script.js)

const apiKey = 'YOUR_API_KEY_HERE'; // Replace with your API key
      const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";
      const searchBox = document.querySelector(".search input");
      const searchBtn = document.querySelector(".search button");
      const weatherIcon = document.querySelector(".weather-icon");
      async function checkWeather(city) {

searchBtn.addEventListener("click", () => {
        checkWeather(searchBox.value);
      })

Output

Technologies Used

JavaScript: Makes API requests to OpenWeatherMap and updates the DOM based on the retrieved data.

Key Features

User Interface (UI)

The UI consists of sections to display weather information such as temperature, city name, weather description, humidity, and wind speed.

OpenWeatherMap API Integration

The app utilizes the OpenWeatherMap API to retrieve weather data based on user-specified location.

Dynamic Weather Data Display

Upon receiving the weather data from the API, JavaScript dynamically updates the DOM to display the fetched weather information in the designated sections of the UI.

Weather Information Displayed

Temperature

Actual temperature value in Celsius or Fahrenheit. "Feels like" temperature value (perceived temperature based on factors like humidity and wind).

Location

Weather Description

Textual description of the current weather condition (e.g., clear sky, cloudy, rainy).

Humidity

Wind Speed

Project Structure

HTML (index.html)

CSS (styles.css)

JavaScript (script.js)

Processes the retrieved JSON data and updates the DOM with the weather information.

Workflow

User Interaction

Users input a location (e.g., city name) into a search input field on the webpage.

API Request

JavaScript triggers an API request to OpenWeatherMap, passing the user-specified location as a parameter.

Weather Data Display

Upon receiving the API response (weather data in JSON format), JavaScript parses the data and updates the UI with the fetched weather information.

Enhancements (Optional)

Enhance the UI with additional features such as background images reflecting current weather conditions or interactive elements for unit conversion (Celsius to Fahrenheit).

Conclusion

The weather app project demonstrates the integration of HTML, CSS, and JavaScript with a third-party API (OpenWeatherMap) to create a functional and interactive web application for displaying real-time weather information. It provides hands-on experience in web development and API integration.

A simple Weather App Using HTML CSS and JS

By Neelkanth

Project Overview

HTML(index.html)

CSS(style.css)

JS(script.js)

Output

Technologies Used

Key Features

User Interface (UI)

OpenWeatherMap API Integration

Dynamic Weather Data Display

Weather Information Displayed

Temperature

Location

Weather Description

Humidity

Wind Speed

Project Structure

HTML (index.html)

CSS (styles.css)

JavaScript (script.js)

Workflow

User Interaction

API Request

Weather Data Display

Enhancements (Optional)

Conclusion

A simple Weather App Using HTML CSS and JS By Neelkanth

Project Overview

HTML(index.html)

CSS(style.css)

JS(script.js)

Output

Technologies Used

Key Features

User Interface (UI)

OpenWeatherMap API Integration

Dynamic Weather Data Display

Weather Information Displayed

Temperature

Location

Weather Description

Humidity

Wind Speed

Project Structure

HTML (index.html)

CSS (styles.css)

JavaScript (script.js)

Workflow

User Interaction

API Request

Weather Data Display

Enhancements (Optional)

Conclusion

A simple Weather App Using HTML CSS and JS

By Neelkanth