Create a Mars Weather App

Wednesday, April 28, 2021 • 4 minutes to read

to-the-point2021to-the-point2021

MAAS2 is a REST API that provides the latest weather data transmitted by the Curiosity Rover on Mars. This API is built upon the REMS (Rover Environmental Monitoring Station). MAAS2 responds in JSON formatted data.

API

mars

Project Setup

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

index.html

Create a index.html and paste the 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
 8    <!-- Compiled and minified CSS -->
 9    <link
10      rel="stylesheet"
11      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
12    />
13    <link rel="preconnect" href="https://fonts.gstatic.com" />
14    <link
15      href="https://fonts.googleapis.com/icon?family=Material+Icons"
16      rel="stylesheet"
17    />
18
19    <link rel="stylesheet" href="./style.css" />
20    <!-- Compiled and minified JavaScript -->
21    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
22    <script src="./weather.js"></script>
23    <script>
24      // onload render the previous tasks
25      window.addEventListener("load", getWeatherReport);
26    </script>
27    <title>Mars Weather</title>
28  </head>
29  <body>
30    <div class="mars-header">
31      <span>
32        <i class="large material-icons">ac_unit</i>
33        <header>Mars Weather</header></span
34      >
35    </div>
36    <main>
37      <div class="row">
38        <div class="info">
39          <div>
40            <table>
41              <tbody>
42                <tr>
43                  <td>
44                    <i class="material-icons">access_time</i> Terrestrial Date
45                  </td>
46                  <td id="terrestrial_date"></td>
47                </tr>
48                <tr>
49                  <td><i class="material-icons">whatshot</i> temp</td>
50                  <td id="temp"></td>
51                </tr>
52                <tr>
53                  <td><i class="material-icons">cloud_queue</i> weather</td>
54                  <td id="weather"></td>
55                </tr>
56                <tr>
57                  <td><i class="material-icons">looks</i> season</td>
58                  <td id="season"></td>
59                </tr>
60                <tr>
61                  <td><i class="material-icons">brightness_5</i> sunrise</td>
62                  <td id="sunrise"></td>
63                </tr>
64                <tr>
65                  <td><i class="material-icons">brightness_7</i> sunset</td>
66                  <td id="sunset"></td>
67                </tr>
68              </tbody>
69            </table>
70          </div>
71        </div>
72      </div>
73    </main>
74    <footer>
75      <div class="footer-copyright">
76        <div>
77          Made with <span style="color: red">❤️</span> by
78          <a href="https://schadokar.dev">schadokar</a>
79        </div>
80        <div>
81          Ingredients <span> 🧪</span> html, css and
82          <a href="https://materializecss.com/">material ui</a>
83        </div>
84        <div>
85          <a href="https://github.com/day-to-day-coding/mars-weather-app"
86            ><i class="material-icons">code</i></a
87          >
88        </div>
89      </div>
90    </footer>
91  </body>
92</html>

style.css

Create a style.css and paste the code.

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

weather.js

Create a weather.js and paste the code.

 1function getWeatherReport(city) {
 2  var requestOptions = {
 3    method: "GET",
 4    redirect: "follow",
 5  };
 6
 7  fetch(`https://api.maas2.apollorion.com/`, requestOptions)
 8    .then((response) => response.json())
 9    .then((result) => {
10      document.getElementById("terrestrial_date").innerHTML =
11        result.terrestrial_date;
12      document.getElementById(
13        "temp"
14      ).innerHTML = `max ${result.max_temp} &#8451;, min ${result.min_temp} &#8451;`;
15      document.getElementById("weather").innerHTML = result.atmo_opacity;
16      document.getElementById("season").innerHTML = result.season;
17      document.getElementById("sunrise").innerHTML = result.sunrise;
18      document.getElementById("sunset").innerHTML = result.sunset;
19    })
20    .catch((error) => console.log("error", error));
21}

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>/

to-the-point2021to-the-point2021

NextHow to Sort an Array of Int Float and String in Golang