Show the Local Weather - and a local background image

Developer
Sky
Size
8,205 Kb
Views
6,072
  1. Show the Local Weather - and a local background image Previews
  2. Show the Local Weather - and a local background image HTML Codes
  3. Show the Local Weather - and a local background image CSS Codes
  4. Show the Local Weather - and a local background image JS Codes

How do I make an show the local weather - and a local background image?

What is a show the local weather - and a local background image? How do you make a show the local weather - and a local background image? This script and codes were developed by Sky on 29 January 2023, Sunday.

Show the Local Weather - and a local background image Previews
IQ Test

Show the Local Weather - and a local background image - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Show the Local Weather - and a local background image</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Show the Local Weather Project Features: - ip-based location fallback - reverse geocode for accurate city name display - Google Places API for local background image - An image carousel feature for choosing different local background images - Local temperature and weather condition display - Animated weather icon thanks to the skycons library - jQuery .data() api to switch between Celsius/Fahrenheit
-->
<main> <div class="container center-align"> <div class="row"> <div id="weather-data" class="hoverable col s10 offset-s1 m6 offset-m3 left-align"> <span id="weather-info" class="center-align"> <div class="city">Loading . . .</div> <div id="temperature" class="temperature"><a href="#"></a></div> <div class="condition"></div> <div class="center-align"><canvas id="icon" width="96" height="96"></canvas></div> </span> <div id="disclaimer"></div> </div> </div> <div id="carousel" class="row hide"></div> </div> <div id="map"></div>
</main>
<footer> <p><a target="_blank" href="https://darksky.net/poweredby/">Powered by Dark Sky</a> and the Google Places API</p>
</footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/darkskyapp/skycons/master/skycons.js'></script>
<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyA3Kdvk0ObI5MHofjuJiOtBS1RtSKZKRtI&libraries=places'></script> <script src="js/index.js"></script>
</body>
</html>

Show the Local Weather - and a local background image - Script Codes CSS Codes

html { margin: 0 auto; max-width: 2048px;
}
body { color: #eee; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-family: 'Roboto', sans-serif; min-height: 100vh; min-width: 280px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
main { background-attachment: fixed; background-color: #222; background-position: center center; background-repeat: no-repeat; background-size: cover; min-height: 100%; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; padding-top: 50px;
}
#weather-data { background-color: rgba(0, 0, 0, .7); border-radius: 10px; padding: 2em;
}
.city { font-size: 2em; margin-top: -.25em;
}
.temperature { cursor: pointer; font-size: 1.75em; margin: .5em;
}
.condition { font-size: 1.25em; margin-bottom: .75em;
}
#carousel { background-color: rgba(0,0,0,0.4); bottom: 40px; font-size: 0; left: 50%; margin-bottom: 0; margin-left: -50vw; max-width: 100vw; overflow-x: hidden; right: 0; position: absolute; text-align: center; white-space: nowrap;
}
#carousel img { border: 1px solid black; cursor: pointer; height: 100px;
}
footer { background-color: rgb(0,0,0); color: #777; font-size: 12px; height: 40px; text-align: center; border-top: 1px solid black;
}
footer a { color: #777; margin-bottom: 0;
}
footer p { padding-top: 10px; margin-top: 0; margin-bottom: 0;
}
footer a:hover { text-decoration: underline;
}
#map { display: none;
}

Show the Local Weather - and a local background image - Script Codes JS Codes

