Home
Programming

Responsive Weather App In HTML With Open Weather API

Syiainfoku make a Responsive Weather App In HTML With Open Weather API

Responsive Weather App In HTML With Open Weather API

Hello friends!

Welcome back, with me the founder of Syiainfoku. You will learn together on the Syiainfoku blog how to create a Responsive Weather App In HTML.

Hmm quite interesting isn't it?

So this Responsive Weather Application, will be able to display the weather according to each city just by typing the name of the city in the available column then you press the enter button then the weather in that city will automatically appear.

Here I use the Open Weather API to retrieve data.

Preview Responsive Weather App In HTML

Preview Responsive Weather App In HTML

In this Weather Application there are several elements, including:

The word "Weather In"

  1. Column to fill in the name of the city
  2. Card UI Weather
  • City name
  • Day/night view
  • Weather in Celsius
  • State of the city (Rain, storm, snow, sunny, etc.)
  • Highest temperature
  • Lowest temperature
  • Weather icons (Rain, storm, snow, sunny, etc.)
  • Average temperature
  • Humidity

     3. Very Responsive on all screen sizes

Source Code and Brief Explanation

To make this program [Responsive Weather App In HTML]. First you need to create four Files, one HTML File and one CSS File and lastly two JS File. After creating these files, just paste the following code into your file. You can also download the source code file of this Responsive Weather App In HTML from the given download button.

First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Weather in App | hitoricoding</title>
  <!-- Link CDN Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
  <!-- Link CSS File -->
  <link rel="stylesheet" href="style.css" />
</head>

<body>

  <main>

    <!-- Weather in Start -->
    <div class="search my-5">
      <h1 class="text-center title mx-5">Weather in :</h1>
      <form class="search-loaction">
        <input type="text" name="city" placeholder="What city?" autocomplete="off" class="form-control text-muted form-rounded p-4 shadow-sm" />
      </form>
    </div>
    <!-- Weather in End -->

    <div class="container">
      <div class="card rounded my-5 shadow-lg d-none back-card">

        <!-- Card Top Start -->
        <div class="card-top text-center">
          <div class="city-name my-3">
            <p>Abuja</p>
            <span>...</span>
          </div>
          <img src="img/night_image.svg" alt="" class="card-img-top time" />
        </div>
        <!-- Card Top End -->

        <!-- Card Body Start -->
        <div class="card-body">

          <!-- Card Mid Start -->
          <div class="card-mid row">
            <div class="col-8 text-center temp">
              <span>30&deg;C</span>
            </div>
            <div class="col-4 condition-temp">
              <p class="condition">Thunder Storm</p>
              <p class="high">30&deg;C</p>
              <p class="low">27&deg;C</p>
            </div>
          </div>
          <div class="icon-container card shadow mx-auto">
            <img src="img/cloud.svg" alt="" />
          </div>
          <!-- Card Mid End -->

          <!-- Card Bottom Start -->
          <div class="card-bottom px-5 py-4 row">
            <div class="col text-center">
              <p>30&deg;C</p>
              <span>Feels Like</span>
            </div>
            <div class="col text-center">
              <p>55%</p>
              <span>Humidity</span>
            </div>
          </div>
          <!-- Card Bottom End -->

        </div>
        <!-- Card Body End -->
      </div>
    </div>

  </main>
  
  <!-- Script JS File -->
  <script src="request.js"></script>
  <script src="index.js"></script>
</body>

</html>

Second, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;400;700&display=swap');

body {
  font-family: 'Raleway', sans-serif;
  background: #316278;
  color: #707070;
  margin: 0;
  padding: 0;
}

/* === Weather in Styling === */
.search {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  color: #fff;
  font-weight: 700;
  font-size: 70px;
}

/* === Card Styling === */
.container {
  max-width: 500px;
  min-width: 500px;
}

.form-rounded {
  border-radius: 2em;
}

.back-card {
  border-radius: 40px !important;
}

/* === Card Top Styling === */
.city-name {
  position: absolute;
  width: 100%;
}

.city-name p {
  font-size: 30px;
  font-weight: 400;
}

.city-name span {
  font-weight: 400;
  font-size: 45px;
  font-family: 'Times New Roman', Times, serif;
  position: relative;
  top: -60px;
}

/* === Card Mid Styling === */
.temp span {
  font-weight: 100;
  font-size: 5em;
  letter-spacing: -5px;
  white-space: nowrap;
}

.card-mid {
  line-height: 0.5;
}

.condition {
  line-height: 1em;
  font-weight: 700;
  font-size: 1em;
  text-transform: capitalize;
}

.high::before {
  content: '';
  background: url('img/up.svg') no-repeat;
  width: 10px;
  height: 15px;
  display: inline-block;
  position: relative;
  top: 3px;
}

.low::before {
  content: '';
  background: url('img/down.svg') no-repeat;
  width: 10px;
  height: 15px;
  display: inline-block;
  position: relative;
  top: 3px;
}

.icon-container {
  border-radius: 100%;
  width: 100px;
  height: 100px;
  background: #202020;
}

