Close Menu
    JavaScript

    How to make Weather App using HTML CSS & JavaScript

    Coding StellaBy Updated:No Comments7 Mins Read

    Hey there! Let’s make a simple Weather App using HTML, CSS, and JavaScript. Whether you’re a coding pro or just starting, this tutorial is perfect for creating a handy weather-checker.

    We’ll use HTML for the structure, CSS for a clean look, and JavaScript for some magic. No need for anything complex – just straightforward coding to bring the weather info right to you.

    Why a Weather App? Well, it’s practical and cool! So, let’s dive into the code, mix HTML, CSS, and JavaScript, and create a Weather App that’s easy and fun.

    Ready to make your own Weather App? Let’s get started on this simple coding adventure!

    HTML :

    This HTML document sets up a weather app interface. It includes sections for user input, weather display, and additional details. The input section allows users to enter a city name or get their device’s location. The weather section displays temperature, weather conditions, location, “feels like” temperature, and humidity. The JavaScript file likely handles fetching and displaying weather data.

    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Weather App using JS</title>
  <link rel='stylesheet' href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="wrapper">
  <header><i class='bx bx-left-arrow-alt'></i>Weather App</header>
  <section class="input-part">
    <p class="info-txt"></p>
    <div class="content">
      <input type="text" spellcheck="false" placeholder="Enter city name" required>
      <div class="separator"></div>
      <button>Get Device Location</button>
    </div>
  </section>
  <section class="weather-part">
    <img src="" alt="Weather Icon">
    <div class="temp">
      <span class="numb">_</span>
      <span class="deg">°</span>C
    </div>
    <div class="weather">_ _</div>
    <div class="location">
      <i class='bx bx-map'></i>
      <span>_, _</span>
    </div>
    <div class="bottom-details">
      <div class="column feels">
        <i class='bx bxs-thermometer'></i>
        <div class="details">
          <div class="temp">
            <span class="numb-2">_</span>
            <span class="deg">°</span>C
          </div>
          <p>Feels like</p>
        </div>
      </div>
      <div class="column humidity">
        <i class='bx bxs-droplet-half'></i>
        <div class="details">
          <span>_</span>
          <p>Humidity</p>
        </div>
      </div>
    </div>
  </section>
</div>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>

    CSS :

    The provided CSS code defines the styling for a web page. It sets the font family, background, colors, and layout for various elements. It also includes styles for input fields, buttons, weather display, and more. The code uses flexbox for layout and applies various visual effects like box shadow and transitions.

    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(180deg, #0f0f0f 50%, #a12a59 50%);
  color: #fff;
}

::selection {
  color: #141414;
  background: #fff;
}

.wrapper {
  width: 400px;
  background: #1f1f1f;
  border-radius: 7px;
  border: 1px solid #fff;
  box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}

.wrapper header {
  display: flex;
  font-size: 21px;
  font-weight: 500;
  color: #dbc025;
  padding: 16px 15px;
  align-items: center;
  border-bottom: 1px solid #333;
}

header i {
  font-size: 0em;
  cursor: pointer;

  margin-right: 8px;
}

.wrapper.active header i {
  margin-left: 5px;
  font-size: 30px;
}

.wrapper .input-part {
  margin: 20px 25px 30px;
}

.wrapper.active .input-part {
  display: none;
}

.input-part .info-txt {
  display: none;
  font-size: 17px;
  text-align: center;
  padding: 12px 10px;
  border-radius: 7px;
  margin-bottom: 15px;
}

.input-part .info-txt.error {
  color: #ff5252;
  display: block;
  background: #1f1f1f;
  border: 1px solid #ff5252;
}

.input-part .info-txt.pending {
  color: #5362b8;
  display: block;
  background: #1f1f1f;
  border: 1px solid #5362b8;
}

.input-part :where(input, button) {
  width: 100%;
  height: 55px;
  border: none;
  outline: none;
  font-size: 18px;
  border-radius: 7px;
}

.input-part input {
  text-align: center;
  padding: 0 15px;
  border: 1px solid #333;
}

.input-part input:is(:focus, :valid) {
  border: 2px solid #dbc025;
}

.input-part input::placeholder {
  color: #666;
}

.input-part .separator {
  height: 1px;
  width: 100%;
  margin: 25px 0;
  background: #333;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.separator::before {
  content: "or";
  color: #666;
  font-size: 19px;
  padding: 0 15px;
  background: #1f1f1f;
}

.input-part button {
  color: #fff;
  cursor: pointer;
  background: #5362b8;
  transition: 0.3s ease;
}

.input-part button:hover {
  background: #525d9c;
}

