-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscript.js
218 lines (154 loc) · 6.97 KB
/
script.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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
// Background Changer
let body = document.querySelector("body");
let forest = document.getElementById("forest");
let alaska = document.getElementById("alaska");
function backgroundValue(event){
body.className = event.currentTarget.id;
}
// CLOCK TIMES
// 1. COUNT DOWN FROM DATE INPUT
// Issues: Button mashing creates more interval frequencies, solution? a reset button??
let inputValue = document.getElementById("inputName").value;
let inputField = document.getElementById("inputName");
let countTitle = document.getElementById("dateCountTitle");
inputField.addEventListener("keyup", function(event){
if(event.keyCode === 13){
setCount();
}
});
function setCount(){
// CREATING VARIABLE VS UPDATING VARIABLE
// inputValue must be made outside of the function otherwise a new variable will be "created" everysingle time and added onto the countdowndate variable rather than "updating" the variable.
inputValue = document.getElementById("inputName").value;
// Possible Issue: interval is being created every time function is called vs updating
// create a condition here like in the countdown one to fix frequency?
let startCount = setInterval(countingDown, 1000);
function countingDown(){
let countDownDate = new Date(inputValue).getTime();
if(!isNaN(countDownDate) && inputValue.length >= 11){
countTitle.innerText = inputValue;
let timeNow = new Date().getTime();
let distance = countDownDate - timeNow;
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / (1000));
let outPut = `${days}d ${hours}h ${minutes}m ${seconds}s`;
document.getElementById("inputDate").innerHTML = seconds < 0 ? 'complete' : outPut;
} else {
alert("Put in your date like this: (Oct 03 2021) or (October 03 2021)");
document.getElementById("inputDate").innerHTML = "";
// must clear out of interval or it will keep running the alert.
clearInterval(startCount);
}
}
}
/* 2. HARD CODED COUNT DOWN DATE */
let startCount = setInterval(() => {
let dateVariable = "Jan, 01 2022";
let countDownDate = new Date(dateVariable).getTime();
let timeNow = new Date().getTime();
let distance = countDownDate - timeNow;
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / (1000));
document.getElementById("newYear").innerHTML = dateVariable;
let outPut = `${days}d ${hours}h ${minutes}m ${seconds}s`;
document.getElementById("date").innerHTML = seconds < 0 ? 'complete' : outPut;
}, 1000);
/* 3. CURRENT TIME CODE */
function clockTime(){
// time has to be iterated as well for the variables to be update real time.
let time = new Date();
let currentTime = time.toLocaleTimeString();
// toLocalTimeString
document.getElementById("currentT").innerHTML = currentTime;
}
setInterval(clockTime, 1000);
// 4. General Count Down
// Default Time
let hoursD = 1;
let minutesD = 0;
let secondsD = 0;
let countDown;
// these are empty strings
let hoursValue = document.getElementById("inputHours");
let minutesValue = document.getElementById("inputMinutes");
let secondsValue = document.getElementById("inputSeconds");
document.getElementById("hoursDown").innerHTML = "Days:";
document.getElementById("minutesDown").innerHTML = "Hours:";
document.getElementById("secondsDown").innerHTML = "Seconds";
function reset(){
console.log("stopmyfunc ran");
clearInterval(countDown)
}
function clockDown(event) {
console.log(typeof(secondsValue.value))
// reassign these to the value of the inputs
// on the input make the default values 0
let hoursD = parseInt(hoursValue.value);
let minutesD = parseInt(minutesValue.value);
let secondsD = parseInt(secondsValue.value);
if(event.currentTarget.id === "start"){
countDown = setInterval(startCountDown, 1000);
}
function startCountDown(){
console.log("ran")
secondsD -= 1;
// adding 0 string
if(secondsD < 10) {
secondsD = "0" + secondsD;
}
// time change
// must check if minutes isnt 0 otherwise it will make minutes -1 at the end of countdown
if(secondsD == "0-1" && minutesD != "00"){
secondsD = 59;
minutesD --;
}
if(minutesD == "0" && hoursD != "00") {
minutesD = 59;
secondsD = 59;
hoursD --;
}
// must specify string length unlike the seconds because the minuts and hours will continuosly add the 0 string
if(minutesD < 10) {
let s = minutesD.toString();
if(s.length < 2){
minutesD = "0" + minutesD;
}
}
// hours & minutes is put at the end of the code to make sure that the 0 string is added when the hour changes from 04 to 03 instead of 04, 3, 03.
if(hoursD < 10) {
let s = hoursD.toString();
if(s.length < 2){
hoursD = "0" + hoursD;
}
}
// clear interval once time runs out
if(hoursD == 0 && minutesD == 0 && secondsD == "0-1"){
document.getElementById("hoursDown").innerHTML = "";
document.getElementById("minutesDown").innerHTML = "";
document.getElementById("secondsDown").innerHTML = "complete";
clearInterval(countDown);
} else {
document.getElementById("hoursDown").innerHTML = hoursD + ":";
document.getElementById("minutesDown").innerHTML = minutesD + ":";
document.getElementById("secondsDown").innerHTML = secondsD;
}
}
}
// function for both buttons
function hideBtn(event){
let currentDisplay = window.getComputedStyle(event.currentTarget).getPropertyValue("display");
if(currentDisplay === "inline-block" && event.currentTarget.id == "start"){
document.getElementById("start").style.display = "none";
document.getElementById("reset").style.display = "inline-block";
} else if(currentDisplay === "inline-block" && event.currentTarget.id == "reset") {
document.getElementById("start").style.display = "inline-block";
document.getElementById("reset").style.display = "none";
document.getElementById("hoursDown").innerHTML = "Days:";
document.getElementById("minutesDown").innerHTML = "Hours:";
document.getElementById("secondsDown").innerHTML = "Seconds";
}
}