.icon-container img {
  background-position: center;
}

/* === Card Bottom Styling === */
.card-bottom {
  line-height: 0.5;
}

.card-bottom span {
  font-size: 12px;
  font-weight: 700;
}

.card-bottom p {
  font-size: 50px;
  font-weight: 100;
  letter-spacing: -2px;
}

/* === Responsive Media Screen === */
@media screen and (max-width: 400px) {
  .search {
    flex-direction: column;
  }

  .title {
    font-size: 30px;
  }

  .container {
    max-width: 300px;
    min-width: 300px;
  }

  .back-card {
    border-radius: 25px !important;
  }

  .city-name p {
    font-size: 20px;
  }

  .city-name span {
    font-size: 30px;
    top: -45px;
  }

  .temp span {
    font-size: 60px;
  }

  .condition {
    font-size: 12px;
  }

  .icon-container {
    width: 70px;
    height: 70px;
  }

  .icon-container img {
    background-position: center;
  }

  .card-bottom p {
    font-size: 30px;
  }

  .card-bottom span {
    font-size: 10px;
  }
}

Third, create a JS file with the name index.js and paste the given code in your JS file. Remember, you must create a file with a .js extension.

// === Get All Element === //
const searchForm = document.querySelector('.search-loaction');
const cityValue = document.querySelector('.search-loaction input');
const cityName = document.querySelector('.city-name p');
const cardBody = document.querySelector('.card-body');
const timeImage = document.querySelector('.card-top img');
const cardInfo = document.querySelector('.back-card');

// === Change Kelvin to Celcius === //
const spitOutCelcius = (kelvin) => {
  celcius = Math.round(kelvin - 273.15);
  return celcius;
}
const isDayTime = (icon) => {
  if (icon.includes('d')) {
    return true
  } else {
    return false
  }
}

// === Update Element HTML === //
updateWeatherApp = (city) => {
  console.log(city);
  const imageName = city.weather[0].icon;
  const iconSrc = `http://openweathermap.org/img/wn/${imageName}@2x.png`
  cityName.textContent = city.name;
  cardBody.innerHTML = `
    <div class="card-mid row">
            <div class="col-8 text-center temp">
              <span>${spitOutCelcius(city.main.temp)}&deg;C</span>
            </div>
            <div class="col-4 condition-temp">
              <p class="condition">${city.weather[0].description}</p>
              <p class="high">${spitOutCelcius(city.main.temp_max)}&deg;C</p>
              <p class="low">${spitOutCelcius(city.main.temp_min)}&deg;C</p>
            </div>
          </div>

          <div class="icon-container card shadow mx-auto">
            <img src="${iconSrc}" alt="" />
          </div>
          <div class="card-bottom px-5 py-4 row">
            <div class="col text-center">
              <p>${spitOutCelcius(city.main.feels_like)}&deg;C</p>
              <span>Feels Like</span>
            </div>
            <div class="col text-center">
              <p>${city.main.humidity}%</p>
              <span>Humidity</span>
            </div>
          </div>
    `;

  // === Change Img Day & Night === //
  if (isDayTime(imageName)) {
    console.log('day');
    timeImage.setAttribute('src', 'img/day_image.svg');
    if (cityName.classList.contains('text-white')) {
      cityName.classList.remove('text-white');
    } else {
      cityName.classList.add('text-black');
    }

  } else {
    console.log('night');
    timeImage.setAttribute('src', 'img/night_image.svg');
    if (cityName.classList.contains('text-black')) {
      cityName.classList.remove('text-black');
    } else {
      cityName.classList.add('text-white');
    }

  }

  cardInfo.classList.remove('d-none');
}



// === Add an event listner to the Form === //
searchForm.addEventListener('submit', e => {
  e.preventDefault();
  const citySearched = cityValue.value.trim();
  console.log(citySearched);
  searchForm.reset();

  requestCity(citySearched)
    .then((data) => {
      updateWeatherApp(data);
    })
    .catch((error) => {
      console.log(error)
    })
})

Finally, create a JS file with the name request.js and paste the given code in your JS file. Remember, you must create a file with a .js extension.

As a note for the script part

const key = '?';

You have to create an account on the web OpenWeather to get your own API key.

// You Must Create Account In openweathermap to get a Key API
const key = '?';

// const baseURL = 'http://api.lopenweathermap.org/data/2.5/weather?q=Lagos&appid=cbe3dd267a18f6c89943b3eff94f1ed7';

// fetch(baseURL)
//     .then((data) => { console.log('response', data.json()) })
//     .catch((error) => {
//         console.log(error);
//     });

const requestCity = async (city) => {
    const baseURL = 'http://api.openweathermap.org/data/2.5/weather'
    const query = `?q=${city}&appid=${key}`;

    //make fetch call (promise call)
    const response = await fetch(baseURL + query);

    //promise data
    const data = await response.json();
    return data;

}

That's it, now you have successfully created a Responsive Weather App, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.

Download 

Closing

Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.

If you found this article useful, you can share it. That's all from me, and THANK YOU

Post a Comment