Local Weather

Developer
David Storey
Size
3,177 Kb
Views
30,360
  1. Local Weather Previews
  2. Local Weather HTML Codes
  3. Local Weather CSS Codes
  4. Local Weather JS Codes

How do I make an local weather?

What is a local weather? How do you make a local weather? This script and codes were developed by David Storey on 12 July 2022, Tuesday.

Local Weather Previews
IQ Test

Local Weather - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Local Weather</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ [v-cloak] { display: none;
}
body {	margin: 0;	padding: 0 20px;
}
.panel {	border: 1px solid #000;	border-radius: 4px;	box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.5);	display: block;	margin: 5% auto 0;	max-width: 300px;	padding: 20px;
}
.panel p {	font-family: sans-serif;	margin: 0;	padding: 0 0 20px 0;	text-align: center;	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}
.panel .button {	background: #000;	border: 1px solid #000;	border-radius: 3px;	color: #fff;	cursor: pointer;	display: inline-block;	font-family: sans-serif;	font-size: 12px;	line-height: 1;	padding: 10px;	text-align: center;	text-decoration: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="app"> <div class="panel" v-cloak> <p><strong>{{ name }}</strong></p> <p v-show="units === 'centigrade'">{{ temperatureC }}&deg;C</p> <p v-show="units === 'fahrenheit'">{{ temperatureF }}&deg;F</p> <p>{{ weather }}</p> <p><img src="http://openweathermap.org/img/w/{{ icon }}.png"/></p> <p><button class="button" v-on:click="toggleTemperature()">Toggle temperature</button></p> </div>
</div> <script src='https://cdn.jsdelivr.net/vue/latest/vue.js'></script>
<script src='https://cdn.rawgit.com/larryosborn/JSONP/master/lib/jsonp.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Local Weather - Script Codes CSS Codes

[v-cloak] { display: none;
}
body {	margin: 0;	padding: 0 20px;
}
.panel {	border: 1px solid #000;	border-radius: 4px;	box-shadow: 0px 6px 8px 0px rgba(0,0,0,0.5);	display: block;	margin: 5% auto 0;	max-width: 300px;	padding: 20px;
}
.panel p {	font-family: sans-serif;	margin: 0;	padding: 0 0 20px 0;	text-align: center;	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
}
.panel .button {	background: #000;	border: 1px solid #000;	border-radius: 3px;	color: #fff;	cursor: pointer;	display: inline-block;	font-family: sans-serif;	font-size: 12px;	line-height: 1;	padding: 10px;	text-align: center;	text-decoration: none;
}

Local Weather - Script Codes JS Codes

var appid = '2824e69a67f80243f73fe730ac866d24';
var vue = new Vue({	el: '#app',	data: {	units: 'centigrade', name: '', temperatureC: '', temperatureF: '', weather: '', icon: ''	},	created: function() {	this.fetchData();	},	methods: {	toggleTemperature: function() { this.units = (this.units === 'centigrade') ? 'fahrenheit' : 'centigrade'; }, updateData: function(data) {	this.name = data.name; this.temperatureC = Math.round(data.main.temp); this.temperatureF = Math.round(celciusToFahrenheit(data.main.temp)); this.weather = data.weather[0].main; this.icon = data.weather[0].icon;	},	fetchData: function() {	var self = this; getLocation(function(lat, lon) { JSONP({ url: 'http://api.openweathermap.org/data/2.5/weather', // https://openweathermap.org/current data: { lat: lat, lon: lon, appid: appid, units: 'metric' }, success: function(data) { self.updateData(data); } }); });	}	}
});
function decodeHtml(html) {	var txt = document.createElement('textarea');	txt.innerHTML = html;	return txt.value;
}
function celciusToFahrenheit(c) { return (((c * 9) / 5) + 32);
}
function getLocation(callback) { geoLocate(callback, function() { JSONP({ url: 'http://ipinfo.io/json', success: function(data) { console.log(data); data = data.loc.split(','); callback(data[0], data[1]); } }); });
}
function geoLocate(success, failure) {	if (!navigator.geolocation) {	failure();	}	navigator.geolocation.getCurrentPosition(function(position) {	success(position.coords.latitude, position.coords.longitude);	}, failure);
}
Local Weather - Script Codes
Local Weather - Script Codes
Home Page Home
Developer David Storey
Username davidpanik
Uploaded July 12, 2022
Rating 3
Size 3,177 Kb
Views 30,360
Do you need developer help for Local Weather?

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!

David Storey (davidpanik) Script Codes
Name
Spiral Art Maker
Spiral Art Maker
Virtual vinyl
Speed Reader
Rogue Engine
Find most common word
Chuck Norris Quotes
Blobs
50 Shades Quiz
Circles
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!