-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
89 lines (72 loc) · 2.55 KB
/
main.js
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
87
88
89
class DigitalClock {
constructor(element) {
this.element = element;
}
start() {
this.update();
setInterval(() => {
this.update();
}, 500);
}
update() {
const parts = this.getTimeParts();
const minuteFormatted = parts.minute.toString().padStart(2, "0");
const timeFormatted = `${parts.hour}:${minuteFormatted}`;
const secondsFormatted = `:${parts.seconds.toString().padStart(2,"0")}`;
const amPm = parts.isAm ? "AM" : "PM";
this.element.querySelector(".clock-time").textContent = timeFormatted;
this.element.querySelector(".clock-ampm").textContent = amPm;
this.element.querySelector(".clock-seconds").textContent = secondsFormatted
}
getTimeParts() {
const now = new Date();
return {
hour: now.getHours() % 12 || 12,
minute: now.getMinutes(),
isAm: now.getHours() < 12,
seconds: now.getSeconds()
};
}
}
const clockElement = document.querySelector(".clock");
const clockObject = new DigitalClock(clockElement);
clockObject.start()
const form = document.querySelector(".top-banner form");
const apiform = document.querySelector(".keyenter")
const keyinput = document.querySelector(".keyenter input");
const input = document.querySelector(".top-banner input");
const msg = document.querySelector(".top-banner .msg");
const info = document.querySelector(".weather .info")
var localStorage = window.localStorage
form.addEventListener("submit", e => {
e.preventDefault();
const inputVal = input.value;
var apiKey = localStorage.getItem('key')
const url = `https://api.openweathermap.org/data/2.5/weather?q=${inputVal}&appid=${apiKey}&units=metric`;
fetch(url)
.then(response => response.json())
.then(data => {
var name = data.name
var weather = data.weather[0].description
if (info) {
info.textContent = `Welcome to the City of ${name}. Your current weather is ${weather}.`
}
})
.catch((response) => {
msg.textContent = "Invalid city/API Key";
if (info) {
info.textContent = "";
}
});
msg.textContent = "";
form.reset();
input.focus();
});
apiform.addEventListener("submit", e => {
e.preventDefault();
localStorage.clear();
if (keyinput) {
localStorage.setItem('key',keyinput.value);
console.log("Stored ", keyinput.value)
}
})