Project -Show the Local Weather

Developer
Luciano Boaventura Britis
Size
2,583 Kb
Views
4,048
  1. Project -Show the Local Weather Previews
  2. Project -Show the Local Weather HTML Codes
  3. Project -Show the Local Weather CSS Codes
  4. Project -Show the Local Weather JS Codes

How do I make an project -show the local weather?

What is a project -show the local weather? How do you make a project -show the local weather? This script and codes were developed by Luciano Boaventura Britis on 11 January 2023, Wednesday.

Project -Show the Local Weather Previews
IQ Test

Project -Show the Local Weather - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Project -Show the Local Weather</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="title"> Local Weather</h1>
<div class="box">
<div class="city"></div>
<div class="temp" id="Ctemp">º<span id="scale"></span></div>
<div class="humidity"></div>
<div class="wind"></div>
<div class="condition"></div>
<div id="weather"></div>
<hr>
<div class="icon"></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="js/index.js"></script>
</body>
</html>

Project -Show the Local Weather - Script Codes CSS Codes

body { font-size: 18px; margin: 0; padding:0; width: 100%; height: 100%; background: url("https://static.pexels.com/photos/998/landscape-sky-clouds-cloudy.jpg") no-repeat; text-align:center; background-size: cover;
}
.title { font-size:2.5em; color:	#00cc30; font-family: Arial; letter-spacing:03px; }
p { font-size:18px; font-color:#000000; padding: 20px 10px;
}
.icon { size:100px;
}
.box { height:330px; width:250px; background-color: #000000; border-radius:10px; border: 1px solid #ffffff; margin: 0 auto; opacity:0.6;
}
.city { padding-top: 20px; font-size:25px; color:#FFFFFF;
}
.temp{ padding-top:17px; font-size:55px; color:green; font-family:;
}
.humidity { padding-top:17px; font-size:20px; color:green;
}
.wind { padding-top:17px; font-size:20px; color:#FFFFFF;
}
.condition { padding: 17px 05px 05px; color:#FFFFFF;
}
hr { color:red;
}
.icon { margin:0 auto; height:15px;
}

Project -Show the Local Weather - Script Codes JS Codes

var apiKey = 'e04ec70a9945e11eee26dbfc2933af52';
function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&units=metric&appid=" + apiKey, function(data) { $(".city").html(data.name + " , " + data.sys.country); //ok $(".temp").html(Math.round(data.main.temp)+ " ºC");// ok $(".condition").html("Cloudiness: " + data.weather[0].description);// ok $(".wind").html("wind speed : "+ (data.wind.speed * 3.6).toPrecision(3) + " Km/h");// ok $(".icon").html("<img src='http://openweathermap.org/img/w/" + data.weather[0].icon + ".png'>"); //ok }); }, function error(msg){ alert('Please enable your GPS position future.'); }, { maximumAge:600000, timeout:5000, enableHighAccuracy: true }); }
};
getLocation();
Project -Show the Local Weather - Script Codes
Project -Show the Local Weather - Script Codes
Home Page Home
Developer Luciano Boaventura Britis
Username Luciano_Britis
Uploaded January 11, 2023
Rating 3
Size 2,583 Kb
Views 4,048
Do you need developer help for Project -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!

Luciano Boaventura Britis (Luciano_Britis) Script Codes
Name
Build a Tribute Page
A Pen by Luciano Boaventura Britis
Color Guessing Game
Example the DOM object
Quotes
Luciano_Britis
Dating Web Site Assessment
Project - Build a Wikipedia Viewer
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!