Weather

What is a weather How do you make a weather? This script and codes were developed by Yas on 11 March 2022, Friday.

How do I make an weather?
  1. Weather Previews
  2. Weather HTML Codes
  3. Weather CSS Codes
  4. Weather JS Codes
Weather Previews

Weather HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Weather</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="box" id="box">
          <h3 class="location text-center">retriving location</h3>
          
          <canvas class="icon-set" id="clear-day" width="125" height="125" ></canvas>
          <canvas class="icon-set" id="clear-night" width="125" height="125" ></canvas>
          <canvas class="icon-set" id="partly-cloudy-day" width="125" height="125" ></canvas>
          <canvas class="icon-set" id="partly-cloudy-night" width="125" height="125" ></canvas>
          <canvas class="icon-set" id="cloudy" width="125"  height="125"></canvas>
          <canvas class="icon-set" id="rain" width="125"  height="125"></canvas>
          <canvas class="icon-set" id="sleet" width="125"  height="125"></canvas>
          <canvas class="icon-set" id="snow" width="125"  height="125"></canvas>
          <canvas class="icon-set" id="wind" width="125"  height="125"></canvas>
          <canvas class="icon-set" id="fog" width="125"  height="125"></canvas>
            
          <h2 class="weather">retriving weather</h2>
          <h2 class="temp">please wait</h2>
          <button type="button" class="btn btn-info btn-xs convert"></button>
      </div>
      </div>
      </div>
</div>


<script src="https://rawgithub.com/darkskyapp/skycons/master/skycons.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://raw.githubusercontent.com/darkskyapp/skycons/master/skycons.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>

Weather CSS Codes

.container {
  background-color: #fff;
}
#clear-day, #clear-night, #partly-cloudy-day, #partly-cloudy-night, #cloudy, #rain, #sleet, #snow, #wind, #fog
 {
   display: none;
   float: left;
   padding: 0 30px 0 50px;
 }

.box {
  width: 480px;
  height: 220px;
  margin: 100px auto;
  background: #fff;
  padding: 2px;
}

h2 {
  margin-top: 20px;
}

.location {
  margin-top: 30px;
}

.weather {
  margin: 30px 0 10px 100px;
}

.temp {
  margin: -6px 0 0 0px;
  float: left;
}

.convert {
  float: left;
  margin: 0px 0 0 14px; 
  outline: none;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: .6rem;
  background-color: #efefef;
  text-align: center;
  font-family: 'Hind Guntur', sans-serif;
  font-size: 12px;
}

Weather JS Codes

//$(document).ready(function() {
  
  let lat;
  let lon;
  let currentWeather;
  let icon;
  let temperature;
  let currentDeg;
  let convertion;
  const FAR_SYMBOL = " &#8457;";
  const CEL_SYMBOL = " &#8451;";
  var icons = new Skycons({"color": "orange"});
  
  icons.set("clear-day", Skycons.CLEAR_DAY);
  icons.set("clear-night", Skycons.CLEAR_NIGHT);
  icons.set("partly-cloudy-day", Skycons.PARTLY_CLOUDY_DAY);
  icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
  icons.set("cloudy", Skycons.CLOUDY);
  icons.set("rain", Skycons.RAIN);
  icons.set("sleet", Skycons.SLEET);
  icons.set("snow", Skycons.SNOW);
  icons.set("wind", Skycons.WIND);
  icons.set("fog", Skycons.FOG);

  icons.play();
  
  // Fahrenheit Celsius converter
  $('.convert').on('click', function() {
          switch (currentDeg) {
            case FAR_SYMBOL: 
              temperature = Math.round((temperature - 32) / 1.8);
              $('.temp').html(temperature + CEL_SYMBOL);
              $('.convert').html("convert to " + FAR_SYMBOL);
              currentDeg = CEL_SYMBOL;
              break;
            case CEL_SYMBOL: 
              temperature = Math.round(temperature * 1.8 + 32);
              $('.temp').html(temperature + FAR_SYMBOL);
              $('.convert').html("convert to " + CEL_SYMBOL);
              currentDeg = FAR_SYMBOL;
              break;
            default:
              alert("convertion error");
            }                
    });

  
  // loads location
  var promiseGeo = $.ajax({
           url: 'http://ip-api.com/json',
           dataType: 'json',
           type: 'get',
           cache: true,
           success: function(data) { 
             $('.location').html(data.city + ", " + data.country);
            },
           error: function(request, errorType, errorMessage) {
              alert('Error: ' + errorType + ' with message: ' + errorMessage)}
      });
  
  
  // sets latitude & longitude after location loads then calls weather
  promiseGeo.then(function(data) { 
     lat = data.lat;
     lon = data.lon;
      var promiseWeather = $.ajax({
             url: 'https://crossorigin.me/https://api.darksky.net/forecast/2dcd24e9752b62bc9a56a9b510e20c13/' + lat + ',' + lon,
             dataType: 'json',
             type: 'get',
             cache: true,
             success: function(weather) {
               temperature = weather.currently.temperature;
               $('.icon-set').hide();
               icon = weather.currently.icon;
               $('#'+ icon).show();
               $('.weather').html(weather.currently.summary);
               $('.temp').html(Math.round(temperature) + FAR_SYMBOL);
               $('.convert').html("convert to " + CEL_SYMBOL);
               currentDeg = FAR_SYMBOL;
              },
             error: function(request, errorType, errorMessage) {
                alert('Error: ' + errorType + ' with message: ' + errorMessage)}
       });
   
  });


  //sets temperature after wether is loaded
  promiseWeather.then(function(weather) {
        temperature = weather.currently.temperature;
    });

  
                   
//});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.