Local Weather

Developer
Kevin
Size
3,638 Kb
Views
30,360
  1. Local Weather Previews
  2. Local Weather HTML Codes
  3. Local Weather CSS Codes
  4. Local Weather JS Codes

How do I make an local weather?

As part of curriculum at www.freecodecamp.com, I am creating a page that will display local weather.. What is a local weather? How do you make a local weather? This script and codes were developed by Kevin on 27 August 2022, Saturday.

Local Weather Previews
IQ Test

Local Weather - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Local Weather</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main-background container-fluid"> <div class = "title-fonts text-center" id = "testBox"></div> <div class = "city-fonts text-center" id="data"></div> <div class = "text-center" id="weatherIcon"></div> <div id = "currentTime"></div> <div class="row"> <div class = "col-xs-12 col-sm-4"> <div class="weather-box center-block"> <div class="title-fonts text-center section-title">Sun Information</div> <div id="sunClock"></div> </div> </div> <div class = "col-xs-12 col-sm-4"> <div class = "weather-box center-block"> <div class ="title-fonts text-center section-title">Temperature <span id = "tempF">F</span> <span id = "tempC">C</span> </div> <div id = "temperature"></div> </div> </div> <div class = "col-xs-12 col-sm-4"> <div class="weather-box center-block"> <div class="title-fonts text-center section-title">Wind</div> <div id = "windSpeed"></div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Local Weather - Script Codes CSS Codes

.main-background { background-color: #111111; min-height: 100vh
}
i{ color: #eeeeee; font-size: 40px;
}
#weatherIcon{ padding:20px;
}
.city-fonts{ color: #eeeeee; font-family: Montserrat; font-size: 40px; padding-top: 40px;
}
.title-fonts { color: #eeeeee; font-family: Montserrat; font-size: 30px; padding-top: 40px;
}
#currentTime { padding-bottom: 40px;
}
.weather-fonts { color: #eeeeee; font-family: Montserrat; font-size: 24px;
}
#tempF, #tempC { padding: 0 10px 0 10px;
}
.not_selected_temp{ color: #666666; background-color: #333333;
}
.selected_temp { color: #00ccff; background-color: #333333;
}
.section-title { padding-bottom: 40px;
}

Local Weather - Script Codes JS Codes

