Dark Sky Weather App

Developer
GRAY GHOST
Size
12,458 Kb
Views
6,072
  1. Dark Sky Weather App Previews
  2. Dark Sky Weather App HTML Codes
  3. Dark Sky Weather App CSS Codes
  4. Dark Sky Weather App JS Codes

How do I make an dark sky weather app?

How to use the Dark Sky API to retrieve a forecast for requested latitude and longitude with a sugar coating of motion to make it fun.. What is a dark sky weather app? How do you make a dark sky weather app? This script and codes were developed by GRAY GHOST on 28 January 2023, Saturday.

Dark Sky Weather App Previews
IQ Test

Dark Sky Weather App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dark Sky Weather App</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="app">	<svg id="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 392.533 392.533" aria-hidden="true">	<path style="fill:#FFFFFF;" d="M185.568,21.463c-19.329,0-35.103,15.774-35.103,35.103v135.305c0,4.073-2.263,7.822-5.883,9.632	c-33.487,17.325-52.234,52.752-47.838,90.246c4.784,40.663,37.818,73.503,78.481,78.028c27.41,3.103,54.238-6.335,73.568-25.665	c16.937-16.937,26.182-39.305,26.182-63.224c0-33.552-18.554-64-48.42-79.451c-3.62-1.875-5.883-5.624-5.883-9.632V56.63	C220.671,37.236,204.897,21.463,185.568,21.463z"/>	<path style="fill:#56ACE0;" d="M185.568,235.119c-25.277,0-45.834,20.558-45.834,45.834c0,25.277,20.558,45.834,45.834,45.834	s45.834-20.558,45.834-45.834C231.402,255.677,210.844,235.119,185.568,235.119z"/>	<g>	<path style="fill:#194F82;" d="M196.493,214.562V59.927c0-6.012-4.848-10.925-10.925-10.925c-6.012,0-10.925,4.848-10.925,10.925	v154.634c-32.129,5.236-56.695,33.099-56.695,66.715c0,37.301,30.384,67.62,67.62,67.62s67.62-30.384,67.62-67.62	C253.188,247.725,228.622,219.863,196.493,214.562z M185.568,327.111c-25.277,0-45.834-20.558-45.834-45.834	s20.558-45.834,45.834-45.834s45.834,20.558,45.834,45.834S210.844,327.111,185.568,327.111z"/>	<path style="fill:#E81E63;" d="M273.81,45.576h11.636c6.012,0,10.925-4.848,10.925-10.925c0-6.012-4.848-10.925-10.925-10.925	H273.81c-6.012,0-10.925,4.848-10.925,10.925C262.949,40.727,267.798,45.576,273.81,45.576z"/>	<path style="fill:#E81E63;" d="M273.81,89.083h33.487c6.012,0,10.925-4.848,10.925-10.925c0-6.012-4.848-10.99-10.925-10.99H273.81	c-6.012,0-10.925,4.848-10.925,10.925C262.949,84.17,267.798,89.083,273.81,89.083z"/>	<path style="fill:#E81E63;" d="M273.81,132.525h11.636c6.012,0,10.925-4.848,10.925-10.925c0-6.012-4.848-10.925-10.925-10.925	H273.81c-6.012,0-10.925,4.848-10.925,10.925C262.949,127.677,267.798,132.525,273.81,132.525z"/>	<path style="fill:#E81E63;" d="M307.297,154.246H273.81c-6.012,0-10.925,4.848-10.925,10.925c0,6.012,4.848,10.925,10.925,10.925	h33.487c6.012,0,10.925-4.848,10.925-10.925C318.158,159.095,313.309,154.246,307.297,154.246z"/>	<path style="fill:#E81E63;" d="M242.457,185.729V56.889C242.457,25.535,216.986,0,185.568,0l0,0l0,0	c-31.354,0-56.889,25.471-56.889,56.889v128.905c-33.681,20.04-54.368,56.048-54.368,95.483	c0,66.521,55.014,111.257,111.257,111.257l0,0l0,0c56.178,0,111.257-44.735,111.257-111.257	C296.824,241.778,276.137,205.77,242.457,185.729z M185.568,370.747c-49.519,0-89.277-40.792-89.471-89.471	c0-33.551,18.554-64,48.42-79.451c3.62-1.875,5.883-5.624,5.883-9.632V56.889c0-19.329,15.774-35.103,35.103-35.103l0,0l0,0	c19.329,0,35.103,15.774,35.103,35.103v135.305c0,4.073,2.263,7.822,5.883,9.632c29.931,15.451,48.42,45.899,48.42,79.451	C274.715,329.956,235.087,370.747,185.568,370.747z"/>	</g>	</svg>	<form method="get" class="form">	<fieldset>	<legend>If searching by city the latitude and longitude input fields will autofill your coords.</legend>	<ul class="list-reset">	<li class="form-field">	<label for="city-search">City Name</label>	<input type="text" id="city-search" placeholder="e.g. Rochester, NY">	</li>	<li class="form-field">	<label for="latitude">Latitude</label>	<input type="text" id="latitude" placeholder="e.g. 42.9150747" required>	</li>	<li class="form-field">	<label for="longitude">Longitude</label>	<input type="text" id="longitude" placeholder="e.g. -77.784323" required>	</li>	<li class="form-field">	<input type="checkbox" id="celsius">	<label for="celsius">Report Celsius</label>	</li>	</ul>	</fieldset>	<button>Get Weather</button>	</form>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js'></script>
<script src='js/a08e0d79c150ff5030f9b6afa.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dark Sky Weather App - Script Codes CSS Codes

