Created
February 7, 2017 21:15
-
-
Save furball514/436853c6c70120ac4ac9feb84ab8d88b to your computer and use it in GitHub Desktop.
Weather App
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> <meta name="author" content="Karthik"> | |
| <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Arima+Madurai"> | |
| <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Indie+Flower"> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <h1 id="address"> </h1> | |
| <div class="row well"> <div class="col-md-5"> <label> weather= <h2 id="weather"> </h2> </div> </label> | |
| <div class="col-md-3"> <label>humidity= <h2 id="humidity"> </h2> </label> </div> <div class="col-md-4"> <label>wind-speed= <h2 id="wind"> </h2></div> </div> | |
| <br> </br> | |
| <div class="row"> | |
| <div class="well"> | |
| <p class="temp"> </p> | |
| <button class="btn btn-default btn-danger tempbtn"> <i class="wi wi-thermometer"> F </i> </button> </div> </div> | |
| <br> </br> | |
| <div class="well"> <i id="icon" class="wi"> </i> </div> | |
| </div> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function main(){ | |
| var city; | |
| var country; | |
| var region; | |
| var org; | |
| $.getJSON('http://ip-api.com/json',function(data){ | |
| city= data.city; | |
| region= data.region; | |
| country= data.country; | |
| org= data.org; | |
| alert('Betcha $100 ur using'+ ' ' + org + ' -says Karthik'); | |
| $('#address').html(city + ' , ' + region + ' , ' + country + ' , ' + 'Earth'+ ' , '+'SS'+ ' , '+'MilkyWay'); | |
| var appKey='http://api.openweathermap.org/data/2.5/weather?q='+ city + ',' + country +'&appid=09a4437b45f299fa8961c66eb94b9c6e'; | |
| //alert(appKey) | |
| $.getJSON(appKey ,function(jigFig) { | |
| var kelvin= jigFig.main.temp; | |
| var fahrenheit= Math.floor(kelvin * 9/5 - 459.67); | |
| var celsius= Math.floor((fahrenheit - 32) * 5/9); | |
| var weather=' ' + jigFig.weather[0].main + ',' + jigFig.weather[0].description + ' '; | |
| //alert(jigFig.weather[0].icon); | |
| //alert(celsius); | |
| var windSpeed=jigFig.wind.speed; | |
| var humidity=jigFig.main.humidity; | |
| $('#weather').html(weather); | |
| $('#humidity').html(humidity + '%'); | |
| $('#wind').html(windSpeed + ' m/s'); | |
| $('.temp').html(fahrenheit + 'º'); | |
| var toggle = true; | |
| $('.tempbtn').on('click' , function() {if (toggle === false) {$('.tempbtn').html(' C').removeClass('btn-danger').addClass('btn btn-primary wi wi-thermometer'); | |
| {$('.temp').html(celsius + 'º'); | |
| toggle = true;}} | |
| else {$('.tempbtn').html(' F').removeClass('btn-primary').addClass('btn-danger'); | |
| {$('.temp').html(fahrenheit + 'º'); | |
| toggle = false;} | |
| } //figure out toggle | |
| }); | |
| if (jigFig.weather[0].main==='Clouds'){$('#icon').addClass('wi-cloud');} | |
| else if(jigFig.weather[0].main==='Clear'){$('#icon').addClass('wi-horizon');} | |
| else if(jigFig.weather[0].main==='Rain'){$('#icon').addClass('wi-rain');} | |
| else if(jigFig.weather[0].main==='Snow'){$('#icon').addClass('wi-snow');} | |
| else if(jigFig.weather[0].main==='Drizzle'){$('#icon').addClass('wi-sprinkle');} | |
| else if(jigFig.weather[0].main==='Thunderstorm'){$('#icon').addClass('wi-thunderstorm');} | |
| else if(jigFig.weather[0].main==='Atmosphere'){$('#icon').addClass('wi-fog');} | |
| else {$('#icon').removeClass('wi').addClass('fa fa-spinner fa-pulse fa-3x fa-fw');} | |
| }); | |
| }); | |
| /*if (navigator.geolocation) { | |
| navigator.geolocation.getCurrentPosition(function(position) { | |
| lat= position.coords.latitude; | |
| lon= position.coords.longitude;*/ | |
| } | |
| $(document).ready(main); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * {margin:0; | |
| padding:0; | |
| box-sizing:border-box;} | |
| h1 {text-align:center; | |
| font-weight:bold; | |
| margin-top:70px; | |
| letter-spacing:0.05em; | |
| font-family:'Arima Madurai',sans serif; | |
| color:white;} | |
| h2 {border:2px solid black; | |
| border-radius:30%; | |
| display:inline; | |
| text-transform:lowercase; | |
| font-family:'Indie Flower',sans-serif; | |
| background-color:yellow;} | |
| label {text-transform:uppercase; | |
| font-family:serif;} | |
| #humidity {font-size:2.4em;} | |
| #weather {font-size:2em;} | |
| #wind {font-size:2.1em;} | |
| p {display:inline; | |
| margin-left:450px; | |
| font-family:serif; | |
| font-size:7em; | |
| background-image:-webkit-linear-gradient(#FF6501, #4C4C4C);} | |
| .tempbtn {font-size:3em; | |
| border:2px solid black; | |
| height:65px; | |
| } | |
| #icon {font-size:8.5em; | |
| display:block; | |
| margin:auto; | |
| width:24%; | |
| } | |
| body {background:url("http://www.cs.northwestern.edu/~mmh683/project-works/MDM_Demo/public/images/weather-wallpaper-1.jpg") no-repeat top center} | |
| .well {background:#7FDBFF; | |
| border:3px solid black;;} | |
| /*#icon {margin-left:509px; | |
| margin-right:547px; | |
| display:block;}*\ | |
| /*background-color:darkblue;*\*\ | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.9/font-awesome-animation.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment