<!DOCTYPE html>
<html>
<head>
<title>Local Weather</title>
<script>
window.addEventListener("load", () => {
//Asks user location
let long;
let lat;
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
long = position.coords.longitude;
lat = position.coords.latidute;
const proxy = "https://cors-anywhere.herokuapp.com/";
const api =`${proxy}https://api.darksky.net/forecast/217e0a6f0942213d0c3e6990a8b626f3/${lat},${long}`;
//Catches weather info from website
fetch(api)
.then(response => {
return response.json();
})
.then(data => {
console.log(data);
});
});
}
});
</script>
<style>
@media screen and (min-width:1px) and (max-width:1365px) {
...
}
@media screen and (min-width:1366px) {
...
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
flex-direction:column;
align-items:center;
background:linear-gradient(rgb(47,150,163), rgb(48,62,143));
font-family:sans-serif;
color:white;
}
.location, .temperature{
height:30vh;
width:50%;
display:flex;
justify-content:space-around;
align-items:center;
}
.temperature{
flex-direction:column;
}
.degree-section{
display:flex;
align-center:center;
cursor:pointer;
}
.degree-section span{
margin:10px;
font-size:30px;
}
.degree-section h2{
font-size:35px;
position:relative;
top:5px;
}
</style>
</head>
<body>
<div class="location">
<h1 class="location-timezone">Timezone</h1>
<p>Icon</p>
</div>
<div class="temperature">
<div class="degree-section">
<h2 class="temperature-degree">34</h2>
<span>F</span>
</div>
<div class="temperature-description">It's cold
</div>
</body>
</html>
I am facing issue while loading resource file of my Progency javascript. Kindly help me out by checking my code. Thanks!
