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 a2525d3

Browse files
add task22 and update the answer of task 21
1 parent 08280f4 commit a2525d3

File tree

3 files changed

+129
-0
lines changed

3 files changed

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

‎22 - Speech Detection/index-START.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Speech Detection</title>
6+
</head>
7+
<body>
8+
9+
<div class="words" contenteditable>
10+
</div>
11+
12+
<script>
13+
window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
14+
15+
16+
</script>
17+
18+
19+
<style>
20+
html {
21+
font-size: 10px;
22+
}
23+
24+
body {
25+
background:#ffc600;
26+
font-family: 'helvetica neue';
27+
font-weight: 200;
28+
font-size: 20px;
29+
}
30+
31+
.words {
32+
max-width:500px;
33+
margin:50px auto;
34+
background:white;
35+
border-radius:5px;
36+
box-shadow:10px 10px 0 rgba(0,0,0,0.1);
37+
padding:1rem 2rem 1rem 5rem;
38+
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
39+
background-size: 100% 3rem;
40+
position: relative;
41+
line-height:3rem;
42+
}
43+
p {
44+
margin: 0 0 3rem;
45+
}
46+
47+
.words:before {
48+
content: '';
49+
position: absolute;
50+
width: 4px;
51+
top: 0;
52+
left: 30px;
53+
bottom: 0;
54+
border: 1px solid;
55+
border-color: transparent #efe4e4;
56+
}
57+
</style>
58+
59+
</body>
60+
</html>

‎22 - Speech Detection/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+
}

0 commit comments

Comments
(0)

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