Local Weather App

Developer
Sam Koshy
Size
5,141 Kb
Views
10,120
  1. Local Weather App Previews
  2. Local Weather App HTML Codes
  3. Local Weather App CSS Codes
  4. Local Weather App JS Codes

How do I make an local weather app?

Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/avqvgJ.. What is a local weather app? How do you make a local weather app? This script and codes were developed by Sam Koshy on 06 November 2022, Sunday.

Local Weather App Previews
IQ Test

Local Weather App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Local Weather App</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<div class="text-center title"> <h1>Local Weather App</h1>
</div>
<br>
<div class="secondRow row"> <div class="col-xs-1"></div> <div class="col-xs-7 location"> <h2>Location not found</h2> <span class="description"><h3></h3></span> </div> <div class="col-xs-3"><span class="mainTemp">00.0</span><i class="fa fa-circle-o mainTempDeg"></i><span class="mainTempUnit"></span> <div class=container1> <h3>F</h3> <br> <h3>C</h3> <div class=container2></div> </div> </div> <div class="col-xs-1"></div>
</div>
<div class="text-center"> <span class="icon"><img src="#"></span>
</div>
<div class="row"> <div class="col-xs-2"></div> <div class="col-xs-2 wind"><img src="https://s3-us-west-1.amazonaws.com/pictureholder/compass-rose-305254_960_720.png"><i class="fa fa-arrow-circle-o-up fa-4x"></i> <h2></h2> </div> <div class="col-xs-5"></div> <div class="col-xs-3 highLow"><span class="high"><h3></h3></span><span class="low"><h3></h3></span> <i class="fa fa-circle-o highDeg"></i> <i class="fa fa-circle-o lowDeg"></i> </div>
</div>
<div class="row IconAttribute"> <div class="col-xs-1"></div> <div class="col-xs-7"> <h5> <a href="https://creativecommons.org/licenses/by-sa/2.5/"><i class="fa fa-creative-commons"></i></a> Weather Icons by <a href="http://merlinthered.deviantart.com/art/plain-weather-icons-157162192">MerlinTheRed</a></h5> </div> <div class="col-xs-4"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Local Weather App - Script Codes CSS Codes

