First git commit
This commit is contained in:
Nicholas Ngo committed
commit
314aeb8545
4 files changed
+248
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
+37
@@ -0,0 +1,37 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Weather App</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
<script src="./script.js" defer></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body id="body">
|
||||||
|
<div class="card">
|
||||||
|
<div class="search">
|
||||||
|
<input type="text" class="search-bar" placeholder="Search">
|
||||||
|
<button><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em"
|
||||||
|
width="1.5em" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path
|
||||||
|
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
|
||||||
|
</path>
|
||||||
|
</svg></button>
|
||||||
|
</div>
|
||||||
|
<div class="weather loading">
|
||||||
|
<h2 class="city">Weather in Surrey</h2>
|
||||||
|
<h1 class="temp">51°C</h1>
|
||||||
|
<div class="flex">
|
||||||
|
<img src="https://openweathermap.org/img/wn/04n.png" alt="" class="icon" />
|
||||||
|
<div class="description">Cloudy</div>
|
||||||
|
</div>
|
||||||
|
<div class="humidity">Humidity: 60%</div>
|
||||||
|
<div class="wind">Wind speed: 6.2 km/h</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,114 @@
|
|||||||
|
const API_KEY = "9cc4edd6d8064a5b7d8fea55305f7c1d"
|
||||||
|
const API_URL = "https://api.opencagedata.com/geocode/v1/json"
|
||||||
|
|
||||||
|
let weather = {
|
||||||
|
apiKey: API_KEY,
|
||||||
|
fetchWeather: function (city) {
|
||||||
|
fetch(
|
||||||
|
"https://api.openweathermap.org/data/2.5/weather?q=" +
|
||||||
|
city +
|
||||||
|
"&units=metric&appid=" +
|
||||||
|
this.apiKey
|
||||||
|
)
|
||||||
|
.then((response) => { // error part if it fails
|
||||||
|
if (!response.ok) {
|
||||||
|
alert("No weather found.");
|
||||||
|
throw new Error("No weather found.");
|
||||||
|
}
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then((data) => this.displayWeather(data));
|
||||||
|
},
|
||||||
|
displayWeather: function (data) {
|
||||||
|
const { name } = data;
|
||||||
|
const { icon, description } = data.weather[0];
|
||||||
|
const { temp, humidity } = data.main;
|
||||||
|
const { speed } = data.wind;
|
||||||
|
document.querySelector(".city").innerText = `Weather in ${name}`;
|
||||||
|
document.querySelector(".icon").src = `https://openweathermap.org/img/wn/${icon}.png`;
|
||||||
|
document.querySelector(".description").innerText = description;
|
||||||
|
document.querySelector(".temp").innerText = `${temp} °C`;
|
||||||
|
document.querySelector(".humidity").innerText = `Humidity: ${humidity}%`;
|
||||||
|
document.querySelector(".wind").innerText = `Wind speed: ${speed}km/h`;
|
||||||
|
document.querySelector(".weather").classList.remove("loading");
|
||||||
|
document.body.style.backgroundImage = `var(--${data.weather[0].main})`;
|
||||||
|
},
|
||||||
|
search: function () {
|
||||||
|
this.fetchWeather(document.querySelector(".search-bar").value);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
let geocode = {
|
||||||
|
reverseGeocode: function (latitude, longitude) {
|
||||||
|
var apikey = "5333f43e8a7a4553abee4745425cae8b";
|
||||||
|
|
||||||
|
var api_url = "https://api.opencagedata.com/geocode/v1/json";
|
||||||
|
|
||||||
|
var request_url =
|
||||||
|
api_url +
|
||||||
|
"?" +
|
||||||
|
"key=" +
|
||||||
|
apikey +
|
||||||
|
"&q=" +
|
||||||
|
encodeURIComponent(latitude + "," + longitude) +
|
||||||
|
"&pretty=1" +
|
||||||
|
"&no_annotations=1";
|
||||||
|
|
||||||
|
// see full list of required and optional parameters:
|
||||||
|
// https://opencagedata.com/api#forward
|
||||||
|
|
||||||
|
var request = new XMLHttpRequest();
|
||||||
|
request.open("GET", request_url, true);
|
||||||
|
|
||||||
|
request.onload = function () {
|
||||||
|
// see full list of possible response codes:
|
||||||
|
// https://opencagedata.com/api#codes
|
||||||
|
|
||||||
|
if (request.status == 200) {
|
||||||
|
// Success!
|
||||||
|
var data = JSON.parse(request.responseText);
|
||||||
|
weather.fetchWeather(data.results[0].components.city);
|
||||||
|
console.log(data.results[0].components.city)
|
||||||
|
} else if (request.status <= 500) {
|
||||||
|
// We reached our target server, but it returned an error
|
||||||
|
|
||||||
|
console.log("unable to geocode! Response code: " + request.status);
|
||||||
|
var data = JSON.parse(request.responseText);
|
||||||
|
console.log("error msg: " + data.status.message);
|
||||||
|
} else {
|
||||||
|
console.log("server error");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
request.onerror = function () {
|
||||||
|
// There was a connection error of some sort
|
||||||
|
console.log("unable to connect to server");
|
||||||
|
};
|
||||||
|
|
||||||
|
request.send(); // make the request
|
||||||
|
},
|
||||||
|
getLocation: function() {
|
||||||
|
function success (data) {
|
||||||
|
geocode.reverseGeocode(data.coords.latitude, data.coords.longitude);
|
||||||
|
}
|
||||||
|
if (navigator.geolocation) {
|
||||||
|
navigator.geolocation.getCurrentPosition(success, console.error);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
weather.fetchWeather("Surrey");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.querySelector(".search button").addEventListener("click", function () {
|
||||||
|
weather.search();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelector(".search-bar")
|
||||||
|
.addEventListener("keyup", function (event) {
|
||||||
|
if (event.key == "Enter") {
|
||||||
|
weather.search();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
geocode.getLocation();
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
:root {
|
||||||
|
--Rain: url("https://cdnb.artstation.com/p/assets/images/images/044/191/175/original/ryan-haight-kerry-park-rainy.gif?1639344501");
|
||||||
|
--Clouds: url("https://64.media.tumblr.com/9ee59e8b2b137130d55209f48398878a/tumblr_pac4orsuyr1tlgv32o1_540.gif");
|
||||||
|
--Drizzle: url("https://c.tenor.com/O5-9NwLytp4AAAAd/minimoss-pixel-art.gif");
|
||||||
|
--Clear: url("https://thumbs.gfycat.com/UnfoldedRedJaguarundi-max-1mb.gif");
|
||||||
|
--Snow: url("https://thumbs.gfycat.com/DecimalBabyishAmericancreamdraft-max-1mb.gif");
|
||||||
|
--Thunderstorm: url("../images/thunderstorm.gif");
|
||||||
|
--default: url("https://wallpaperaccess.com/full/3517019.gif");
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
background: #222;
|
||||||
|
background-image: var(--default);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
font-size: 120%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: #000000d0;
|
||||||
|
color: white;
|
||||||
|
padding: 2em;
|
||||||
|
border-radius: 30px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 420px;
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 0.5em;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: none;
|
||||||
|
height: 44px;
|
||||||
|
width: 44px;
|
||||||
|
outline: none;
|
||||||
|
background: #7c7c7c2b;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.search-bar {
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
padding: 0.4em 1em;
|
||||||
|
border-radius: 24px;
|
||||||
|
background: #7c7c7c2b;
|
||||||
|
color: white;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 105%;
|
||||||
|
width: calc(100% - 100px);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: #7c7c7c6b;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1.temp {
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
text-transform: capitalize;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weather.loading {
|
||||||
|
visibility: hidden;
|
||||||
|
max-height: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weather.loading:after {
|
||||||
|
visibility: visible;
|
||||||
|
content: "Input Location";
|
||||||
|
color: white;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
Reference in new issue
Block a user