Weather App

Developer
Katie Inkblotty
Size
3,881 Kb
Views
42,504
  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?

Local weather app using jQuery and the browser's geo-location.. What is a weather app? How do you make a weather app? This script and codes were developed by Katie Inkblotty on 08 August 2022, Monday.

Weather App Previews
IQ Test

Weather App - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Weather App</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="toggleSys"> <div id="metric">Metric</div> <span>|</span> <div id="imp">Imperial</div>
</div>
<div class="container"> <h4 id="error"><i class="fa fa-spinner fa-spin"></i></h4> <div id="city"></div> <div id="cond"></div> <div id="temp"></div> <div id="humid"></div> <div id="wind"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Weather App - Script Codes CSS Codes

body { background-color: #eee; font-family: Arial, sans-serif; font-size: 1.1em;
}
.toggleSys { margin: 0; margin-right: 2%; text-align: right;
}
.toggleSys div { border-radius: 0.5em; cursor: pointer; display: inline-block; letter-spacing: 0.1em; margin: 0; padding: 0.5% 1.75%;
}
.toggleSys div:hover { background-color: #e2e2e2;
}
.toggleSys div:active { background-color: #d1d1d1;
}
.container { margin: 2% auto 0 auto; text-align: center;
}
.container div { font-size: 1.2em; letter-spacing: 0.05em; margin-bottom: 0.9em;
}
.container #city { font-size: 1.5em; margin-bottom: 0.5em;
}
.container #cond { margin-bottom: 2em;
}
.container #cond img { display: block; margin: 0 auto; width: 5em;
}
.container #humid { margin: 1.5em auto;
}
.container #temp img { content: url("https://d30y9cdsu7xlg0.cloudfront.net/png/100988-200.png"); height: 3em; margin: -1.5em 0 -1em 0; width: auto;
}
.container #wind img { content: url("https://d30y9cdsu7xlg0.cloudfront.net/png/159100-200.png"); height: auto; margin: -1.6em -0.2em; width: 4em;
}

Weather App - Script Codes JS Codes

// weather icon is based on weather code. errors are in the code.
$('#error').html('<i class="fa-spinner fa-spin"></i>');
if ('geolocation' in navigator){ $('#error').html("<i class='fa fa-spinner fa-spin'></i><span> Finding city...<span>"); var key = '336f8a81ea71a7cbbc763c7724be5061'; var url = "http://api.openweathermap.org/data/2.5/weather"; function getLocalWeather(system) { navigator.geolocation.getCurrentPosition(function(position) { callAPI(position.coords.latitude, position.coords.longitude, system); $('#error').html(''); }) }; function callAPI(latitude, longitude, system){ $.ajax({ url: "http://api.openweathermap.org/data/2.5/weather?units=" + system + "&lat=" + latitude + "&lon=" + longitude + "&appid=" + key, async: false }) .then(function(data){ if (data.cod === '404') { $('#error').html('Error: City not found'); } else { if ( system === 'metric' ) { var tempSuff = '&deg; C'; var windSuff = "meters/sec"; } else { var tempSuff = '&deg; F'; var windSuff = "miles/hr"; } var weatherIcon; if ( data.cod === 800 ) { // sunny weatherIcon = "<img src='https://d30y9cdsu7xlg0.cloudfront.net/png/211200-200.png' alt='sun icon'></img>" } else { switch(data.cod.toString()[0]){ case '2': weatherIcon = '<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/211759-200.png" alt="thunderstorm icon"></img>'; break; case '3': weatherIcon = '<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/211199-200.png" alt="rainy icon"></img>'; break; case '5': weatherIcon = '<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/211199-200.png" alt="rainy icon"></img>'; break; case '6': weatherIcon = '<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/211198-200.png" alt="snow icon"></img>'; break; case '7': weatherIcon = '<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/211201-200.png" alt="fog icon"></img>'; break; case '8': weatherIcon = '<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/211206-200.png" alt="cloud icon"></img>'; break; case '9': weatherIcon = '<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/211740-200.png" alt="extreme weather icon"></img>'; break; default: console.log('unable to find weather icon'); } }; $('#city').html(data.name); $('#cond').html(weatherIcon + data.weather[0].description); $('#temp').html('<img alt="temperature thermometer icon"></img>' + data.main.temp + tempSuff); $('#humid').html(data.main.humidity + "% Humidity"); $('#wind').html("<img alt='wind icon'></img>" + data.wind.speed + " " + windSuff); } }) }; getLocalWeather('metric'); $('#metric').on('click', function(){ getLocalWeather('metric') }); $('#imp').on('click', function(){ getLocalWeather('imperial') });
} else { $('#error').html("Sorry, geolocation is not enabled in your browser. We can't find your weather if we can't find you!");
}
Weather App - Script Codes
Weather App - Script Codes
Home Page Home
Developer Katie Inkblotty
Username inkblotty
Uploaded August 08, 2022
Rating 3
Size 3,881 Kb
Views 42,504
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!

Katie Inkblotty (inkblotty) Script Codes
Name
Twitch Live Channels
Simon game
Google Calendar Event Feed
React Recipe Box
Tic Tac Toe
Star Wars search
GeoLocation
Camper News Clone
Portfolio Clone for FreeCodeCamp
Le Fake Bakery
Create amazing web 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!