Local Weather

Size
2,478 Kb
Views
40,480

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 Joo Vctor De Oliveira Santos on 27 August 2022, Saturday.

Local Weather Previews

Local Weather - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Local Weather</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css'>
</head>
<body> <div class="content-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="row"> <div class="col-md-12"> <center> <h1 class="page-header">Local Weather <input id="cOrF" class="BSswitch pull-right" type="checkbox" data-off-text="ºF" data-on-text="ºC" checked="false"></h1> </center> </div> </div> <div class="row"> <div class="col-md-12"> <center> <h2>Location</h2> <h3 id="cityName">{CITY}</h3> </center> </div> </div> <div class="row"> <div class="col-md-12"> <center> <h2>Temperature</h2> <h3 id="temp">{TEMP}</h3> </center> </div> </div> <div class="row"> <div class="col-md-6"> <center> <h2>Min Temperature</h2> <h3 id="min_temp">{MIN}</h3> </center> </div> <div class="col-md-6"> <center> <h2>Max Temperature</h2> <h3 id="max_temp">{MAX}</h3> </center> </div> </div> <div class="row"> <div class="col-md-12"> <center> <image id="icon" class="img-responsive"/> </center> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Local Weather - Script Codes JS Codes

var iconURL = "http://openweathermap.org/img/w/";
var apiKey = "8af3d7474de16f97fa1cc1d4b0046e98";
var temp = 0, k_temp = 0;
var temp_max = 0, k_temp_max = 0;
var temp_min = 0, k_temp_min = 0;
var TC = "ºF";
var day = false;
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition);
}
function showPosition(pos){ $.ajax({ url: "https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat="+pos.coords.latitude+"&lon="+pos.coords.longitude+"&APPID="+apiKey, complete: function(x){ x = x.responseJSON; $("#cityName").html(x['name']+", "+x['sys']['country']); k_temp = x['main']['temp']; k_temp_min = x['main']['temp_min']; k_temp_max = x['main']['temp_max']; TC = "ºF"; $('#cOrF').bootstrapSwitch('state', false); $('#cOrF').on('switchChange.bootstrapSwitch', switchCF); switchCF(null, false); update(); $('#icon').attr("src", iconURL+x['weather'][0]['icon']+".png"); console.log(x); } });
}
function update(){ $("#temp").html((Math.round(temp * 100) / 100)+" "+TC); $("#min_temp").html((Math.round(temp_min * 100) / 100)+" "+TC); $("#max_temp").html((Math.round(temp_max * 100) / 100)+" "+TC);
}
function KToF(t){ return (((t - 273) / 5) * 9) + 32;}
function KToC(t){ return t - 273;}
$('.BSswitch').bootstrapSwitch('state', true);
function switchCF(event, state) { switch(state){ case true: temp = KToC(k_temp); temp_max = KToC(k_temp_max); temp_min = KToC(k_temp_min); TC = "ºC"; break; case false: temp = KToF(k_temp); temp_max = KToF(k_temp_max); temp_min = KToF(k_temp_min); TC = "ºF"; break; } update(); console.log(state);
}
Local Weather - Script Codes
Local Weather - Script Codes
Home Page Home
Developer Joo Vctor De Oliveira Santos
Username jvhti
Uploaded August 27, 2022
Rating 3
Size 2,478 Kb
Views 40,480
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!

Joo Vctor De Oliveira Santos (jvhti) Script Codes
Create amazing art & images 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!