Ben Line

Making a weather app in javascript

10/9/2019 • ☕️ 3 min read

1570736036014

HTML

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Weather App</title>
    <link
      rel="stylesheet prefetch"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
      rel="stylesheet"
      type="text/css"
    />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="css/weather-icons.min.css" />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 text-center tempDetails">
          <i class="wi wi-day-sunny" id="icon"></i>
          <h3>
            <span id="temp"></span>
            <span id="cel">°C</span>
            <span>|</span>
            <span id="fah" class="off convert">°F</span>
          </h3>
        </div>
      </div>
      <div class="row" id="textData">
        <div class="col-xs-12">
          <div class="col-xs-6 text-left">
            <h3>Status</h3>
          </div>
          <div class="col-xs-6 text-right">
            <h3 id="weatherStatus">fetching</h3>
          </div>
        </div>
        <div class="col-xs-12">
          <div class="col-xs-6 text-left">
            <h3>Location</h3>
          </div>
          <div class="col-xs-6 text-right">
            <h3 id="location">fetching</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

CSS

html {
  font-size: 1px;
}

.warning-sign{
  font-size:100rem;
  color: yellow;
}

body{
  background: #eee;
  background-size: 100% 100%;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1rem;
  margin-bottom: 30rem;
  padding: 20rem;
}

.container{
  background: pink;
  max-width: 300rem;
  margin: 3% auto;
  box-shadow: 0rem 15rem 15rem rgba(46, 61, 73, 0.12);
  -webkit-transition: background .5s ease-out 1s;
  -moz-transition: background .5s ease-out 1s;
  -o-transition: background .5s ease-out 1s;
  transition: background .5s ease-out 1s;
}

i{
  font-size: 150rem;
  margin: 30rem auto;
  color: #fff;
}

.name{
  font-weight: 700;
  font-size: 20rem;
}

h3{
  color: #fff;
  font-size: 15rem;

  margin: 0;
  line-height: 3;
}

.tempDetails{
  min-height: 345rem;
}

#icon{
  margin: 60rem auto;
}

.convert{
  cursor: pointer;
}

.off{
  color: rgba(255,255,255,.6);
}

.tempDetails h3{
  font-size: 25rem;
  font-weight: 700;
}

#textData{
  padding: 10rem 0;
  background: #fff;
}

#textData .col-xs-12{
  padding-left: 20rem;
  padding-right: 20rem;
}

#textData .col-xs-6{
  padding: 0;

}

#textData h3{
  color: #333;
}

#textData .col-xs-12 .col-xs-6:last-child h3{
  color: #666;
}

#textData .col-xs-12:last-child .col-xs-6{
  border-top: #eee 1rem solid;
}

@media screen and (min-width: 400px) {
  html {
    font-size: .8px;
  }
}

JS

$(document).ready(function() {
        var key = "APIKEY";
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var lat = Math.floor(position.coords.latitude);
            var long = Math.floor(position.coords.longitude);
            var test =
              "https://api.openweathermap.org/data/2.5/weather?lat=" +
              lat +
              "&lon=" +
              long +
              "&APPID=" +
              key;
            $.getJSON(test, function(data) {
              console.log(test);
              $("#temp").html(JSON.stringify(data));
              var temp = round(data.main.temp - 273);
              containerColor(temp);
              var stat = data.weather[0].main;
              var loc = data.name + ", " + data.sys.country;
              var icon = "wi-owm-" + data.weather[0].id;
              $("#icon").addClass(icon);
              $("#weatherStatus").html(stat);
              $("#location").html(loc);
              $("#temp").html(temp);
            }); // ends getjson
          }); // ends function(position)
        } // ends if

        $(".convert").clickToggle(
          function() {
            $("#cel").html("°F");
            $("#fah").html("°C");
            $("#temp").html(toFah($("#temp").html()));
          },
          function() {
            $("#cel").html("°C");
            $("#fah").html("°F");
            $("#temp").html(toCel($("#temp").html()));
          }
        );
      }); //ends document ready function

      function round(no, precision) {
        var multp = Math.pow(10, precision || 1);
        return Math.round(no * multp) / multp;
      }

      function toFah(temp) {
        return round((9 / 5) * temp + 32);
      }

      function toCel(temp) {
        return round((5 / 9) * (temp - 32));
      }

      (function($) {
        $.fn.clickToggle = function(func1, func2) {
          var funcs = [func1, func2];
          this.data("toggleclicked", 0);
          this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
          });
          return this;
        };
      })(jQuery);

      function containerColor(temp) {
        if (temp > 40) $(".container").css("background", "#eab28e");
        else if (temp > 30)
          $(".container").css("background", "rgb(234, 237, 130)");
        else $(".container").css("background", "#a3d0e7");
      }