Show the Local Weather

Developer
Donald
Size
3,163 Kb
Views
26,312
  1. Show the Local Weather Previews
  2. Show the Local Weather HTML Codes
  3. Show the Local Weather CSS Codes
  4. Show the Local Weather JS Codes

How do I make an show the local weather?

What is a show the local weather? How do you make a show the local weather? This script and codes were developed by Donald on 10 September 2022, Saturday.

Show the Local Weather Previews
IQ Test

Show the Local Weather - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Show the Local Weather</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="jumbotron container-fluid">
<div class="box"> <p>The current temperature is: </p> <p id = "temp"></p> <button id='celsius'>Celsius</button> <button id='farenheit'>Farenheit</button> <div class='increase-margin' id='weatherIcon'></div> <p id ="theWeather"></p> <p id="city"></p>
<p><button class="btn btn-primary" onclick="geoFindMe()">Weather in my location</button></p>
<div class="box" id="out"></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Show the Local Weather - Script Codes CSS Codes

body { background-color: lightblue; text-align:center; color: #aff;
}
.jumbotron { background-image:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSg72r3fwD_LxMeODfRfKfTq4eZA9GUwU1T0IlazZCoJmUasnXU'); height: 900px; background-repeat: no-repeat; background-size: cover;
}
.box { margin: 20px; font-size: 20px; color: purple;
}
button:focus { background-color: yellow;
}
.increase-margin { margin-top: 20px;
}

Show the Local Weather - Script Codes JS Codes

var farenheit = false;
var c = 0;
var f = 0;
var api ="http://api.openweathermap.org/data/2.5/weather?lat=";
function geoFindMe() { var output = document.getElementById("out"); if (!navigator.geolocation){ output.innerHTML = "<p>Geolocation is not supported by your browser</p>"; return; } function success(position) { var lati = position.coords.latitude; var longi = position.coords.longitude; output.innerHTML = '<p>Latitude is ' + lati + '° <br>Longitude is ' + longi + '°</p>'; var img = new Image(); img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + lati + "," + longi + "&zoom=13&size=300x300&sensor=false"; output.appendChild(img); getData(lati, longi); }; function error() { output.innerHTML = "Unable to retrieve your location"; }; output.innerHTML = "<p>Locating…</p>"; navigator.geolocation.getCurrentPosition(success, error);
}
function getData (lati, longi) { $.getJSON(api + lati + "&lon=" + longi + "&units=metric&appid=ee7dc0a2f17ed13b39c894dad533f966", function(json) { t = Math.round(json.main.temp); setTemp(t); var weat = json.weather[0].main; showWeather(weat); $('#city').html(json.name + ", " + json.sys.country);
})
}
$(document).ready(function(){ getData(50, -120); geoFindMe();
});
document.getElementById('farenheit').addEventListener('click', farenheitOn);
document.getElementById('celsius').addEventListener('click', farenheitOff);
function farenheitOn() { farenheit = true; displayTemp();
}
function farenheitOff() { farenheit = false; displayTemp();
}
function setTemp(t) { c = t; f = Math.round(t * 9 / 5 + 32); displayTemp();
}
function displayTemp() { if (farenheit) { document.getElementById('temp').innerHTML = f + " F"; } else { document.getElementById('temp').innerHTML = c + " C"; }
}
function showWeather(weat) { var link = ''; switch(weat) { case 'Sunny': link = 'http://www.freeiconspng.com/uploads/sunny-icon-2.png'; break; case 'Cloudy': link = 'http://www.dailyfreepsd.com/wp-content/uploads/2013/06/Cloudy-Overcast-weather-icon-vector.png'; break; case 'Rain': link = 'http://downloadicons.net/sites/default/files/rain-icon-46110.png' break; case 'Clear': link = 'https://cdn1.iconfinder.com/data/icons/astronomy/154/astronomy-stars-moon-planet-cosmos-512.png' break; case 'Snow': link = 'http://www.freeiconspng.com/uploads/black-snow-icon-4.png'; break; }
document.getElementById('weatherIcon').innerHTML = '<img src="' + link + '" height="80" width="80" >'; document.getElementById('theWeather').innerHTML = weat;
}
Show the Local Weather - Script Codes
Show the Local Weather - Script Codes
Home Page Home
Developer Donald
Username donaldk7
Uploaded September 10, 2022
Rating 3
Size 3,163 Kb
Views 26,312
Do you need developer help for Show the 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!

Donald (donaldk7) Script Codes
Name
Calculator
Twitch TV Streamer
Pomodoro clock
Quote of the Day
Tic Tack Toe
Personal Portfolio
Tribute page
Timestamp
A Pen by Donald
Simon game
Create amazing Facebook ads 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!