body { background: linear-gradient(rgba(39, 57, 89, 1), rgba(39, 57, 89, 0.7)), url(https://s3-us-west-1.amazonaws.com/pictureholder/skyline-437527_960_720.jpg) center fixed; font-family: 'Oswald', sans-serif;
}
.title { color: #FC7F26; margin: auto;
}
.description { font-size: 130%;
}
.mainTempDeg { position: relative; top: 5px; font-size: 150%; font-weight: bold; color: #FFBB00;
}
.mainTemp { position: relative; //margin-left:-30px; top: 50px; font-size: 450%; color: #FFBB00;
}
.mainTempUnit { position: relative; top: 50px; font-size: 250%; color: #FFBB00;
}
.highDeg { position: relative; top: -85px; left: 7px; font-size: 60%; font-weight: bold; color: #FFBB00; opacity: 0; /*initial display is not in desired location*/
}
.lowDeg { position: relative; top: -55px; left: -12px; font-size: 60%; font-weight: bold; color: #FFBB00; opacity: 0; /*initial display is not in desired location*/
}
.location { color: rgb(255, 255, 255);
}
.high { position: relative; top: -40px; font-size: 150%; color: #FFBB00;
}
.low { position: relative; top: -40px; font-size: 150%; color: #FFBB00;
}
.wind img { position: fixed; width: 120px; height: 120px;
}
.wind h2 { position: fixed; font-size: 120%; font-weight: bold; margin-top: 125px; margin-left: -28px; color: #FFBB00;
}
.fa-arrow-circle-o-up { position: fixed; margin-top: 31px; margin-left: 36px; color: red;
}
.container1 { margin-top: -32px; margin-left: 200px; background-color: #336862; width: 38px; height: 76px;
}
.container1 h3 { font-size: 200%; padding: 5px; margin-top: -33px; margin-left: 7px; color: rgb(255, 255, 255);
}
.container2 { position: absolute; margin-top: -49px; background-color: #685F8D; width: 38px; height: 38px;
}
.IconAttribute { //float:right; color: rgb(255, 255, 255); //margin-left:2px; margin-top: 320px;
}
.IconAttribute a { color: #866933;
}

Local Weather App - Script Codes JS Codes

//NOTE: The http call (codepen, ipinfo, openweathermap) over Safari and Chrome will not work. Could use Forecast.io. Instead a work around was found using a proxy: "https://cors-anywhere.herokuapp.com" (added to the weather API url).
$(document).ready(function() {
var latitude, longitude, weatherMapAPIurl, city, region, weather, temp, angle, tempUnit = "F", windUnit = "mi/hr", units = "imperial", highTemp, lowTemp, iconURL; function updateWeather(tempUnit, windUnit, units){ //wrapping in a function allows us to switch between imperial and metric units as a function call without unnecessarily repeating code navigator.geolocation.getCurrentPosition(function(position) { latitude = position.coords.latitude; longitude = position.coords.longitude; $.getJSON('https://ipinfo.io/json', function(data) { //ipinfo provides more accurate city results to display but geolocation doesn't get tripped up by any server re-route weatherMapAPIurl = "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=a57514eb23f7df2ba713340584908f52&units=" + units; $.getJSON(weatherMapAPIurl, function(json) { if (Math.round(latitude) === Math.round(data.loc.split(',')[0]) && Math.round(longitude) === Math.round(data.loc.split(',')[1]) && data.city!=="" && data.region!=="") { //if geolocation and ipinfo are in the same region then display ipinfo's city and region when available city = data.city; region = data.region; //latitude = data.loc.split(',')[0]; //splits loc (which is a string separated by a comma) into two array values //longitude = data.loc.split(',')[1]; $(".location h2").html(city + ", " + region); } else { $(".location h2").html(json.name); } weather = json.weather[0].description; temp = json.main.temp; highTemp = json.main.temp_max; lowTemp = json.main.temp_min; switch (json.weather[0].icon) { case ('01d'): iconURL = "https://farm2.staticflickr.com/1489/23483689573_d7feffaaaf_m.jpg"; break; case ('01n'): iconURL = "https://farm2.staticflickr.com/1714/23742603349_19e0c141b5_m.jpg"; break; case ('02d'): iconURL = "https://farm6.staticflickr.com/5734/24084323126_03765b904f_m.jpg"; break; case ('02n'): iconURL = "https://farm6.staticflickr.com/5804/24084323046_7a198a4fd4_m.jpg"; break; case ('03d'): iconURL = "https://farm6.staticflickr.com/5664/23742602989_fb04a37049_m.jpg"; break; case ('03n'): iconURL = "https://farm2.staticflickr.com/1678/24027810711_f48c756df3_m.jpg"; break; case ('04d'): iconURL = "https://farm2.staticflickr.com/1545/23742602819_578cedb063_m.jpg"; break; case ('04n'): iconURL = "https://farm6.staticflickr.com/5664/23742602659_ff84b9670f_m.jpg"; break; case ('09d'): iconURL = "https://farm6.staticflickr.com/5779/23814745940_3506fa7d7f_m.jpg"; break; case ('09n'): iconURL = "https://farm2.staticflickr.com/1461/23742602309_cb165fa4fe_m.jpg"; break; case ('10d'): iconURL = "https://farm2.staticflickr.com/1511/23742602199_77a58e712a_m.jpg"; break; case ('10n'): iconURL = "https://farm2.staticflickr.com/1455/23814745510_1ed4ca4e06_m.jpg"; break; case ('11d'): iconURL = "https://farm6.staticflickr.com/5644/23742601749_81daf3ff06_m.jpg"; break; case ('11n'): iconURL = "https://farm6.staticflickr.com/5624/24110398535_cfd82b32b1_m.jpg"; break; case ('13d'): iconURL = "https://farm6.staticflickr.com/5766/24110398295_b22e0779cd_m.jpg"; break; case ('13n'): iconURL = "https://farm2.staticflickr.com/1646/24002310762_85e7d094a7_m.jpg"; break; case ('50d'): iconURL = "https://farm6.staticflickr.com/5634/23482169514_ce40e8f252_m.jpg"; break; case ('50n'): iconURL = "https://farm2.staticflickr.com/1697/24002310472_55873a61b4_m.jpg"; break; } angle = "rotate(" + json.wind.deg + "deg)"; $(".description").html(weather); if (tempUnit === "C") { $(".wind h2").html("Wind speed = " + (3.6 * json.wind.speed).toPrecision(3) + "&nbsp;" + windUnit); //change from m/s to km/hr } else { $(".wind h2").html("Wind speed = " + json.wind.speed.toPrecision(3) + "&nbsp;" + windUnit); } $(".mainTemp").html(""); //keeps display from crowding and freezing $(".mainTemp").html(temp.toPrecision(3) + "&#8201;"); $(".mainTempUnit").html(""); $(".mainTempUnit").html("&#8201;" + tempUnit); $(".high").html(""); $(".high").html("High: " + highTemp.toPrecision(3) + "<br>"); document.querySelector(".highDeg").style.opacity = 1; //make the degree symbol opaque $(".low").html(""); $(".low").html("Low: " + lowTemp.toPrecision(3)); document.querySelector(".lowDeg").style.opacity = 1; //make the degree symbol opaque $(".icon").html("<img src='" + iconURL + "'style=width:100px;height:100px;border-radius:50%;>"); $(".fa-arrow-circle-o-up").css({ "webkitTransform": angle, "MozTransform": angle, "msTransform": angle, "OTransform": angle, "transform": angle }); }); //weather API call }); //ipinfo }); //geolocation } updateWeather(tempUnit, windUnit, units); //execute function with intial parameters in imperial units /*****************************************************************/ /*****************************************************************/ /*Note: weather API sometimes displays different values when switching units but will eventually synchronize*/ $(".container1").click(function() { //user changes units if (tempUnit === "F") { $(".container2").animate({ 'marginTop': "-=38px" //moves up }); tempUnit = "C"; windUnit = "km/hr"; units = "metric"; updateWeather(tempUnit, windUnit, units); } else { $(".container2").animate({ 'marginTop': "+=38px" //moves down }); tempUnit = "F"; windUnit = "mi/hr"; units = "imperial"; updateWeather(tempUnit, windUnit, units); } });
});
Local Weather App - Script Codes
Local Weather App - Script Codes
Home Page Home
Developer Sam Koshy
Username codinger
Uploaded November 06, 2022
Rating 3
Size 5,141 Kb
Views 10,120
Do you need developer help for Local Weather App?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sam Koshy (codinger) Script Codes
Name
Data Visualization - US GDP
Twitchtv Status
Personal Portfolio Webpage
Simon
Tic Tac Toe _ Alternate
Javascript Calculator
Heat Map
A Pen by Sam Koshy
Wikipedia Viewer
Random Quote Machine
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!