*:before,
*:after { box-sizing: inherit;
}
html { box-sizing: border-box; font: normal 100%/1.25 'Alegreya Sans', sans-serif;
}
html,
body { height: 100%;
}
body { position: relative; width: 100%; background-attachment: fixed; background-color: #512DA8; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/city-skyline.svg); background-position: bottom center; background-repeat: repeat-x; background-size: 800px;
}
::-webkit-input-placeholder { color: #C9C9C9;
}
:-moz-placeholder { color: #C9C9C9;
}
::-moz-placeholder { color: #C9C9C9;
}
:-ms-input-placeholder { color: #C9C9C9;
}
legend { margin-bottom: 1rem; font-size: 1em; color: rgba(255, 255, 255, 0.8);
}
fieldset { border: none; padding: 0; color: white;
}
label { font-weight: 400;
}
button,
input[type="text"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: 2px;
}
input[type="text"] { box-sizing: border-box; box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.75); display: block; margin: 0 0 0.875rem; padding: 0.875rem; font-weight: 400;
}
button:not(#back) { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.15); max-width: 410px; margin-top: 1rem; padding: 0.875rem; -webkit-transition: 200ms all ease-in-out; transition: 200ms all ease-in-out; width: 100%; font-weight: 700; text-transform: uppercase; background: #E81E63; color: white;
}
button:not(#back):hover { cursor: pointer; background: #cd1554;
}
.flip-container { -webkit-perspective: 1000px; perspective: 1000px;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.flip-container,
.front,
.back { height: 100%; min-height: 290px; width: 200px;
}
.flipper { -webkit-transition: 500ms; transition: 500ms; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative;
}
.front,
.back { -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0;
}
.front { z-index: 2;
}
.back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.fadein-stagger > * { opacity: 0;
}
.fadein-stagger > *.js-animated { opacity: 1; -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0);
}
.fadein-stagger > * { -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; -webkit-transition-duration: 200ms; transition-duration: 200ms; -webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); -webkit-transform: translateY(-30px); transform: translateY(-30px);
}
.fadein-stagger > *:nth-of-type(1) { -webkit-transition-delay: 50ms; transition-delay: 50ms;
}
.fadein-stagger > *:nth-of-type(2) { -webkit-transition-delay: 100ms; transition-delay: 100ms;
}
.fadein-stagger > *:nth-of-type(3) { -webkit-transition-delay: 150ms; transition-delay: 150ms;
}
.fadein-stagger > *:nth-of-type(4) { -webkit-transition-delay: 200ms; transition-delay: 200ms;
}
.fadein-stagger > *:nth-of-type(5) { -webkit-transition-delay: 250ms; transition-delay: 250ms;
}
.fadein-stagger > *:nth-of-type(6) { -webkit-transition-delay: 300ms; transition-delay: 300ms;
}
.fadein-stagger > *:nth-of-type(7) { -webkit-transition-delay: 350ms; transition-delay: 350ms;
}
.fadein-stagger > *:nth-of-type(8) { -webkit-transition-delay: 400ms; transition-delay: 400ms;
}
.app { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%;
}
#logo { height: 100px; margin-bottom: 0.5rem; width: 100px;
}
.form { max-width: 410px; width: 100%; color: white;
}
.form ul { overflow: auto;
}
#city-search { width: 100%;
}
.form-field:nth-of-type(2) { float: left; width: auto;
}
.form-field:nth-of-type(3) { float: right; width: auto;
}
.form-field:nth-of-type(4) { clear: both;
}
.city { position: absolute; top: 0; left: 0; right: 0; margin-bottom: 0; width: 100%; font-weight: 700; text-align: center; color: white;
}
.summary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 40px; padding: 0.75rem; position: absolute; left: 0; right: 0; bottom: 0; margin-bottom: 0; margin-top: 1.75rem; font-size: 0.875rem; font-weight: 400; background: #673AB7; color: white;
}
.hourly { word-wrap: break-word;
}
.hourly b { display: block; padding: 0.5rem; text-align: center; background: #673AB7; color: white;
}
.hourly ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0.5rem;
}
.hourly ul li { margin: 0.1875rem;
}
.hourly ul li:not(:last-of-type)::after { content: ',';
}
#back { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-transition: 200ms all ease-in-out; transition: 200ms all ease-in-out; padding: 0.5rem; position: absolute; top: 10px; left: 10px; z-index: 1; background: #E81E63; font-size: 12px; font-weight: 700; line-height: 1; text-transform: uppercase; background: #E81E63; color: white;
}
#back:hover { cursor: pointer; background: #cd1554;
}
.graphic { width: 100%; padding: 1rem; margin-left: -1rem; margin-top: -1rem; margin-bottom: 1rem; background: #673AB7;
}
.graphic canvas { display: block; height: 100%; width: 100%;
}
#forecast { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 100%; margin: auto; max-width: 900px; padding-left: 0; width: 100%;
}
#forecast > li { margin: 0.475rem;
}
.card { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); background: #673AB7; color: white;
}
.card:hover { cursor: pointer;
}
.card.front > div { padding: 1rem;
}
input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1;
}
label[for="celsius"],
label[for="celsius"]::before { -webkit-transition: 200ms all ease-in-out; transition: 200ms all ease-in-out;
}
label[for="celsius"] { position: relative; display: inline-block; margin-bottom: 4px; padding-top: 4px; padding-left: 30px; padding-right: 10px; line-height: 1.5; cursor: pointer;
}
label[for="celsius"]::before { content: " "; position: absolute; top: 2px; left: 0; right: 0; display: block; width: 20px; height: 20px; border: 2px solid #512DA8; border-radius: 2px; z-index: -1;
}
input[type="checkbox"]:checked + label { padding-left: 10px; color: white;
}
input[type="checkbox"]:checked + label::before { top: 0; width: 100%; height: 100%; background: #512DA8;
}
.list-reset { list-style-type: none; margin: 0; padding: 0;
}

