Create a weather frame that allows users to get the weather of which ever city t
ID: 3775629 • Letter: C
Question
Create a weather frame that allows users to get the weather of which ever city they want This is the javascript code. Can anyone tell me how to add html and/or css to this code to make it run
$(function SetUnits () { switch (localStorage.getItem("Units")) { case null: if (window.navigator.language == "en-US") { localStorage.Units = "imperial"; $("#far").removeClass("inactive"); $("#far").addClass("active"); } else { localStorage.Units = "metric"; $("#cel").removeClass("inactive"); $("#cel").addClass("active"); } break; case "metric": $("#cel").removeClass("inactive"); $("#cel").addClass("active"); break; case "imperial": $("#far").removeClass("inactive"); $("#far").addClass("active"); break; } }); function SetCelsius(){ localStorage.Units = "metric"; $("#cel").removeClass("inactive"); $("#cel").addClass("active"); $("#far").removeClass("active"); $("#far").addClass("inactive"); location.reload(); } function SetFahrenheit() { localStorage.Units = "imperial"; $("#far").removeClass("inactive"); $("#far").addClass("active"); $("#cel").removeClass("active"); $("#cel").addClass("inactive"); location.reload(); } $(function geolocation (){ if (navigator.geolocation){ navigator.geolocation.getCurrentPosition(getcoordinates,showError); } else { $("#weather").html("Geolocation is not supported by this browser."); } }); function getcoordinates(position) { var lat=position.coords.latitude; var long=position.coords.longitude; var units=localStorage.getItem("Units"); var CurrentWeatherURL = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&units="+units; var DailyForecastURL = "http://api.openweathermap.org/data/2.5/forecast/daily?lat="+lat+"&lon="+long+"&units="+units+"&cnt=1"; if (units == "imperial") { getWeather(CurrentWeatherURL, DailyForecastURL, "F", "mph") } else { getWeather(CurrentWeatherURL, DailyForecastURL, "C", "m/s") } } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: $("#weather").html("User denied the request for Geolocation."); break; case error.POSITION_UNAVAILABLE: $("#weather").html("Location information is unavailable."); break; case error.TIMEOUT: $("#weather").html("The request to get user location timed out."); break; case error.UNKNOWN_ERROR: $("#weather").html("An unknown error occurred."); break; } } var data_timestamp=Math.round(new Date().getTime() / 1000); function getWeather(data_url, forecast_url, temp, wind) { $.ajax ({ url: data_url, type: 'GET', cache: false, dataType: "jsonp", success: function(data) { localStorage.WeatherCache = JSON.stringify(data); }, error: function (errorData) { $("#weather").html("Error retrieving current weather data :: "+ errorData.status); } }); $.ajax ({ url: forecast_url, type: 'GET', cache: false, datatype: "jsonp", success: function(data) { localStorage.ForecastCache = JSON.stringify(data); displayData(temp, wind); }, error: function (errorData) { $("#forecast").html("Error retrieving forecast data :: "+ errorData.status); } }); localStorage.timestamp = data_timestamp; }; function displayData(temp_units, wind_units) { try { // If the timestamp is newer than 30 minutes, parse data from cache if ( localStorage.getItem('timestamp') > data_timestamp - 1800){ var data = JSON.parse(localStorage.WeatherCache); var forecast = JSON.parse(localStorage.ForecastCache); document.body.style.background = "url('assets/backgrounds/" +data.weather[0].icon+ ".jpg') no-repeat fixed 50% 50%"; document.body.style.backgroundSize = "cover"; $("#weather").html('<h2>' + data.name + '</h2><img class="icon" src="assets/icons/'+data.weather[0].icon+'.png"><span id="temp">'+ data.main.temp + ' </span><span id="units">°'+temp_units+'</span><p id="description">'+ data.weather[0].description + '</p><p><span id="humidity">'+ data.main.humidity + '% humidity</span> '+ Math.round(data.wind.speed) + wind_units +' wind</p>'); $("#forecast").html('<p id="daily">Today's Forecast: '+forecast.list[0].weather[0].main+'</p><p>max: '+Math.round(forecast.list[0].temp.max)+'°'+temp_units+' min: ' +Math.round(forecast.list[0].temp.min)+'°'+temp_units+'</p>'); } else { geolocation (); } } catch(error){ window.console && console.error(error); } }
Explanation / Answer
By using following HTML code you can start modifying your program your js have SetCelsius() and SetFahrenheit() function you can use toggle button so user can switch between this pass id to this two like "cel" and "far" if you know we can access id in javascript by using "#idname" or access class by using ".classname".
You can show loading gif image at the time of page load and give the ajax call to your API that will pass you some JSON parameter have to parse this JSON data and show this in instead on gif image for this use id "weather".
You can use separated files for HTML, javascript and CSS so it will reduce the confusion call weather.js file you create this file and put your code into it.
You can use DateTime box to set date and time.
<html>
<body>
<form id="toggle">
<button type="button" id="cel" class="inactive">°C</button>
<button type="button" id="far" class="inactive">°F</button>
</form>
<article>
<section id="weather">
<img alt="loading" id="spinner" src="assets/spinner.gif">
</section>
<section id="forecast">
<noscript>This application requires JavaScript to function. Please enable scripts in your browser.</noscript>
</section>
</article>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/weather.js"></script>
</body>
</html>
If you have any query reach out will help you.
Thanks.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.