Create a Weather App in Html

Wednesday, April 14, 2021 • 5 minutes to read

Tutorial2021htmlmaterial-uigithub-pages

In this post, we are creating a weather app in html using material and openweathermap api.

The final app will look like this.

The code is available on GitHub.

cover

Openweathermap API

Go to Openweathermap.org and create an account. We are utilizing free tier api.

In free tier, we can call 60 calls/minute 1,000,000 calls/month.

Checkout the available APIs for free tier.

Login to your account and go to My API Keys from the top-right menu.

Create a new api key.

Project Setup

Create a project directory html-weather-app.

1|-html-weather-app
2	|- icons
3	|- index.html
4	|- style.css
5	|- weather.js

index.html

Open index.html and paste the below code.

  1<!DOCTYPE html>
  2<html lang="en">
  3  <head>
  4    <meta charset="UTF-8" />
  5    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7    <link
  8      rel="apple-touch-icon"
  9      sizes="180x180"
 10      href="/icons/apple-touch-icon.png"
 11    />
 12    <link
 13      rel="icon"
 14      type="image/png"
 15      sizes="32x32"
 16      href="/icons/favicon-32x32.png"
 17    />
 18    <link
 19      rel="icon"
 20      type="image/png"
 21      sizes="16x16"
 22      href="/icons/favicon-16x16.png"
 23    />
 24    <link rel="manifest" href="/icons/site.webmanifest" />
 25    <!-- Compiled and minified CSS -->
 26    <link
 27      rel="stylesheet"
 28      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
 29    />
 30    <link rel="preconnect" href="https://fonts.gstatic.com" />
 31    <link
 32      href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
 33      rel="stylesheet"
 34    />
 35    <link
 36      href="https://fonts.googleapis.com/icon?family=Material+Icons"
 37      rel="stylesheet"
 38    />
 39
 40    <link rel="stylesheet" href="./style.css" />
 41    <!-- Compiled and minified JavaScript -->
 42    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 43    <script src="./weather.js"></script>
 44    <title>Weather App</title>
 45  </head>
 46  <body>
 47    <div class="container">
 48      <span>
 49        <i class="large material-icons">cloud_queue</i>
 50        <header>Weather App</header></span
 51      >
 52      <main>
 53        <div class="row">
 54          <div class="col s6">
 55            <!-- <form> -->
 56            <div class="row">
 57              <div class="input-field col s12">
 58                <i class="material-icons prefix">location_city</i>
 59                <input id="city" type="text" class="validate" />
 60                <label for="city">City name</label>
 61              </div>
 62            </div>
 63            <div class="row">
 64              <button
 65                class="btn blue amber lighten-2 waves-effect waves-light"
 66                onclick="getWeatherReport(document.getElementById('city').value)"
 67              >
 68                Is it?
 69                <i class="material-icons right">wb_sunny</i>
 70              </button>
 71            </div>
 72            <!-- </form> -->
 73          </div>
 74          <!-- <div class="divider vertical"></div> -->
 75          <div class="col s6 vertical-divider">
 76            <div>
 77              <table>
 78                <tbody>
 79                  <tr>
 80                    <td>
 81                      <i class="material-icons">my_location</i> coordinate
 82                    </td>
 83                    <td id="coordinate"></td>
 84                  </tr>
 85                  <tr>
 86                    <td><i class="material-icons">whatshot</i> temp</td>
 87                    <td id="temp"></td>
 88                  </tr>
 89                  <tr>
 90                    <td><i class="material-icons">cloud_queue</i> weather</td>
 91                    <td id="weather"></td>
 92                  </tr>
 93                </tbody>
 94              </table>
 95            </div>
 96          </div>
 97        </div>
 98      </main>
 99      <footer class="center">
100        <div class="footer-copyright">
101          <div class="container">
102            Made with <span style="color: red">❤️</span> by
103            <a href="https://schadokar.dev">schadokar</a>
104          </div>
105          <div class="container">
106            Ingredients <span> 🧪</span> html, css and
107            <a href="https://materializecss.com/">material ui</a>
108          </div>
109          <div class="container">
110            <a href="https://github.com/day-to-day-coding/html-weather-app"
111              ><i class="material-icons">code</i></a
112            >
113          </div>
114        </div>
115      </footer>
116    </div>
117  </body>
118</html>

style.css

Open the style.css and paste the below code.

 1body {
 2  background-color: white;
 3  color: black;
 4  background-size: auto;
 5  background-repeat: no-repeat;
 6  font-family: "Pacifico", cursive;
 7  display: flex;
 8  flex-direction: column;
 9}
10
11header {
12  font-size: xx-large;
13  margin-bottom: 50px;
14}
15
16main {
17  flex: 1 0 auto;
18}
19
20input {
21  font-family: "Pacifico", cursive;
22}
23
24.vertical-divider {
25  border-left: 1px solid gray;
26}
27
28.page-footer .footer-copyright {
29  background-color: white;
30}
31
32footer {
33  margin-top: 7rem;
34}

weather.js

The function will accept city name.

Open the Openweathermap and copy the api key. The api key takes a couple of hours to activate before you can use.

Replace your API key in fetch request.

1fetch(
2    `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&APPID=<YOUR API KEY>`,
3    requestOptions
4  )

Open the weather.js and paste the below code.

 1function getWeatherReport(city) {
 2  var requestOptions = {
 3    method: "GET",
 4    redirect: "follow",
 5  };
 6
 7  fetch(
 8    `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&APPID=<YOUR API KEY>`,
 9    requestOptions
10  )
11    .then((response) => response.json())
12    .then((result) => {
13      document.getElementById(
14        "coordinate"
15      ).innerHTML = `${result.coord.lon}&#176;, ${result.coord.lat}&#176;`;
16      document.getElementById(
17        "temp"
18      ).innerHTML = `${result.main.temp} &#8451;, min ${result.main.temp_min} &#8451;, max ${result.main.temp_max} &#8451;`;
19      document.getElementById(
20        "weather"
21      ).innerHTML = `${result.weather[0].description} <img style="vertical-align: middle;" src="http://openweathermap.org/img/wn/${result.weather[0].icon}@2x.png" />`;
22    })
23    .catch((error) => console.log("error", error));
24}

favicon

Use favicon.io to generate your custom favicon and save it in icons folder.

Or you can download the icons folder from the GitHub code.

Run

Open the index.html in the browser and test it.

To run it as server, install serve using npm install --global serve. Install nodejs first to run npm command.

Open the terminal or cmd in the project and run serve.

This will start a server at localhost:5000 and serve index.html.

Host it

You can host it on GitHub Pages.

Create a html-weather-app repository on the GitHub. You can name it anything.

Open the terminal or cmd in the project and instantiate git init.

Stage and commit the code.

1git init
2git add .
3git commit -m 'weather app is complete'

This is a static web app due to which your api key is visible to everyone. So either keep the account in free tier or remove/delete the API key from the weather.js and then push it. Or you can delete the API key in openweathermap account.

Open GitHub repo and copy the repo url. Add it as origin and push the code to the GitHub.

1git remote add origin https://github.com/<Your username>/<repo name>.git
2git branch -M main
3git push -u origin main

Open the GitHub repo settings and go to pages.

Under Source, select the main branch, /root folder and save it.

The app is now live at

1https://<Your Username>.github.io/<your repo name>/

Tutorial2021htmlmaterial-uigithub-pages

PreviousHow to Run Javascript Code

NextFlashback 2020