weatherApp

In this example below you will see how to do a weatherApp with some HTML / CSS and Javascript

A web app to display geolocation-based weather.

Thumbnail
This awesome code was written by alevis, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright alevis ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>weatherApp</title>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link href="https://fonts.googleapis.com/css?family=Righteous|Patua+One" rel="stylesheet">

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js" rel="script">

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/core.js" rel="script">

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

  
</head>

<body>

  <div class="container">
 <div class="row well well-sm">
   <div class="col-md-12 ">
     <h1 class="title text-center">Weather App</h1>
     <iframe id="widget" type="text/html" 
             frameborder="0"
             height="230"
             width="100%"
             src="">
     </iframe>
     <p class="test"></p>
     <div class="col-xs-12 text-center">
       <button id="us">&#176F</button>
       <button id="uk">&#176C</button>
     </div>
      <table class="table well well-sm">
        <tbody>
          <tr>
            <td class="timezone"></td>
            <td class="summary"></td>
            <td class="temperature"></td>
          </tr>
          <tr>
            <td class="dewpoint"></td>
            <td class="humidity"></td>
            <td class="windspeed"></td>   
          </tr>
          <tr>
            <td class="visibility"></td>
            <td class="cloudcover"></td>
            <td class="pressure"></td>
          </tr>
        </tbody>
      </table>
     <hr/>     
   </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/alevis/weatherapp-ozbaNP */
body{
  margin-top:120px;
  background: #141E30; 
  background: -webkit-linear-gradient(to left, #141E30 , #243B55); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #141E30 , #243B55); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
 
  /*
font-family: 'Roboto', sans-serif;
font-family: 'Cabin', sans-serif;
font-family: 'Quicksand', sans-serif;
font-family: 'Karla', sans-serif;
font-family: 'Candal', sans-serif;
  */
  font-family: 'Patua One', cursive;
}
.table{  
  /*color:#1C4A6B;*/
  color:#0073B8;
  font-size:18px;  
  /*font-family: 'Cabin', sans-serif;*/
  /*font-family: 'Dosis', sans-serif;*/
  /*font-family: 'Poppins', sans-serif;*/
  /*font-family: 'Hind', sans-serif;*/
  /*font-family: 'Abel', sans-serif;*/
  /*font-family: 'Josefin Sans', sans-serif;*/
  /*font-family: 'Quicksand', sans-serif;*/
  /*font-family: 'Questrial', sans-serif;*/
  /*font-family: 'Cuprum', sans-serif;*/
  /*font-family: 'Rubik', sans-serif;*/
  /*font-family: 'Work Sans', sans-serif;*/
  /*font-family: 'Pavanam', sans-serif;*/
  font-family: 'Righteous', cursive;
  /*font-family: 'Comfortaa', cursive;*/
  /*font-family: 'Hammersmith One', sans-serif;*/
  /*font-family: 'Didact Gothic', sans-serif;*/
  /*font-family: 'Fredoka One', cursive;*/
}
.title{
  /*color:#071B3D;*/
  color:#23B0DB;
}
.test{ color:red; }
.tempchange{ font-size:20px; }
#us{
  background-color: black;
  font-family: 'Righteous', cursive;
  border: none;
  color: white;
  padding: 5px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}
#uk{
  background-color: #0073B8;
  font-family: 'Righteous', cursive;
  border: none;
  color: white;
  padding: 5px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}

/*Downloaded from https://www.codeseek.co/alevis/weatherapp-ozbaNP */
/*
  CODE IS NOT OPTIMIZED AND IS FULL OF REDUNDUNCIES  
*/
//Global variables
var city;
var loc;
var colors = ["#058EC2","#C33C00"];//cool and warm
var fonts = ["Calibri","Georgia","AvenirNextLTW01-Condens 721299", "Arial Narrow"]
var address = "https://api.forecast.io/forecast/0283ca23d4f09a7d027038a72104b6a3/";
var forecast = "http://forecast.io/embed/#";
var options = "&color="+colors[0]+"&font="+fonts[2];
var uk_units = "&units=uk";
var us_units = "&units=us";
var system = us_units;
var b = "<span style=\"color:black\">";
var bc = "</span>";

