Weather App

Developer
Matheus
Size
4,587 Kb
Views
48,576
  1. Weather App Previews
  2. Weather App HTML Codes
  3. Weather App CSS Codes
  4. Weather App JS Codes

How do I make an weather app?

What is a weather app? How do you make a weather app? This script and codes were developed by Matheus on 03 September 2022, Saturday.

Weather App Previews
IQ Test

Weather App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weather App</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Cairo">
<body> <button id="changeScale" class="tempConverter"> C/F </button> <h6 id="warning"> Some browsers have security issues with the geolocation function. You should try it with Firefox, setting your url to http</h6> <h2 id="location"></h2> <h3 id="temperature"></h3> <h4 id="weatherConditions"></h4> <div class="icon sun-shower" id="rain-sun"> <div class="cloud"></div> <div class="sun"> <div class="rays"></div> </div> <div class="rain"></div>
</div>
<div class="icon thunder-storm" id="storm"> <div class="cloud"></div> <div class="lightning"> <div class="bolt"></div> <div class="bolt"></div> </div>
</div>
<div class="icon cloudy" id="cloudy"> <div class="cloud"></div> <div class="cloud"></div>
</div>
<div class="icon flurries" id=snow> <div class="cloud"></div> <div class="snow"> <div class="flake"></div> <div class="flake"></div> </div>
</div>
<div class="icon sunny" id="sunny"> <div class="sun"> <div class="rays"></div> </div>
</div>
<div class="icon rainy" id="rain"> <div class="cloud"></div> <div class="rain"></div>
</div> <h5> Animated CSS from <a href="https://codepen.io/joshbader/full/EjXgqr/">joshbader </a></h5> <p id="demo"></p>
</body> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Weather App - Script Codes CSS Codes

