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 4a6d685

Browse files
Day 02 - JS CSS Clock
1 parent 3895c61 commit 4a6d685

File tree

7 files changed

+102
-2
lines changed

7 files changed

+102
-2
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
11
.DS_Store
2+
node_modules/
3+
*.log
4+
haters/

‎02_day/index.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>02 Day</title>
7+
</head>
8+
9+
<body>
10+
11+
<link href="style.min.css" rel="stylesheet">
12+
13+
<div class="clock">
14+
<div class="clock-face">
15+
<div class="hand hour-hand"></div>
16+
<div class="hand min-hand"></div>
17+
<div class="hand second-hand"></div>
18+
</div>
19+
</div>
20+
21+
<script>
22+
const secondHand = document.querySelector('.second-hand');
23+
const minsHand = document.querySelector('.min-hand');
24+
const hourHand = document.querySelector('.hour-hand');
25+
26+
const now = new Date();
27+
const seconds = now.getSeconds();
28+
const mins = now.getMinutes();
29+
const hour = now.getHours();
30+
31+
var secondsDegrees = ((360 / 60) * seconds) + 90;
32+
var minsDegrees = ((360 / 60) * mins) + 90;
33+
var hourDegrees = ((360 / 12) * hour) + 90;
34+
35+
function setDate() {
36+
secondsDegrees += 6;
37+
minsDegrees += 0.1;
38+
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
39+
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
40+
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
41+
}
42+
setInterval(setDate, 1000);
43+
setDate();
44+
</script>
45+
</body>
46+
47+
</html>

‎02_day/style.css

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
html {
2+
background: #018DED url(https://picsum.photos/200/300/?random);
3+
background-size: cover;
4+
font-family: 'helvetica neue';
5+
text-align: center;
6+
font-size: 10px;
7+
}
8+
9+
body {
10+
font-size: 2rem;
11+
display: flex;
12+
flex: 1;
13+
min-height: 100vh;
14+
align-items: center;
15+
}
16+
17+
.clock {
18+
width: 30rem;
19+
height: 30rem;
20+
border: 20px solid white;
21+
border-radius: 50%;
22+
margin: 50px auto;
23+
position: relative;
24+
padding: 2rem;
25+
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #EFEFEF, inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
26+
}
27+
28+
.clock-face {
29+
position: relative;
30+
width: 100%;
31+
height: 100%;
32+
transform: translateY(-3px);
33+
}
34+
35+
.hand {
36+
width: 50%;
37+
height: 6px;
38+
background: black;
39+
position: absolute;
40+
top: 50%;
41+
transform-origin: 100%;
42+
transform: rotate(90deg);
43+
transition: all 0.05s;
44+
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
45+
}

‎02_day/style.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ Thanks!
1919
## Roadmap
2020

2121
### Day 1: 18 Jun 2018
22-
**Thoughts:** Learned about key event, transitionend event & ES6 template strings.
22+
Learned about key event, transitionend event & ES6 template strings.
2323

2424
**Tool Found:** Nice tool for finding JavaScript event keycodes at [keycode.info](http://keycode.info/)
25+
26+
### Day 2: 19 Jun 2018
27+
Learned about Css transition & transform, ES6 const keyword and live UI update after few seconds.

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<body>
1111
<div class="topnav">
1212
<a class="active" href="./01_day/index.html">01 Day</a>
13+
<a class="active" href="./02_day/index.html">02 Day</a>
1314
</div>
1415
</body>
1516

‎main.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
html {
22
font-size: 10px;
3-
background: url(https://images.pexels.com/photos/36487/above-adventure-aerial-air.jpg?cs=srgb&dl=light-sea-flight-36487.jpg&fm=jpg) bottom center;
3+
background: url(https://images.unsplash.com/photo-1515343480029-43cdfe6b6aae?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=250fd87139bfce9117534e300a5bf25b&auto=format&fit=crop&w=800&q=80) bottom center;
44
background-size: cover;
55
}
66

0 commit comments

Comments
(0)

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