Weather Data

Developer
Size
4,707 Kb
Views
18,216

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 Previews

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">&deg;F</span><span id="c" class="h3">&deg;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 + " &deg;F"); $('#c').css("color", "#D3D3D3"); $('#c').click(function() { $('#temp').html(cel + " &deg;C"); $('#f').css("color", "#D3D3D3"); $('#c').css("color", "#000000"); }) $('#f').click(function() { $('#temp').html(far + "&deg;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();
Weather Data - Script Codes
Weather Data - Script Codes
Home Page Home
Developer Joel
Username HuffmanJ25
Uploaded November 26, 2022
Rating 3
Size 4,707 Kb
Views 18,216
Do you need developer help for Weather Data?

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!

Joel (HuffmanJ25) Script Codes
Create amazing SEO content 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!