Dark Sky - Simple 5-day Forecast

Developer
Sky
Size
4,941 Kb
Views
2,024
  1. Dark Sky - Simple 5-day Forecast Previews
  2. Dark Sky - Simple 5-day Forecast HTML Codes
  3. Dark Sky - Simple 5-day Forecast CSS Codes
  4. Dark Sky - Simple 5-day Forecast JS Codes

How do I make an dark sky - simple 5-day forecast?

What is a dark sky - simple 5-day forecast? How do you make a dark sky - simple 5-day forecast? This script and codes were developed by Sky on 29 January 2023, Sunday.

Dark Sky - Simple 5-day Forecast Previews
IQ Test

Dark Sky - Simple 5-day Forecast - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dark Sky - Simple 5-day Forecast</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid text-center"> <h1>Weather App</h1> <p id="location"></p>
</div>
<div id="forecast" class="container">
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js'></script>
<script src='js/mmdaog.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dark Sky - Simple 5-day Forecast - Script Codes CSS Codes

html { height: 100vh;
}
body { background-image: -webkit-linear-gradient( 315deg, #FCCF31 0%, #F55555 100%); background-image: linear-gradient( 135deg, #FCCF31 0%, #F55555 100%); color: #eee; text-align: center; font-family: verdana; font-size: 16px; padding-top: 70px;
}
#forecast { margin-top: 2em;
}
.forecast-day { border: 1px solid #eee; display: inline-block; width: 240px; margin: .5em; box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.date { margin-bottom: 0;
}
.temperature:hover { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: underline;
}
canvas { vertical-align:middle; margin: 1em;
}

Dark Sky - Simple 5-day Forecast - Script Codes JS Codes

"use strict";
// get the location
getCoords().then(getWeather);
// use the location to call the weather API and the Google Maps API for City/Region/Country display
function getWeather(location) { $.getJSON("https://api.darksky.net/forecast/e384cf6eba5746799aff9814ac6c3480/" + location + "?callback=?", handleWeather); $.getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + location, showLocation);
}
function handleWeather(data) { // create HTML for 5 days $('#forecast').empty(); for (var i = 0; i < 5; i++) { $('#forecast').append("<div class=\"forecast-day\" id=\"forecast-day-" + i + "\">\n <p id=\"date-" + i + "\" class=\"date\"></p>\n <span id=\"min-temperature-" + i + "\" class=\"temperature\"></span>\n <canvas id=\"skycon-" + i + "\" height=64 width=64></canvas>\n <span id=\"max-temperature-" + i + "\" class=\"temperature\"></span>\n </div>"); } for (var day in data.daily.data) { showWeather(data.daily.data[day], day); }
}
// show the weather
function showWeather(data, day) { var minfahrenheit = Math.round(data.temperatureMin), mintemperature = { F: minfahrenheit + " &deg;F", C: Math.round((minfahrenheit - 32) * 5 / 9) + " &deg;C", unit: "F" }, maxfahrenheit = Math.round(data.temperatureMax), maxtemperature = { F: maxfahrenheit + " &deg;F", C: Math.round((maxfahrenheit - 32) * 5 / 9) + " &deg;C", unit: "F" }, d = new Date(data.time * 1000); $("#date-" + day).html(d.toLocaleDateString()); // add the temperature data to the temperature element and switch between F/C on click $("#min-temperature-" + day).data(mintemperature).html(mintemperature.F).on("click", function () { $(this).html(mintemperature[mintemperature.unit = mintemperature.unit === "F" ? "C" : "F"]); }); $("#max-temperature-" + day).data(maxtemperature).html(maxtemperature.F).on("click", function () { $(this).html(maxtemperature[maxtemperature.unit = maxtemperature.unit === "F" ? "C" : "F"]); }); // add the icon var skycons = new Skycons({ color: "#eee" }); skycons.add(document.getElementById('skycon-' + day), data.icon); skycons.play();
}
// get city + region + country and display on the page
function showLocation(geoData) { var city = "", region = "", country = ""; geoData.results[0].address_components.forEach(function (addressComponent) { var types = addressComponent.types.join(","); // change "long_name" to "short_name" as desired for formatting if (types === "locality,political") city = addressComponent.long_name; if (types === "administrative_area_level_1,political") region = addressComponent.long_name; if (types === "country,political") country = addressComponent.long_name; }); $("#location").html(city + ", " + region + ", " + country);
}
Dark Sky - Simple 5-day Forecast - Script Codes
Dark Sky - Simple 5-day Forecast - Script Codes
Home Page Home
Developer Sky
Username skycoder
Uploaded January 29, 2023
Rating 3
Size 4,941 Kb
Views 2,024
Do you need developer help for Dark Sky - Simple 5-day Forecast?

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
JSONP Examples with the Dark Sky API
Random Quote Machine
Ionicons
Media Queries
Bootstrap 3 Grid Example
Feather Icons
A Pen by Sky
Use the Twitch.tv JSON API
Portfolio - Work In Progress
Show the Local Weather - and a local background image
Create amazing video scripts 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!