-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscript.js
More file actions
86 lines (62 loc) · 2.29 KB
/
Copy pathscript.js
File metadata and controls
86 lines (62 loc) · 2.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
const container = document.getElementById("container");
window.onload = function () {
document.querySelector('.input-search').value = '';
}
// API
const api_details = {
url: "http://api.openweathermap.org/data/2.5/",
api_key: "60bbd59ec7556e88c0f6b5a2080aebaa"
}
// search city on keypress
const input = document.querySelector('.input-search');
input.addEventListener('keypress', showData)
function showData(e) {
if (e.keyCode === 13) {
showResults(input.value);
}
}
// GET API RESULTS
async function showResults(value) {
const data = await fetch(`${api_details.url}weather?q=${value}&units=metric&APPID=${api_details.api_key}`)
const fdata = await data.json();
console.log(fdata)
if (fdata.message === "city not found") {
const ele = document.createElement('h1')
ele.className = "heady"
ele.appendChild(document.createTextNode("City Not Found"))
}
else {
displayData(fdata);
}
}
// DISPLAY DATA IN CONTAINER
function displayData(data) {
const location_city = document.querySelector('.city');
location_city.innerText = `${data.name},${data.sys.country}`
container.style.backgroundColor = "#2c9c91";
container.style.margin = " 20px 400px";
container.style.borderRadius = "5px";
let time = new Date();
const date = document.querySelector('.l-date');
let months_year = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
let days_week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
let day = days_week[time.getDay()];
let pdate = time.getDate();
let month = months_year[time.getMonth()];
let year = time.getFullYear();
date.innerText = `${day} ${pdate} ${month} ${year}`
const degrees = document.querySelector('.degrees');
degrees.innerHTML = `${Math.round(data.main.temp)}
<span>˚C</span>
`
const type = document.querySelector('.d-type');
type.innerText = `${data.weather[0].main}`
const lowHigh = document.querySelector('.d-range');
lowHigh.innerHTML = `${Math.round(data.main.temp_min)}<span>˚C</span>/${Math.round(data.main.temp_max)}<span>˚C</span>`
}
// RESET BUTTON
function clearResult() {
document.getElementById("container").textContent = ' ';
container.style.backgroundColor = "#abe2e2";
document.querySelector('.input-search').value = '';
}