.wrapper .weather-part {
  display: none;
  margin: 30px 0 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.wrapper.active .weather-part {
  display: flex;
}

.weather-part img {
  max-width: 125px;
}

.weather-part .temp {
  display: flex;
  font-weight: 500;
  font-size: 72px;
}

.weather-part .temp .numb {
  font-weight: 600;
}

.weather-part .temp .deg {
  font-size: 40px;
  display: block;
  margin: 10px 5px 0 0;
}

.weather-part .weather {
  font-size: 21px;
  text-align: center;
  margin: -5px 20px 15px;
}

.weather-part .location {
  display: flex;
  font-size: 19px;
  padding: 0 20px;
  text-align: center;
  margin-bottom: 30px;
  align-items: flex-start;
}

.location i {
  font-size: 22px;
  margin: 4px 5px 0 0;
}

.weather-part .bottom-details {
  display: flex;
  width: 100%;
  justify-content: space-between;
  border-top: 1px solid #333;
}

.bottom-details .column {
  display: flex;
  width: 100%;
  padding: 15px 0;
  align-items: center;
  justify-content: center;
}

.column i {
  color: #43affc;
  font-size: 40px;
}

.column.humidity {
  border-left: 1px solid #333;
}

.column .details {
  margin-left: 3px;
}

.details .temp,
.humidity span {
  font-size: 18px;
  font-weight: 500;
  margin-top: -3px;
}

.details .temp .deg {
  margin: 0;
  font-size: 17px;
  padding: 0 2px 0 1px;
}

.column .details p {
  font-size: 14px;
  margin-top: -6px;
}

.humidity i {
  font-size: 37px;
}

    JavaScript:

    The provided JavaScript code sets up a weather application that allows users to input a city name or use geolocation to fetch weather details from the OpenWeatherMap API. It includes event listeners for user input and geolocation button clicks, as well as functions to handle API requests, fetch data, and display weather details.

    The code also handles different weather conditions by displaying corresponding weather icons and updating the UI with temperature, weather description, location, feels-like temperature, and humidity. Additionally, it includes functionality to handle errors and a button to go back to the initial state.

    const wrapper = document.querySelector(".wrapper"),
  inputPart = document.querySelector(".input-part"),
  infoTxt = inputPart.querySelector(".info-txt"),
  inputField = inputPart.querySelector("input"),
  locationBtn = inputPart.querySelector("button"),
  weatherPart = wrapper.querySelector(".weather-part"),
  wIcon = weatherPart.querySelector("img"),
  arrowBack = wrapper.querySelector("header i");

const apiKey = "YOUR_API"; // Replace with your actual API key
let api;

inputField.addEventListener("keyup", (e) => {
  if (e.key == "Enter" && inputField.value != "") {
    requestApi(inputField.value);
  }
});

locationBtn.addEventListener("click", () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
  } else {
    alert("Your browser not support geolocation api");
  }
});

function requestApi(city) {
  api = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`;
  fetchData();
}

function onSuccess(position) {
  const { latitude, longitude } = position.coords;
  api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&appid=${apiKey}`;
  fetchData();
}

function onError(error) {
  infoTxt.innerText = error.message;
  infoTxt.classList.add("error");
}

function fetchData() {
  infoTxt.innerText = "Getting weather details...";
  infoTxt.classList.add("pending");
  fetch(api)
    .then((res) => res.json())
    .then((result) => weatherDetails(result))
    .catch(() => {
      infoTxt.innerText = "Something went wrong, API Error";
      infoTxt.classList.replace("pending", "error");
    });
}

function weatherDetails(info) {
  if (info.cod == "404") {
    infoTxt.classList.replace("pending", "error");
    infoTxt.innerText = `${inputField.value} isn't a valid city name`;
  } else {
    const city = info.name;
    const country = info.sys.country;
    const { description, id } = info.weather[0];
    const { temp, feels_like, humidity } = info.main;

    if (id == 800) {
      wIcon.src =
        "http://codingstella.com/wp-content/uploads/2024/01/download-16.png";
    } else if (id >= 200 && id <= 232) {
      wIcon.src =
        "http://codingstella.com/wp-content/uploads/2024/01/download-17.png";
    } else if (id >= 600 && id <= 622) {
      wIcon.src =
        "http://codingstella.com/wp-content/uploads/2024/01/download-18.png";
    } else if (id >= 701 && id <= 781) {
      wIcon.src =
        "http://codingstella.com/wp-content/uploads/2024/01/download-19.png";
    } else if (id >= 801 && id <= 804) {
      wIcon.src =
        "http://codingstella.com/wp-content/uploads/2024/01/download-20.png";
    } else if ((id >= 500 && id <= 531) || (id >= 300 && id <= 321)) {
      wIcon.src =
        "http://codingstella.com/wp-content/uploads/2024/01/download-21.png";
    }

    weatherPart.querySelector(".temp .numb").innerText = Math.floor(temp);
    weatherPart.querySelector(".weather").innerText = description;
    weatherPart.querySelector(
      ".location span"
    ).innerText = `${city}, ${country}`;
    weatherPart.querySelector(".temp .numb-2").innerText = Math.floor(
      feels_like
    );
    weatherPart.querySelector(".humidity span").innerText = `${humidity}%`;
    infoTxt.classList.remove("pending", "error");
    infoTxt.innerText = "";
    inputField.value = "";
    wrapper.classList.add("active");
  }
}

arrowBack.addEventListener("click", () => {
  wrapper.classList.remove("active");
});

    There you have it! We’ve successfully crafted a simple and functional Weather App using the power of HTML, CSS, and JavaScript. Whether you’re a coding pro or just starting out, you’ve now got a handy tool that brings the weather information right to your fingertips.

    If you run into any problems with your project, worry not. The remedy is just a click away—Download the source code and confront your coding challenges with enthusiasm. Enjoy your coding adventure!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply