Skip to content

Commit 47645c5

Browse files
john-smilgajohn-smilga
committed
12-countdown-timer complete
1 parent f721f1a commit 47645c5

File tree

20 files changed

+698
-4
lines changed

20 files changed

+698
-4
lines changed

‎11-tabs/final/styles.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ About
237237
transition: var(--transition);
238238
letter-spacing: var(--spacing);
239239
}
240-
.tab-btn:hover {
240+
.tab-btn:hover:not(.active) {
241241
background: var(--clr-primary-10);
242242
color: var(--clr-primary-5);
243243
}

‎11-tabs/setup/styles.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ About
237237
transition: var(--transition);
238238
letter-spacing: var(--spacing);
239239
}
240-
.tab-btn:hover {
240+
.tab-btn:hover:not(.active) {
241241
background: var(--clr-primary-10);
242242
color: var(--clr-primary-5);
243243
}
@@ -250,9 +250,9 @@ About
250250
.content {
251251
display: none;
252252
}
253-
.tab-btn.selected {
253+
.tab-btn.active {
254254
background: var(--clr-white);
255255
}
256-
.content.selected {
256+
.content.active {
257257
display: block;
258258
}

‎12-countdown-timer/final/app.js

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
const months = [
2+
"January",
3+
"February",
4+
"March",
5+
"April",
6+
"May",
7+
"June",
8+
"July",
9+
"August",
10+
"September",
11+
"October",
12+
"November",
13+
"December",
14+
];
15+
const weekdays = [
16+
"Sunday",
17+
"Monday",
18+
"Tuesday",
19+
"Wednesday",
20+
"Thursday",
21+
"Friday",
22+
"Saturday",
23+
];
24+
const giveaway = document.querySelector(".giveaway");
25+
const deadline = document.querySelector(".deadline");
26+
const items = document.querySelectorAll(".deadline-format h4");
27+
28+
// months are ZERO index based;
29+
30+
let tempDate = new Date();
31+
let tempYear = tempDate.getFullYear();
32+
let tempMonth = tempDate.getMonth();
33+
let tempDay = tempDate.getDate();
34+
35+
// let futureDate = new Date(2020, 3, 24, 11, 30, 0);
36+
const futureDate = new Date(tempYear, tempMonth, tempDay + 10, 11, 30, 0);
37+
38+
const year = futureDate.getFullYear();
39+
const hours = futureDate.getHours();
40+
const minutes = futureDate.getMinutes();
41+
let month = futureDate.getMonth();
42+
43+
month = months[month];
44+
const weekday = weekdays[futureDate.getDay()];
45+
const date = futureDate.getDate();
46+
giveaway.textContent = `giveaway ends on ${weekday}, ${date} ${month} ${year} ${hours}:${minutes}am`;
47+
48+
const futureTime = futureDate.getTime();
49+
function getRemaindingTime() {
50+
const today = new Date().getTime();
51+
52+
const t = futureTime - today;
53+
// 1s = 1000ms
54+
// 1m = 60s
55+
// 1hr = 60m
56+
// 1d = 24hr
57+
// values in miliseconds
58+
const oneDay = 24 * 60 * 60 * 1000;
59+
const oneHour = 60 * 60 * 1000;
60+
const oneMinute = 60 * 1000;
61+
// calculate all values
62+
let days = t / oneDay;
63+
days = Math.floor(days);
64+
let hours = Math.floor((t % oneDay) / oneHour);
65+
let minutes = Math.floor((t % oneHour) / oneMinute);
66+
let seconds = Math.floor((t % oneMinute) / 1000);
67+
68+
// set values array
69+
const values = [days, hours, minutes, seconds];
70+
function format(item) {
71+
if (item < 10) {
72+
return (item = `0${item}`);
73+
}
74+
return item;
75+
}
76+
77+
items.forEach(function (item, index) {
78+
item.innerHTML = format(values[index]);
79+
});
80+
81+
if (t < 0) {
82+
clearInterval(countdown);
83+
deadline.innerHTML = `<h4 class="expired">sorry, this giveaway has expired!</h4>`;
84+
}
85+
}
86+
// countdown;
87+
let countdown = setInterval(getRemaindingTime, 1000);
88+
//set initial values
89+
getRemaindingTime();

‎12-countdown-timer/final/gift.jpeg

103 KB
Loading

‎12-countdown-timer/final/index.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Countdown</title>
7+
8+
<!-- styles -->
9+
<link rel="stylesheet" href="styles.css" />
10+
</head>
11+
<body>
12+
<section class="section-center">
13+
<!-- image -->
14+
<article class="gift-img">
15+
<img src="./gift.jpeg" alt="gift" />
16+
</article>
17+
<!-- info -->
18+
<article class="gift-info">
19+
<h3>old iphone giveaway</h3>
20+
<h4 class="giveaway">
21+
giveaway ends on Sunday, 24 April 2020, 8:00am
22+
</h4>
23+
<p>
24+
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
25+
Reprehenderit molestiae cum libero atque ut voluptate qui consectetur
26+
aliquid incidunt voluptatem quos, dolore, non commodi quaerat aliquam
27+
eligendi, quisquam totam blanditiis.
28+
</p>
29+
<div class="deadline">
30+
<!-- days -->
31+
<div class="deadline-format">
32+
<div>
33+
<h4 class="days">34</h4>
34+
<span>days</span>
35+
</div>
36+
</div>
37+
<!-- end of days -->
38+
<!-- days -->
39+
<div class="deadline-format">
40+
<div>
41+
<h4 class="hours">34</h4>
42+
<span>hours</span>
43+
</div>
44+
</div>
45+
<!-- end of days -->
46+
<!-- minutes -->
47+
<div class="deadline-format">
48+
<div>
49+
<h4 class="minutes">34</h4>
50+
<span>mins</span>
51+
</div>
52+
</div>
53+
<!-- end of days -->
54+
<!-- minutes -->
55+
<div class="deadline-format">
56+
<div>
57+
<h4 class="seconds">34</h4>
58+
<span>secs</span>
59+
</div>
60+
</div>
61+
<!-- end of days -->
62+
</div>
63+
</article>
64+
</section>
65+
<!-- javascript -->
66+
<script src="app.js"></script>
67+
</body>
68+
</html>

‎13-hipster-ipsum/final/logo.svg renamed to ‎12-countdown-timer/final/logo.svg

File renamed without changes.

0 commit comments

Comments
 (0)