"use strict";
// global google maps authentication failure function
var gm_authFailure = function gm_authFailure() { return noGoogleMaps();
};
// Try navigator.geolocation first because it is most accurate. If it fails, try ipinfo.io
function getLocation() { var geoSuccess = function geoSuccess(pos) { return reverseGeoCode([pos.coords.latitude, pos.coords.longitude]); }, geoFail = function geoFail() { return $.getJSON("https://ipinfo.io/json", function (pos) { return reverseGeoCode(pos.loc); }); }; navigator.geolocation.getCurrentPosition(geoSuccess, geoFail);
}
// use the Google Maps reverse geocode API to get the city name and place ID
function reverseGeoCode(coords) { $.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + coords, function (geoData) { var city = "", region = "", country = "", placeId = ""; // get city + state/prefecture/province + country/region geoData.results[0].address_components.forEach(function (component) { var types = component.types.join(","); if (types === "locality,political") city = component.long_name; if (!city && types === "administrative_area_level_2,political") city = component.short_name; if (types === "administrative_area_level_1,political") region = component.short_name; if (types === "country,political") country = component.short_name; }); var address = [city, region, country]; if (!city) var address = [region, country]; address = address.join(', '); // I try for a specificity of 5 for a general location that is most likely to have photos // need to work on this, check if photos exist, then get more/less specific... for (var i = 0; i <= 5; i++) { if (geoData.results[i]) placeId = geoData.results[i].place_id; }getWeather(coords, address, placeId); });
}
// Get the weather data
function getWeather(coords, address, id) { var url = "https://api.darksky.net/forecast/24a7ea7b089f40egg1cfc9e57775fg8d/" + coords, params = "/?units=auto&exclude=minutely,hourly,daily&callback=?"; $.getJSON(url.replace(/g/g, "d").replace(/0/g, "9") + params, function (data) { return displayWeather(data, address, id); });
}
// show the weather
function displayWeather(weatherData, address, id) { // We automatically display the weather units based on the user's location // Determine what units we got from the API and convert to Fahrenheit or Celsius var temperature = Math.round(weatherData.currently.apparentTemperature), unit = weatherData.flags.units === "us" ? "F" : "C", temperatureData = { C: unit === "C" ? temperature : Math.round((temperature - 32) * 5 / 9), F: unit === "F" ? temperature : Math.round(temperature * 9 / 5 + 32), unit: unit }; // add the weather details to the page $("#weather-info").html("<div class=\"city\">" + address + "</div>\n <div id=\"temperature\" class=\"temperature\">" + temperature + " &deg;<a href=\"#\">" + unit + "</a></div>\n <div class=\"condition\">" + weatherData.currently.summary + "</div>\n <div class=\"center-align\"><canvas id=\"icon\" width=\"96\" height=\"96\"></canvas></div>"); // jQuery .data() api to store celsius + fahenheit + toggle $("#temperature").data(temperatureData).on("click", function () { $(this).data().unit === "F" ? $(this).data().unit = "C" : $(this).data().unit = "F"; $(this).html($(this).data()[$(this).data().unit] + " &deg;<a href=\"#\">" + $(this).data().unit + "</a>"); }); // Add the weather icon, register temperature conversion click handlers, // and get the location-specific background image addSkyCons(weatherData.currently.icon); // Google Places API Key referrer set to not work in codepen iFrames to prevent abuse !id || window.location.pathname.includes("boomerang") ? noGoogleMaps() : getBgImage(id);
}
// user the Google Places API to get a local photo
function getBgImage(id) { console.log(id); new google.maps.places.PlacesService(new google.maps.Map($("#map")[0])).getDetails({ placeId: id }, function (place, status) { if (!place.photos) { noGoogleMaps(); return; } // get width/height of screen to display best image resolution possible var screenWidth = $("main").width(), screenHeight = $("main").height(), imageDimensions = screenWidth > screenHeight ? { maxWidth: screenWidth } : { maxHeight: screenHeight }; var photos = place.photos.filter(function (photoObj) { return photoObj.width >= screenWidth && photoObj.height >= screenHeight; }).map(function (photo) { return photo.getUrl(imageDimensions); }); // Append each image to the carousel photos.forEach(function (url) { return $("#carousel").append("<img src=\"" + url + "\">"); }); $("#carousel img").css('width', '150px').on("click", function (e) { $("main").css("background-image", "url('" + e.currentTarget.src + "')"); }); displayFinalPage(photos[0]); });
}
// display the final page once the image has loaded
// To do, set background and then load image carousel for faster load time
function displayFinalPage(url) { $("main").css("background-image", "url(\"" + url + "\")"); // Fade in the page and hide the loading spinner now that we have data ready to display $(".hide").removeClass("hide"); $("body").hide().fadeIn(3000); // Ensure location image carousel is always centered despite screen width centerCarouselOverflow(); $(window).on("resize", centerCarouselOverflow); // if the carousel is wider than the window, center it function centerCarouselOverflow() { var windowWidth = window.innerWidth, carouselWidth = $("#carousel")[0].scrollWidth; carouselWidth > windowWidth ? $("#carousel").css("overflow-x", "scroll").scrollLeft((carouselWidth - windowWidth) * 0.5) : $("#carousel").css("overflow-x", ""); }
}
// add the skycon to the page: https://darkskyapp.github.io/skycons/
function addSkyCons(icon) { var skycons = new Skycons({ color: "#eee" }); skycons.add($("#icon")[0], icon); skycons.play();
}
// If google Maps doesn't load, give a random background image
// and tell people how to view it outside of CodePen iframes for local backgrounds
function noGoogleMaps() { if ($('main').css('background-image') != 'none') return; displayFinalPage("https://source.unsplash.com/category/nature/1600x900"); $("#disclaimer").html("<div class=\"center-align\"><br>\n * Open in \"<a href=\"https://codepen.io/skycoder/full/GrQBdw/\" target=\"_blank\">Full</a>\" \n view for local background images.\n </div>");
}
$(getLocation);
Show the Local Weather - and a local background image - Script Codes
Show the Local Weather - and a local background image - Script Codes
Home Page Home
Developer Sky
Username skycoder
Uploaded January 29, 2023
Rating 3
Size 8,205 Kb
Views 6,072
Do you need developer help for Show the Local Weather - and a local background image?

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!

Sky (skycoder) Script Codes
Name
Bootstrap 3 Grid Example
Wikipedia Viewer
FCC Leaderboard - vanilla JS
Ionicons
Media Queries
JSONP Examples with the Dark Sky API
Dark Sky - Simple 5-day Forecast
Colors and Sounds
Vanilla JS Forismatic Example
Use the Twitch.tv JSON API
Create amazing Facebook ads 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!