/*
  Function to change the system of units
  (F) for US and (C) for British.
*/
function changeSystem(system){
  document.getElementById("widget").src = forecast + system;
}
/* 
  Function to populate the table
  called when the forecast variable has been modified.
*/
function getWeather(address,loc,city){
  console.log(address);
  
  $.get(address,function(data){
    forecast += "lat="+loc[0]+"&";
    forecast += "lon="+loc[1]+"&name="+city;
    forecast += options;        
    document.getElementById("widget").src = forecast + us_units;
    $(".timezone").append("Timezone: "+b+data.timezone+bc);
    $(".summary").append("Summary: " +b+data["currently"].summary+bc);
    $(".temperature").append(" Temprature: "+b+data["currently"].temperature+"°F"+bc);
    $(".dewpoint").append("Dew Point: "+b+data["currently"].dewPoint+bc);
    $(".humidity").append("Humidity: "+b+data["currently"].humidity+bc);
    $(".windspeed").append("WindSpeed: "+b+data["currently"].windSpeed+"km/hr"+bc);
    $(".visibility").append("Visibility: "+b+data["currently"].visibility+"km"+bc);
    $(".cloudcover").append("Cloud Cover: "+b+data["currently"].cloudCover+"oktas"+bc);
    $(".pressure").append("Pressure: "+b+data["currently"].pressure+"mb"+bc);
  },"jsonp");    
}
/*
  Function to get the address, city and location of the 
  client's ip address (standard http request)
*/
function getLocation(address,loc,city){
  var pos = "";
  $.get("http://ipinfo.io", function(response) {          
    pos += response.loc.toString();
    city = response.city;
    loc =  response.loc.split(",");    
  },"jsonp");    
}
/*
  Document ready
*/
$(document).ready(function(){
  $.get("http://ipinfo.io", function(response) {          
    address += response.loc.toString();
    city = response.city;
    loc =  response.loc.split(",");
    $.get(address,function(data){
      forecast += "lat="+loc[0]+"&";
      forecast += "lon="+loc[1]+"&name="+city;
      forecast += options;
      document.getElementById("widget").src = forecast + system;
      $(".timezone").append("Timezone: "+b+data.timezone+bc);
      $(".summary").append("Summary: " +b+data["currently"].summary+bc);
      $(".temperature").append(" Temprature: "+b+data["currently"].temperature+"°F"+bc);
      $(".dewpoint").append("Dew Point: "+b+data["currently"].dewPoint+bc);
      $(".humidity").append("Humidity: "+b+data["currently"].humidity+bc);
      $(".windspeed").append("WindSpeed: "+b+data["currently"].windSpeed+"mph"+bc);
      $(".visibility").append("Visibility: "+b+data["currently"].visibility+"km"+bc);
      $(".cloudcover").append("Cloud Cover: "+b+data["currently"].cloudCover+"oktas"+bc);
      $(".pressure").append("Pressure: "+b+data["currently"].pressure+"mb"+bc);
    },"jsonp");   
  },"jsonp");    
  
  
  /*
  
    STILL WORKING ON THIS PROJECT
    have to make the buttons work, I kind of know how but running into problems 
    calling functions within doc.ready function
  
  */
  
  
  $("#us").click(function(){
    system = us_units;
    document.getElementById("widget").src = forecast + system;
    console.log(forecast + system);
    $('#widget').attr('src', $('#widget').attr('src'));
  });
  $("#uk").click(function(){
    system = uk_units;
    document.getElementById("widget").src = forecast + system;
    console.log(forecast+system);
    $('#widget').attr('src', $('#widget').attr('src'));
  });
  
  
});
/*
$(document).ready(function(){
    $.get("http://ipinfo.io", function(response) {
      address += response.loc.toString();
      city = response.city;
      loc = response.loc.split(",");
      $.get(address,function(data){    
        forecast += "lat="+loc[0]+"&";
        forecast += "lon="+loc[1]+"&name="+city;
        forecast += options + uk_units;
        document.getElementById("widget").src = forecast;
        $(".timezone").append("Timezone: " + data.timezone);
        $(".summary").append("Summary: " + data["currently"].summary);
        $(".temperature").append("Temprature: "+data["currently"].temperature);
        $(".dewpoint").append("Dew Point: "+data["currently"].dewPoint);
        $(".humidity").append("Humidity: "+data["currently"].humidity);
        $(".windspeed").append("WindSpeed: "+data["currently"].windSpeed);
        $(".visibility").append("Visibility: "+data["currently"].visibility);
        $(".cloudcover").append("Cloud Cover: "+data["currently"].cloudCover);
        $(".pressure").append("Pressure: "+data["currently"].pressure);
      },"jsonp");
    },"jsonp");    
  });  
});
*/

Comments