$(document).ready(function() { $.ajax({ url: "https://api.wunderground.com/api/18aacec6a6cf0451/geolookup/forecast/astronomy/conditions/q/autoip.json", dataType: "jsonp", success: function(weatherData) { var latitude = weatherData['location']['lat']; var longitude = weatherData['location']['lon']; var city = weatherData['location']['city']; var state = weatherData['location']['state'] var temp_f = weatherData['current_observation']['temp_f']; var temp_c = weatherData['current_observation']['temp_c']; var weather = weatherData['current_observation']['weather']; var windDir = weatherData['current_observation']['wind_dir']; var windSpeed = weatherData['current_observation']['wind_mph']; var windScale = weatherData['current_observation']['wind_string']; var weatherIcon = weatherData['current_observation']['icon']; var sunriseHour = weatherData['sun_phase']['sunrise']['hour']; var sunriseMinute = weatherData['sun_phase']['sunrise']['minute']; var sunsetHour = weatherData['sun_phase']['sunset']['hour']; var sunsetMinute = weatherData['sun_phase']['sunset']['minute']; var currentHour = weatherData['moon_phase']['current_time']['hour']; var currentMinute = weatherData['moon_phase']['current_time']['minute']; var totalSunriseMinutes = Number(sunriseHour) * 60 + Number(sunriseMinute); var totalSunsetMinutes = Number(sunsetHour) * 60 + Number(sunsetMinute); var totalCurrentMinutes = Number(currentHour) * 60 + Number(currentMinute); if (totalSunriseMinutes < totalCurrentMinutes) { totalSunriseMinutes += 1440; } if (totalSunsetMinutes < totalCurrentMinutes) { totalSunsetMinutes += 1440; } var timeTilSunriseMinutes = (totalSunriseMinutes - totalCurrentMinutes) % 60; var timeTilSunriseHours = (totalSunriseMinutes - totalCurrentMinutes - timeTilSunriseMinutes) / 60; var timeTilSunsetMinutes = (totalSunsetMinutes - totalCurrentMinutes) % 60; var timeTilSunsetHours = (totalSunsetMinutes - totalCurrentMinutes - timeTilSunsetMinutes) / 60; if (timeTilSunsetMinutes < 10) { timeTilSunsetMinutes = "0" + timeTilSunsetMinutes; } if (timeTilSunriseMinutes < 10) { timeTilSunriseMinutes = "0" + timeTilSunriseMinutes; } /*$('#testBox').html("<p class = 'weather-fonts text-center'> totalCurrentMinutes: "+ totalCurrentMinutes + "<br>totalSunriseMinutes: " + totalSunriseMinutes + "<br>totalSunsetMinutes: " + totalSunsetMinutes + "<br>timeTilSunriseMinutes: " + timeTilSunriseMinutes + "<br>timeTilSunriseHours: " + timeTilSunriseHours + "<br>timeTilSunsetMinutes: " + timeTilSunsetMinutes + "<br>timeTilSunSetHours: " + timeTilSunsetHours);*/ if (Number(currentHour) < Number(sunsetHour) && Number(currentHour) > Number(sunriseHour)) { var iconTime = "sunny" } else { var iconTime = "clear" } /*This switch is super tedious, but the weather icons do not have mapping for night */ switch (weatherIcon) { case "chanceflurries": var currentWeatherIcon = "snow-wind"; break; case "chancerain": var currentWeatherIcon = "rain"; break; case "chancesleat": var currentWeatherIcon = "sleet"; break; case "chancesnow": var currentWeatherIcon = "snow"; break; case "chancetstorms": var currentWeatherIcon = "thunderstorm"; break; case "clear": var currentWeatherIcon = iconTime; break; case "cloudy": var currentWeatherIcon = "cloudy"; break; case "flurries": var currentWeatherIcon = "snow-wind"; break; case "hazy": var currentWeatherIcon = "haze"; break; case "mostlycloudy": var currentWeatherIcon = "cloudy"; break; case "mostlysunny": var currentWeatherIcon = iconTime; break; case "partlycloudy": var currentWeatherIcon = "cloudy"; break; case "partlysunny": var currentWeatherIcon = iconTime; break; case "rain": var currentWeatherIcon = "showers"; break; case "sleat": var currentWeatherIcon = "sleet"; break; case "snow": var currentWeatherIcon = "snow"; break; case "sunny": var currentWeatherIcon = iconTime; break; case "tstorms": var currentWeatherIcon = "thunderstorm"; break; default: var currentWeatherIcon = iconTime; break; } $('#data').append(city + ', ' + state); $('#currentTime').append("<p class = 'weather-fonts text-center'>" + currentHour + ":" + currentMinute + ", " + weather + "</p>"); if (Number(currentHour) < Number(sunsetHour) && Number(currentHour) > Number(sunriseHour)) { $('#weatherIcon').append("<i class='wi wi-day-" + currentWeatherIcon + "'></i>"); } else { $('#weatherIcon').append("<i class='wi wi-night-" + currentWeatherIcon + "'></i>"); } var sendTempF = function() { $("#temperature").html("<p class = 'weather-fonts text-center'>" + temp_f + " F</p>"); }; var sendTempC = function() { $("#temperature").html("<p class = 'weather-fonts text-center'>" + temp_c + " C</p>"); }; sendTempF(); $("#windSpeed").append("<p class = 'weather-fonts text-center'>" + windSpeed + " Mph from the " + windDir + "</p>") $("#sunClock").append("<p class= 'weather-fonts text-center'>The next sunrise is at " + sunriseHour + ":" + sunriseMinute + "<br>The next sunset is at " + sunsetHour + ":" + sunsetMinute + "</p>") /* $("#sunClock").append("<p class= 'weather-fonts text-center'> Sunrise is at: "+sunriseHour+":"+sunriseMinute+"<br>Sunset is at: "+sunsetHour+":"+sunsetMinute+"<br><br>The next sunrise is in "+timeTilSunriseHours+" hours and "+timeTilSunriseMinutes+" minutes<br>The next sunset is in "+timeTilSunsetHours+" hours and "+timeTilSunsetMinutes+" minutes</p>")*/ $('#tempF').addClass('selected_temp'); $('#tempC').addClass('not_selected_temp'); $('#tempF, #tempC').on('click', function() { $('#tempF, #tempC').toggleClass('selected_temp not_selected_temp'); if ($('#tempF').hasClass('selected_temp')) { sendTempF(); } else { sendTempC(); } }); } });
});
Local Weather - Script Codes
Local Weather - Script Codes
Home Page Home
Developer Kevin
Username KevinBruland
Uploaded August 27, 2022
Rating 3
Size 3,638 Kb
Views 30,360
Do you need developer help for Local Weather?

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!

Kevin (KevinBruland) Script Codes
Name
Canvas Circle Illusion
Pomodoro Clock
Simon
Memory
Glossy Buttons
Canvas Optical Illusion
Canvas Mouse Position Radial Gradient
Calculator
Markdown preview
Canvas Gears
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!