How To fix failed to load resource in JavaScript?

[shanamendez]

I get this error, Failed to load resource the server responded with a status of 400.

<!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 perfect essay writing website's javascript. Kindly help me out by checking my code. Thanks!