button.tempConverter{ background: gray; color: white; position: relative; left: 800px;
}
p { text-align: center;
}
h2 { font-family: 'Cairo', serif; font-size: 380%; color: white; text-align: center; position: relative; top: -100px;
}
h3{ font-family: 'Cairo', serif; font-size: 300%; color: white; position: relative; top: -150px; text-align: center;
}
h4{ font-family: 'Cairo', serif; font-size: 200%; color: white; text-align: center; position: relative; top: -200px;
}
h5{ font-family: 'Cairo', serif; color: white; text-align: center; position: relative; top: -220px;
}
h6{ font-family: 'Cairo', serif; color: white; text-align: center; position: relative; top: -50px
}
#btn1{ background-color: green; border: none; color: white
}
html { box-sizing: border-box; }
html *,
html *:before,
html *:after { box-sizing: inherit; }
body { max-width: 42em; padding: 2em; margin: 0 auto; color: #161616; background-color: currentColor;
}
h1 { margin-bottom: 1.375em; color: #fff; font-weight: 100; font-size: 2em; text-transform: uppercase;
}
p,
a { color: rgba(255,255,255,0.3); font-size: small;
}
p { margin: 1.375rem 0; }
.icon { position: relative; left: 210px; bottom: 250px; display: inline-block; width: 12em; height: 10em; font-size: 1em; /* control icon size here */
}
.cloud { position: absolute; z-index: 1; top: 50%; left: 50%; width: 3.6875em; height: 3.6875em; margin: -1.84375em; background: currentColor; border-radius: 50%; box-shadow: -2.1875em 0.6875em 0 -0.6875em, 2.0625em 0.9375em 0 -0.9375em, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff;
}
.cloud:after { content: ''; position: absolute; bottom: 0; left: -0.5em; display: block; width: 4.5625em; height: 1em; background: currentColor; box-shadow: 0 0.4375em 0 -0.0625em #fff;
}
.cloud:nth-child(2) { z-index: 0; background: #fff; box-shadow: -2.1875em 0.6875em 0 -0.6875em #fff, 2.0625em 0.9375em 0 -0.9375em #fff, 0 0 0 0.375em #fff, -2.1875em 0.6875em 0 -0.3125em #fff, 2.0625em 0.9375em 0 -0.5625em #fff; opacity: 0.3; transform: scale(0.5) translate(6em, -3em); animation: cloud 4s linear infinite;
}
.cloud:nth-child(2):after { background: #fff; }
.sun { position: absolute; top: 50%; left: 50%; width: 2.5em; height: 2.5em; margin: -1.25em; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 0.375em #fff; animation: spin 12s infinite linear;
}
.rays { position: absolute; top: -2em; left: 50%; display: block; width: 0.375em; height: 1.125em; margin-left: -0.1875em; background: #fff; border-radius: 0.25em; box-shadow: 0 5.375em #fff;
}
.rays:before,
.rays:after { content: ''; position: absolute; top: 0em; left: 0em; display: block; width: 0.375em; height: 1.125em; transform: rotate(60deg); transform-origin: 50% 3.25em; background: #fff; border-radius: 0.25em; box-shadow: 0 5.375em #fff;
}
.rays:before { transform: rotate(120deg);
}
.cloud + .sun { margin: -2em 1em;
}
.rain,
.lightning,
.snow { position: absolute; z-index: 2; top: 50%; left: 50%; width: 3.75em; height: 3.75em; margin: 0.375em 0 0 -2em; background: currentColor;
}
.rain:after { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; width: 1.125em; height: 1.125em; margin: -1em 0 0 -0.25em; background: #0cf; border-radius: 100% 0 60% 50% / 60% 0 100% 50%; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); transform: rotate(-28deg); animation: rain 3s linear infinite;
}
.bolt { position: absolute; top: 50%; left: 50%; margin: -0.25em 0 0 -0.125em; color: #fff; opacity: 0.3; animation: lightning 2s linear infinite;
}
.bolt:nth-child(2) { width: 0.5em; height: 0.25em; margin: -1.75em 0 0 -1.875em; transform: translate(2.5em, 2.25em); opacity: 0.2; animation: lightning 1.5s linear infinite;
}
.bolt:before,
.bolt:after { content: ''; position: absolute; z-index: 2; top: 50%; left: 50%; margin: -1.625em 0 0 -1.0125em; border-top: 1.25em solid transparent; border-right: 0.75em solid; border-bottom: 0.75em solid; border-left: 0.5em solid transparent; transform: skewX(-10deg);
}
.bolt:after { margin: -0.25em 0 0 -0.25em; border-top: 0.75em solid; border-right: 0.5em solid transparent; border-bottom: 1.25em solid transparent; border-left: 0.75em solid; transform: skewX(-10deg);
}
.bolt:nth-child(2):before { margin: -0.75em 0 0 -0.5em; border-top: 0.625em solid transparent; border-right: 0.375em solid; border-bottom: 0.375em solid; border-left: 0.25em solid transparent;
}
.bolt:nth-child(2):after { margin: -0.125em 0 0 -0.125em; border-top: 0.375em solid; border-right: 0.25em solid transparent; border-bottom: 0.625em solid transparent; border-left: 0.375em solid;
}
.flake:before,
.flake:after { content: '\2744'; position: absolute; top: 50%; left: 50%; margin: -1.025em 0 0 -1.0125em; color: #fff; list-height: 1em; opacity: 0.2; animation: spin 8s linear infinite reverse;
}
.flake:after { margin: 0.125em 0 0 -1em; font-size: 1.5em; opacity: 0.4; animation: spin 14s linear infinite;
}
.flake:nth-child(2):before { margin: -0.5em 0 0 0.25em; font-size: 1.25em; opacity: 0.2; animation: spin 10s linear infinite;
}
.flake:nth-child(2):after { margin: 0.375em 0 0 0.125em; font-size: 2em; opacity: 0.4; animation: spin 16s linear infinite reverse;
}
/* Animations */
@keyframes spin { 100% { transform: rotate(360deg); }
}
@keyframes cloud { 0% { opacity: 0; } 50% { opacity: 0.3; } 100% { opacity: 0; transform: scale(0.5) translate(-200%, -3em); }
}
@keyframes rain { 0% { background: #0cf; box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } 25% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em #0cf, -1.375em -0.125em 0 rgba(255,255,255,0.2); } 50% { background: rgba(255,255,255,0.3); box-shadow: 0.625em 0.875em 0 -0.125em #0cf, -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 rgba(255,255,255,0.2); } 100% { box-shadow: 0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2), -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; }
}
@keyframes lightning { 45% { color: #fff; background: #fff; opacity: 0.2; } 50% { color: #0cf; background: #0cf; opacity: 1; } 55% { color: #fff; background: #fff; opacity: 0.2; }
}

Weather App - Script Codes JS Codes

//CSS animation from: https://codepen.io/joshbader/full/EjXgqr/
//https://www.w3schools.com/howto/howto_css_modals.asp
$(document).ready(function(){ //prevents browser of caching API data $.ajaxSetup({ cache: false }); //By default, temperature is displayed in ºC var tempScale='C'; //at first, hide all animations $("#rain-sun").hide(); $("#storm").hide(); $("#cloudy").hide(); $("#rain").hide(); $("#sunny").hide(); $("#snow").hide(); var lat; var lon; //get current location var x = document.getElementById("demo"); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(defineLocation); } else { x.innerHTML = "Geolocation is not supported by this browser."; } function defineLocation(position) { //get latitude and longitude lat=position.coords.latitude; lon=position.coords.longitude; x.innerHTML = "Latitude: " + lat + "<br>Longitude: " + lon; //get info from API for the current location var url="http://api.openweathermap.org/data/2.5/weather?lat=" + lat.toString() + "&lon=" + lon.toString() + "&appid=ed32c52ab821a7cd5fbee25bbab0cc7d"; console.log(url); $.getJSON(url, function(result){ $("#warning").hide(); console.log(result); //store received data from the weather API var city = result.name; var countryID = result.sys.country; var temp = result.main.temp; var tempC = temp - 273; //ºC temperature var tempF = temp*(9/5) - 459.57; //ºF temperature var tempMin = result.main.temp_min; var tempMax = result.main.temp_max; var humidity = result.main.humidity; var icon = result.weather[0].main; console.log(city); console.log(countryID); console.log(temp); console.log(humidity); console.log(tempMin); console.log(tempMax); console.log(icon); //sends API info to HTML var y = document.getElementById("location"); y.innerHTML = city + ', ' + countryID; y = document.getElementById("temperature"); y.innerHTML=(Math.round(tempC)).toString() + 'º' + tempScale; y = document.getElementById("weatherConditions"); y.innerHTML = icon; //show animated icon according to weather condition icon=icon.toLowerCase(); switch (icon){ case "clouds": $("#cloudy").show(); break; case "clear": $("#sunny").show(); break; case "thuderstorm": $("#storm").show(); break; case "rain": $("#rain").show(); break; case "snow": $("#snow").show(); break; case "dizzle": $("#rain-sun").show(); break; } $("#changeScale").click(function(){ console.log('function'); console.log('tempScale'); var T = document.getElementById("temperature"); if (tempScale=='C'){ tempScale='F'; T.innerHTML=(Math.round(tempF)).toString() + 'º' + tempScale; } else{ tempScale='C'; T.innerHTML=(Math.round(tempC)).toString() + 'º' + tempScale; } }); }); }
});
Weather App - Script Codes
Weather App - Script Codes
Home Page Home
Developer Matheus
Username MatheusLima92
Uploaded September 03, 2022
Rating 3
Size 4,587 Kb
Views 48,576
Do you need developer help for 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!

Matheus (MatheusLima92) Script Codes
Name
Tic-Tac-Toe Game - v3
Markdown Previewer
Wikipedia viewer
Voting App - register
Camper LeaderBoard
Alumni ECA
VotingApp - Authenticated
Game of Life
Simon Game
Tic-Tac-Toe Game - Jquery
Create amazing blog posts 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!