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 1b7e845

Browse files
Added day 29 & 30 related files
1 parent 885e6e9 commit 1b7e845

File tree

7 files changed

+418
-0
lines changed

7 files changed

+418
-0
lines changed
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>Countdown Timer</title>
6+
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
7+
<link rel="stylesheet" href="style.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="scripts.js"></script>
28+
</body>
29+
</html>
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+
});
Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
html {
2+
box-sizing: border-box;
3+
font-size: 10px;
4+
background: #8E24AA;
5+
background: linear-gradient(45deg, #42a5f5 0%,#478ed1 50%,#0d47a1 100%);
6+
}
7+
8+
*, *:before, *:after {
9+
box-sizing: inherit;
10+
}
11+
12+
body {
13+
margin:0;
14+
text-align: center;
15+
font-family: 'Inconsolata', monospace;
16+
}
17+
18+
.display__time-left {
19+
font-weight: 100;
20+
font-size: 20rem;
21+
margin: 0;
22+
color:white;
23+
text-shadow:4px 4px 0 rgba(0,0,0,0.05);
24+
}
25+
26+
.timer {
27+
display:flex;
28+
min-height: 100vh;
29+
flex-direction:column;
30+
}
31+
32+
.timer__controls {
33+
display: flex;
34+
}
35+
36+
.timer__controls > * {
37+
flex:1;
38+
}
39+
40+
.timer__controls form {
41+
flex:1;
42+
display:flex;
43+
}
44+
45+
.timer__controls input {
46+
flex:1;
47+
border:0;
48+
padding:2rem;
49+
}
50+
51+
.timer__button {
52+
background:none;
53+
border:0;
54+
cursor: pointer;
55+
color:white;
56+
font-size: 2rem;
57+
text-transform: uppercase;
58+
background:rgba(0,0,0,0.1);
59+
border-bottom:3px solid rgba(0,0,0,0.2);
60+
border-right:1px solid rgba(0,0,0,0.2);
61+
padding:1rem;
62+
font-family: 'Inconsolata', monospace;
63+
}
64+
65+
.timer__button:hover,
66+
.timer__button:focus {
67+
background:rgba(0,0,0,0.2);
68+
outline:0;
69+
}
70+
71+
.display {
72+
flex:1;
73+
display:flex;
74+
flex-direction: column;
75+
align-items: center;
76+
justify-content: center;
77+
}
78+
79+
.display__end-time {
80+
font-size: 4rem;
81+
color:white;
82+
}

‎Challenges/Day 30 - Whack A Mole/dirt.svg

Lines changed: 40 additions & 0 deletions
Loading[フレーム]
Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Whack A Mole!</title>
6+
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<h1>Whack-a-mole! <span class="score">0</span></h1>
12+
<button onClick="startGame()">Start!</button>
13+
14+
<div class="game">
15+
<div class="hole hole1">
16+
<div class="mole"></div>
17+
</div>
18+
<div class="hole hole2">
19+
<div class="mole"></div>
20+
</div>
21+
<div class="hole hole3">
22+
<div class="mole"></div>
23+
</div>
24+
<div class="hole hole4">
25+
<div class="mole"></div>
26+
</div>
27+
<div class="hole hole5">
28+
<div class="mole"></div>
29+
</div>
30+
<div class="hole hole6">
31+
<div class="mole"></div>
32+
</div>
33+
</div>
34+
35+
<script>
36+
const holes = document.querySelectorAll('.hole');
37+
const scoreBoard = document.querySelector('.score');
38+
const moles = document.querySelectorAll('.mole');
39+
let lastHole;
40+
let timeUp = false;
41+
let score = 0;
42+
43+
function randomTime(min, max) {
44+
return Math.round(Math.random() * (max - min) + min);
45+
}
46+
47+
function randomHole(holes) {
48+
const idx = Math.floor(Math.random() * holes.length);
49+
const hole = holes[idx];
50+
if (hole === lastHole) {
51+
console.log('Ah nah thats the same one bud');
52+
return randomHole(holes);
53+
}
54+
lastHole = hole;
55+
return hole;
56+
}
57+
58+
function peep() {
59+
const time = randomTime(200, 1000);
60+
const hole = randomHole(holes);
61+
hole.classList.add('up');
62+
setTimeout(() => {
63+
hole.classList.remove('up');
64+
if (!timeUp) peep();
65+
}, time);
66+
}
67+
68+
function startGame() {
69+
scoreBoard.textContent = 0;
70+
timeUp = false;
71+
score = 0;
72+
peep();
73+
setTimeout(() => timeUp = true, 10000)
74+
}
75+
76+
function bonk(e) {
77+
if(!e.isTrusted) return; // cheater!
78+
score++;
79+
this.classList.remove('up');
80+
scoreBoard.textContent = score;
81+
}
82+
83+
moles.forEach(mole => mole.addEventListener('click', bonk));
84+
85+
</script>
86+
</body>
87+
</html>
Lines changed: 56 additions & 0 deletions
Loading[フレーム]
Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
html {
2+
box-sizing: border-box;
3+
font-size: 10px;
4+
background: #ffc600;
5+
}
6+
7+
*, *:before, *:after {
8+
box-sizing: inherit;
9+
}
10+
11+
body {
12+
padding: 0;
13+
margin:0;
14+
font-family: 'Amatic SC', cursive;
15+
}
16+
17+
h1 {
18+
text-align: center;
19+
font-size: 10rem;
20+
line-height:1;
21+
margin-bottom: 0;
22+
}
23+
24+
.score {
25+
background:rgba(255,255,255,0.2);
26+
padding:0 3rem;
27+
line-height:1;
28+
border-radius:1rem;
29+
}
30+
31+
.game {
32+
width:600px;
33+
height:400px;
34+
display:flex;
35+
flex-wrap:wrap;
36+
margin:0 auto;
37+
}
38+
39+
.hole {
40+
flex: 1 0 33.33%;
41+
overflow: hidden;
42+
position: relative;
43+
}
44+
45+
.hole:after {
46+
display: block;
47+
background: url(dirt.svg) bottom center no-repeat;
48+
background-size:contain;
49+
content:'';
50+
width: 100%;
51+
height:70px;
52+
position: absolute;
53+
z-index: 2;
54+
bottom:-30px;
55+
}
56+
57+
.mole {
58+
background:url('mole.svg') bottom center no-repeat;
59+
background-size:60%;
60+
position: absolute;
61+
top: 100%;
62+
width: 100%;
63+
height: 100%;
64+
transition:all 0.4s;
65+
}
66+
67+
.hole.up .mole {
68+
top:0;
69+
}

0 commit comments

Comments
(0)

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