Weather App
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 Ben on 08 August 2022, Monday.
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> <h1>Free Code Camp Weather App</h1>
<div class="presentation"> <p id="location"></p> <p id="degrees"></p> <p id="loading">Loading ...</p> <a></a> <p id="skys"></p> <img>
</div>
<!--<div class="data"> <h2>Data</h2> <h3>IP INFO Response</h3> <p id="y"></p> <h3>URL</h3> <p id="z"></p> <h3>Json Response</h3> <p id="x"></p>
</div>--> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Weather App - Script Codes CSS Codes
body { background-color:#000; color:#fff; text-align:center;}
h1 { font-size:3em; margin-top: 1em; margin-bottom: 1.5em;
}
.presentation { margin:1.5em; font-size:1.75em;
}
a {text-indent: 5em !important; font-size:0.7em !important; color:blue !important; display:inline;
}
.data {margin:2em;
display: none;}
.data h2 {font-size:1.75em;}
.data h3 {font-size:1.2em;}
.data p {font-size: 1em;}
#degrees { color:white; display:inline;
}
Weather App - Script Codes JS Codes
$(document).ready( function (){ console.log('doc.ready begin'); var url = "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&APPID=eca3952decbf7caee363d408bf0b3906"; var cTurn = true; var tempBase function setTemp (){ console.log('SetTemp started') var tempStr; var aStr = ''; if (cTurn==true){ console.log('true case') var tempC = Math.round(tempBase) tempStr = "Degrees: " + tempC + ' C'; aStr = '(fahrenheit)'; } else { console.log('False case') var tempF= Math.round(32 + ((9/5)*tempBase)); tempStr = "Degrees: " + tempF + ' F' ; aStr = '(celsius)'; } $('#degrees').text(tempStr); $('a').text(aStr) console.log ('cTrun is ' + cTurn) cTurn = !cTurn console.log ('cTrun is ' + cTurn) console.log("setTemp function completed") }; function getWeather (url){ $.ajax({ url: url, success: function(result){ //$('#x').text(JSON.stringify(result)); $('#loading').hide() $('#location').text('Location: ' + result.name +', '+result.sys.country); tempBase=((result.main.temp)/10); setTemp() console.log("temp Base is " + tempBase); var skys= "Skys: " + result.weather[0].description; $('#skys').text(skys); var url2 = `https://openweathermap.org/img/w/${result.weather[0]['icon']}.png` console.log('url2 ' + url2) $('img').attr('src', url2) console.log("getWeatherFunction Completed") }}) }; //we begin with buildig the URL, then we get the weather, then we display everything. $.getJSON('https://ipinfo.io/json', function(result){ console.log('url received') //$('#y').text(JSON.stringify(result)); locStr=result.loc; locArr=locStr.split(','); lat=locArr[0]; lon=locArr[1]; url=url.replace('{lat}', lat).replace('{lon}', lon); console.log('url ready'); //$('#z').text(url); getWeather(url); }); $('a').click(setTemp);
});
Developer | Ben |
Username | bencarp |
Uploaded | August 08, 2022 |
Rating | 3 |
Size | 2,721 Kb |
Views | 38,456 |
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!
Name | Size |
Comparisons of Arrays and Objects | 1,436 Kb |
MakeAPerson | 1,763 Kb |
UniteUnique | 1,495 Kb |
Twitch Channels | 3,723 Kb |
Symmetric Difference | 1,747 Kb |
Test | 1,486 Kb |
GreenPedia | 2,410 Kb |
About Me Page | 3,220 Kb |
Promodoro new | 3,296 Kb |
Smallest Common multiple | 2,035 Kb |
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!
Name | Username | Size |
Light Switch | Bartuc | 4,933 Kb |
Fluid Layout with Float | Jxqr97 | 1,785 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
Drawing a Terminal with CSS | Lachlanjc | 3,185 Kb |
Pure CSS Tooltip | APinix | 2,815 Kb |
Calendar | Miroot | 2,033 Kb |
CSS Tooltips | Darylldoyle | 2,599 Kb |
Animated Logo | Shakdaniel | 2,672 Kb |
Pomodoro Clock | Yas46 | 3,328 Kb |
Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!