Dark Sky Weather App - Script Codes JS Codes

// =================================================
// Stagger Fade-In
// =================================================
function staggerFade() {	setTimeout(function() {	$('.fadein-stagger > *').each(function() {	$(this).addClass('js-animated');	})	}, 30);
}
// =================================================
// Skycons
// =================================================
function skycons() {	var i,	icons = new Skycons({	"color" : "#FFFFFF",	"resizeClear": true	}),	list = [	"clear-day",	"clear-night",	"partly-cloudy-day",	"partly-cloudy-night",	"cloudy",	"rain",	"sleet",	"snow",	"wind",	"fog"	];	for(i = list.length; i--;) {	var weatherType = list[i],	elements = document.getElementsByClassName( weatherType );	for (e = elements.length; e--;) {	icons.set(elements[e], weatherType);	}	}	icons.play();
}
// =================================================
// Temperature Converter
// =================================================
function fToC(fahrenheit) {	var fTemp = fahrenheit,	fToCel = (fTemp - 32) * 5 / 9;	return fToCel;
}
// =================================================
// Weather Reporter
// =================================================
function weatherReport(latitude, longitude) {	// Please don't be a dick and steal this API key since	// I'm sharing example code in the spirit of education.	var apiKey = '90102bf0cdb247ff47fce774ef05fbe9',	url = 'https://api.darksky.net/forecast/',	lati = latitude,	longi = longitude,	api_call = url + apiKey + "/" + lati + "," + longi + "?extend=hourly&callback=?";	var days = [	'Sunday',	'Monday',	'Tuesday',	'Wednesday',	'Thursday',	'Friday',	'Saturday'	];	// hold hourly values for each day of the week	var sunday = [],	monday = [],	tuesday = [],	wednesday = [],	thursday = [],	friday = [],	saturday = [];	var isCelsiusChecked = $('#celsius:checked').length > 0;	function hourlyReport(day, selector) {	for(var i = 0, l = day.length; i < l; i++) {	$("." + selector + " " + "ul").append('<li>' + Math.round(day[i]) + '</li>');	}	}	$.getJSON(api_call, function(forecast) {	for(var j = 0, k = forecast.hourly.data.length; j < k; j++) {	var hourly_date = new Date(forecast.hourly.data[j].time * 1000),	hourly_day = days[hourly_date.getDay()],	hourly_skicons = forecast.hourly.data[j].icon,	hourly_time = forecast.hourly.data[j].time,	hourly_temp = forecast.hourly.data[j].temperature;	if(isCelsiusChecked) {	hourly_temp = fToC(hourly_temp);	hourly_temp = Math.round((hourly_temp));	}	switch(hourly_day) {	case 'Sunday':	sunday.push(hourly_temp);	break;	case 'Monday':	monday.push(hourly_temp);	break;	case 'Tuesday':	tuesday.push(hourly_temp);	break;	case 'Wednesday':	wednesday.push(hourly_temp);	break;	case 'Thursday':	thursday.push(hourly_temp);	break;	case 'Friday':	friday.push(hourly_temp);	break;	case 'Saturday':	saturday.push(hourly_temp);	break;	default: console.log(hourly_date.toLocaleTimeString());	break;	}	}	for(var i = 0, l = forecast.daily.data.length; i < l - 1; i++) {	var date = new Date(forecast.daily.data[i].time * 1000),	day = days[date.getDay()],	skicons = forecast.daily.data[i].icon,	time = forecast.daily.data[i].time,	humidity = forecast.daily.data[i].humidity,	summary = forecast.daily.data[i].summary,	temp = Math.round(forecast.hourly.data[i].temperature),	tempMax = Math.round(forecast.daily.data[i].temperatureMax);	if(isCelsiusChecked) {	temp = fToC(temp);	tempMax = fToC(tempMax);	temp = Math.round(temp);	tempMax = Math.round(tempMax);	}	$("#forecast").append(	'<li class="shade-'+ skicons +'"><div class="flip-container"><div class="flipper"><div class="front card"><div>' +	"<div class='graphic'><canvas class=" + skicons + "></canvas></div>" +	"<div><b>Day</b>: " + date.toLocaleDateString() + "</div>" +	"<div><b>Temperature</b>: " + temp + "</div>" +	"<div><b>Max Temp.</b>: " + tempMax + "</div>" +	"<div><b>Humidity</b>: " + humidity + "</div>" +	'<p class="summary">' + summary + '</p>' +	'</div></div><div class="back card">' +	'<div class="hourly' + ' ' + day + '"><b>24hr Forecast</b><ul class="list-reset"></ul></div></div></div></div></li>'	);	switch(day) {	case 'Sunday':	hourlyReport(sunday, days[0]);	break;	case 'Monday':	hourlyReport(monday, days[1]);	break;	case 'Tuesday':	hourlyReport(tuesday, days[2]);	break;	case 'Wednesday':	hourlyReport(wednesday, days[3]);	break;	case 'Thursday':	hourlyReport(thursday, days[4]);	break;	case 'Friday':	hourlyReport(friday, days[5]);	break;	case 'Saturday':	hourlyReport(saturday, days[6]);	break;	}	}	skycons();	staggerFade();	});
}
// =================================================
// Get Weather Button Event
// =================================================
$('button').on('click', function(e) {	var lat = $('#latitude').val(),	long = $('#longitude').val(),	city_name = $('#city-search').val()	if(lat && long !== '') {	e.preventDefault();	$('.app').fadeOut(100, function() {	$('body').append('<button id="back">New Forecast</button><h3 class="city">' + city_name + '</h3><ul class="list-reset fadein-stagger" id="forecast"></ul>');	weatherReport(lat, long);	});	}
});
$('body').on('click', '#back', function() {	window.location.reload(true);	$(this).fadeOut(100);
})
// =================================================
// Report City & AutoFill Coords
// =================================================
// Please don't be a dick and steal this API key since
// I'm sharing example code in the spirit of education.
function insertGoogleScript() {	var google_api = document.createElement('script');	google_api.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDvTrJlRYQjtX5-sBdU-EcZak63XzCKkpw&callback=initGoogleAPI&libraries=places,geometry";	document.body.appendChild(google_api);
}
function initGoogleAPI() {	var autocomplete = new google.maps.places.SearchBox(document.querySelector("#city-search"));	autocomplete.addListener('places_changed', function() {	var place = autocomplete.getPlaces()[0];	document.querySelector("#latitude").value = place.geometry.location.lat();	document.querySelector("#longitude").value = place.geometry.location.lng();	});
}
insertGoogleScript();
Dark Sky Weather App - Script Codes
Dark Sky Weather App - Script Codes
Home Page Home
Developer GRAY GHOST
Username grayghostvisuals
Uploaded January 28, 2023
Rating 3
Size 12,458 Kb
Views 6,072
Do you need developer help for Dark Sky Weather App?

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!

GRAY GHOST (grayghostvisuals) Script Codes
Name
Mocean SliderModals
Polyon Lion Enhanced
Follow My Mouse
The Wheel of Circles
Off Canvas Overlay Full Screen
Rotating Cube
Bouncy Little Dribbble Preloader
Filter Animation
Polybird
Grayscale Filter
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!