Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit bfaf516

Browse files
Day 29 - Countown Timer
1 parent 9ce2130 commit bfaf516

File tree

6 files changed

+148
-2
lines changed

6 files changed

+148
-2
lines changed

‎29_day/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>28 Day</title>
6+
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
7+
<link rel="stylesheet" href="main.css">
8+
</head>
9+
<body>
10+
<div class="timer">
11+
<div class="timer__controls">
12+
<button data-time="20" class="timer__button">20 Secs</button>
13+
<button data-time="300" class="timer__button">Work 5</button>
14+
<button data-time="900" class="timer__button">Quick 15</button>
15+
<button data-time="1200" class="timer__button">Snack 20</button>
16+
<button data-time="3600" class="timer__button">Lunch Break</button>
17+
<form name="customForm" id="custom">
18+
<input type="text" name="minutes" placeholder="Enter Minutes">
19+
</form>
20+
</div>
21+
<div class="display">
22+
<h1 class="display__time-left"></h1>
23+
<p class="display__end-time"></p>
24+
</div>
25+
</div>
26+
27+
<script src="main.js"></script>
28+
</body>
29+
</html>

‎29_day/main.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
min-height: 100vh;
6+
background: url('https://picsum.photos/1500/1000/?random') center no-repeat;
7+
background-size: cover;
8+
font-family: sans-serif;
9+
}
10+
.wrapper {
11+
width: 850px;
12+
display: flex;
13+
}
14+
15+
video {
16+
box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.1);
17+
}
18+
19+
.speed {
20+
background: #efefef;
21+
flex: 1;
22+
display: flex;
23+
align-items: flex-start;
24+
margin: 10px;
25+
border-radius: 50px;
26+
box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.1);
27+
overflow: hidden;
28+
}
29+
30+
.speed-bar {
31+
width: 100%;
32+
background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
33+
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
padding: 2px;
38+
color: white;
39+
height: 16.3%;
40+
}

‎29_day/main.js

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
let countdown;
2+
const timerDisplay = document.querySelector('.display__time-left');
3+
const endTime = document.querySelector('.display__end-time');
4+
const buttons = document.querySelectorAll('[data-time]');
5+
6+
function timer(seconds) {
7+
clearInterval(countdown);
8+
9+
const now = Date.now();
10+
const then = now + seconds * 1000;
11+
displayTimeLeft(seconds);
12+
displayEndTime(then);
13+
14+
countdown = setInterval(() => {
15+
const secondsLeft = Math.round((then - Date.now()) / 1000);
16+
if (secondsLeft < 0) {
17+
clearInterval(countdown);
18+
return;
19+
}
20+
displayTimeLeft(secondsLeft);
21+
}, 1000);
22+
}
23+
24+
function displayTimeLeft(seconds) {
25+
const minutes = Math.floor(seconds / 60);
26+
const remainderSeconds = seconds % 60;
27+
const display = `${minutes}:${remainderSeconds < 10
28+
? '0'
29+
: ''}${remainderSeconds}`;
30+
document.title = display;
31+
timerDisplay.textContent = display;
32+
}
33+
34+
function displayEndTime(timestamp) {
35+
const end = new Date(timestamp);
36+
const hour = end.getHours();
37+
const adjustedHour = hour > 12
38+
? hour - 12
39+
: hour;
40+
const minutes = end.getMinutes();
41+
endTime.textContent = `Be Back At ${adjustedHour}:${minutes < 10
42+
? '0'
43+
: ''}${minutes}`;
44+
}
45+
46+
function startTimer() {
47+
const seconds = parseInt(this.dataset.time);
48+
timer(seconds);
49+
}
50+
51+
buttons.forEach(button => button.addEventListener('click', startTimer));
52+
document.customForm.addEventListener('submit', function(e) {
53+
e.preventDefault();
54+
const mins = this.minutes.value;
55+
console.log(mins);
56+
timer(mins * 60);
57+
this.reset();
58+
});

‎29_day/package.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "gum",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "scripts.js",
6+
"scripts": {
7+
"start" : "browser-sync start --directory --server --files '*.css, *.html, *.js'"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"devDependencies": {
12+
"browser-sync": "^2.12.5"
13+
}
14+
}

‎README.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -148,8 +148,12 @@ Learned about `Event.stopPropagation()` & `EventTarget.addEventListener()` boole
148148
### Day 26: 13 Jul 2018
149149
It was super-fun learning abt this really slick "follow along" nav found on Stripe's pricing page.
150150

151-
### Day 27: 14 Jul 208
151+
### Day 27: 14 Jul 2018
152152
Understood the basics behind the "Click and Drag to Scroll" challenge. element.offsetLeft play a great role in this logic.
153153

154-
### Day 28: 15 Feb 2017
154+
### Day 28: 15 Jul 2018
155155
Finished the fantastic video speed controller UI challenge today. These offset properties are pretty important for proper aligments. For block-level elements, `offsetTop`, `offsetLeft`, `offsetWidth`, and `offsetHeight` describe the border box of an element relative to the `offsetParent`. The `offsetParent` element is the nearest ancestor that has a position other than static.
156+
157+
### Day 29: 16 Jul 2018
158+
159+
Finished the beautiful countdown break clock challenge today. Learned about timestamps, set & clear intervals and `Date.now()`. The `Date.now()` method returns the number of milliseconds elapsed since `1 January 1970 00:00:00 UTC`. Because `now()` is a static method of Date, we can always use it as `Date.now()` instead of `new Date().now()`.

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
<a class="active" href="./26_day/index.html">26 Day</a>
3838
<a class="active" href="./27_day/index.html">27 Day</a>
3939
<a class="active" href="./28_day/index.html">28 Day</a>
40+
<a class="active" href="./29_day/index.html">29 Day</a>
4041
</div>
4142
</body>
4243

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /