Weather Data
How do I make an weather data?
Retreive local weather data. What is a weather data? How do you make a weather data? This script and codes were developed by Joel on 26 November 2022, Saturday.
Weather Data - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weather Data</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
Developer: Joel Huffman
Date: 8-02-2016
Project: Weather
Comments:
-This project was built for FreeCodeCamp.com
-I used HTML5 CSS3 Sass Javascript Jquery and Bootstrap
-MUST BE ON HTTP not HTTPS
-->
<main class="container-fluid"> <div id="top" class="row no-gutters"> <div class="col-sm-2 col-sm-offset-2 col-xs-4 container"> <h1 id="temp" class="text-center">32</h1> <p class="text-center"><span id="f" class="h3">°F</span><span id="c" class="h3">°C</span></p> </div> <div class="col-sm-2 col-sm-offset-1 col-xs-4 container"> <h1 id="time" class="text-center">3:32</h1> <p class="text-center"><span id="am" class="h3">AM</span><span id="pm" class="h3">PM</span></p> </div> <div class="col-sm-2 col-sm-offset-1 col-xs-4 container"> <h1 id="sunTime" class="text-center">3:32</h1> <p class="text-center"><span id="sunrise" class="h3">Sunrise</span><span id="sunset" class="h3">Sunset</span></p> </div> </div> <div id="middle" class="row no-gutters"> <div class="col-sm-2 col-sm-offset-3 container"> <h1 id="icon" class="text-center">Current Conditions</h1> <p class="text-center"><span id="iconDescription" class="h4"></span></p> </div> <div class="col-sm-2 col-sm-offset-1 container"> <h1 class="text-center">Wind Speed</h1> <p class="text-center"><span id="windSpeed" class="h4"></span></p> <h1 class="text-center">Wind Direction</h1> <p class="text-center"><span id="windDirection" class="h4"></span></p> </div> </div> <div id="bottom" class="row no-gutters"> <div class="col-sm-10 col-sm-offset-1 container"> <h1 id="location" class="text-center"></h1> </div> </div>
</main> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Weather Data - Script Codes CSS Codes
body { font-size: 10px; background-color: #089508; color: #000;
}
.container { background-color: #3FC13F; border-radius: 4px; border: 2px solid #825600; box-shadow: 4px 4px 8px;
}
#top, #middle { margin-bottom: 40px;
}
.row.no-gutters { margin-right: 0; margin-left: 0;
}
.row:first-child :nth-child(-n + 3) { border-top: 0; border-radius: 0 0 4px 4px;
}
.row:first-child :nth-child(-n + 3) > [class^="col-"], .row:first-child :nth-child(-n + 3) > [class*=" col-"] { padding-right: 0; padding-left: 0;
}
.row:first-child :nth-child(-n + 3) h1 { padding: 5px; font-size: 3.5em;
}
.row:first-child :nth-child(-n + 3) #temp, .row:first-child :nth-child(-n + 3) #time, .row:first-child :nth-child(-n + 3) #sunrise { border-radius: 0 0 5px 5px;
}
.row:first-child :nth-child(-n + 3) #icon, .row:first-child :nth-child(-n + 3) #location { border-radius: 5px;
}
span { padding: 20px;
}
#sunrise .h4 { padding: 10px; width: 40%;
}
#sunset .h4 { padding: 10px; width: 40%;
}
Weather Data - Script Codes JS Codes
function getLocation() { //if geolocation is turned off notify if (!navigator.geolocation) { $("#location").innerHTML = "Geolocation is not supported by your browser"; } //run geolocation if it is turned on else { if('https:' == document.location.protocol){ //Will work only with HTTPS connections navigator.geolocation.getCurrentPosition(function(position) { //call getWeather to run the API with the coordinates getWeather(position.coords.latitude, position.coords.longitude); }); } else { $.ajax({ url:"http://ipinfo.io/json", type: "get", datatype: "jsonp", success: function(data){ var loc = data.loc; var coord = loc.split(','); lat = coord[0]; long = coord[1]; getWeather(lat, long); } }) } }
}
//getWeather Function
function getWeather(lat, lon) { $.ajax({ url: "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+lon+"&APPID=84eec442149c6dceb15c2a724b13f6b5", dataType: 'jsonp', success: function(data) { getTemp(data.main.temp); getTime(data.sys.sunrise, data.sys.sunset); getConditions(data.weather[0].main,data.weather[0].icon); $('#location').html(data.name); getWind(data.wind.speed, data.wind.deg); }, error: $('#location').html('There was an error calling the API!') });
}
//getTemp will convert display and control if temp is clicked to change unit
function getTemp(temp) { var far = (temp * (9 / 5)) - 459.67; far = parseFloat(Math.round(far * 100) / 100).toFixed(2); var cel = temp - 273.15; cel = parseFloat(Math.round(cel * 100) / 100).toFixed(2); $('#temp').html(far + " °F"); $('#c').css("color", "#D3D3D3"); $('#c').click(function() { $('#temp').html(cel + " °C"); $('#f').css("color", "#D3D3D3"); $('#c').css("color", "#000000"); }) $('#f').click(function() { $('#temp').html(far + "°F"); $('#c').css("color", "#D3D3D3"); $('#f').css("color", "#000000"); })
}
//getTime will call convert function, display time and control what is displayed by
//using the click listener
function getTime(sunrise, sunset) { sunrise = convert(sunrise); sunset = convert(sunset); $('#sunTime').html(sunrise + " AM"); $('#sunset').css("color", "#D3D3D3"); //when sunset it clicked, time changes to est sunset and greys out sunrise $('#sunset').on('click', function() { $('#sunTime').html(sunset + " PM"); $('#sunrise').css("color", "#D3D3D3"); $('#sunset').css("color", "#000000"); }); //when sunrise it clicked, time changes to est sunrise and greys out sunset $('#sunrise').on('click', function() { $('#sunTime').html(sunrise + " AM"); $('#sunset').css("color", "#D3D3D3"); $('#sunrise').css("color", "#000000"); });
}
//converts time from unix to a more readable output: 11:11:11
function convert(time) { //turn to milliseconds by *1000 var date = new Date(time * 1000); var hours = date.getHours(); if (hours > 12) { hours -= 12; } var minutes = "0" + date.getMinutes(); var newTime = hours + ':' + minutes.substr(-2); return newTime;
}
function currentTime() { //get current Time var dt = new Date(); var hours = dt.getHours(); if (hours > 12) { hours -= 12; } var minutes = dt.getMinutes(); if (minutes < 10) { minutes = "0" + minutes; } $("#time").html(hours + ":" + minutes); var hours = new Date().getHours(); var hours = (hours + 24 - 2) % 24; if (hours == 0) { //At 00 hours we need to show 12 am hours = 12; $("#am").css("color", "#000000"); $("#pm").css("color", "#D3D3D3"); } else if (hours > 12) { $("#pm").css("color", "#000000"); $("#am").css("color", "#D3D3D3"); }
}
function getWind(speed, direction) { speed *= 2.236936; speed = speed.toFixed(2) $('#windSpeed').html(speed + " MPH"); direction = calculateDirection(direction); $('#windDirection').html(direction);
}
function calculateDirection(direction) { if (direction >= 348.75 || direction <= 11.25) { direction = "N"; } else if (direction >= 11.26 && direction <= 33.75) { direction = "NNE" } else if (direction >= 33.76 && direction <= 56.25) { direction = "NE" } else if (direction >= 56.26 && direction <= 78.75) { direction = "ENE" } else if (direction >= 78.76 && direction <= 101.25) { direction = "E" } else if (direction >= 101.26 && direction <= 123.75) { direction = "ESE" } else if (direction >= 123.76 && direction <= 146.25) { direction = "SE" } else if (direction >= 146.26 && direction <= 168.75) { direction = "SSE" } else if (direction >= 168.76 && direction <= 191.25) { direction = "S" } else if (direction >= 191.26 && direction <= 213.75) { direction = "SSW" } else if (direction >= 213.76 && direction <= 236.25) { direction = "SW" } else if (direction >= 236.26 && direction <= 258.75) { direction = "WSW" } else if (direction >= 258.76 && direction <= 281.25) { direction = "W" } else if (direction >= 281.26 && direction <= 303.75) { direction = "WNW" } else if (direction >= 303.76 && direction <= 326.25) { direction = "NW" } else { direction = "NNW" } return direction;
}
function getConditions(condition, icon) { $('#iconDescription').html(condition); var iconHTML = "<img src='http://openweathermap.org/img/w/" + icon + ".png'></img>" ; $('#icon').html(iconHTML);
}
function checkData(){ var location = $('#location').innerHTML().length; if (location < 1){ var errMsg = "We do not know your location"; $('#location').html(errMsg); }
}
//call initial funtion to start geolocation call
getLocation();
currentTime();
checkData();
Developer | Joel |
Username | HuffmanJ25 |
Uploaded | November 26, 2022 |
Rating | 3 |
Size | 4,707 Kb |
Views | 18,216 |
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!
Name | Size |
Quote Machine | 4,154 Kb |
A Pen by Joel | 5,031 Kb |
Tribute Page - No CSS | 2,231 Kb |
Portfolio Page | 5,240 Kb |
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!
Name | Username | Size |
Blockquote design | Sjmcpherson | 1,863 Kb |
Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
SVG Animation | Thepheer | 4,793 Kb |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Mesmerizing octopus | Jllodra | 3,549 Kb |
Long Shadow Button | Uixcrazy | 3,550 Kb |
Learning FlexBox | Alex_rodrigues | 2,821 Kb |
CSS Heart Loaders | Nourabusoud | 2,161 Kb |
Vue.js Starter | Andymerskin | 1,268 Kb |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
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. Hide Your IP Now!