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 f4155f0

Browse files
add task03 and update the answer of task 02
1 parent 2ec2555 commit f4155f0

File tree

2 files changed

+150
-0
lines changed

2 files changed

+150
-0
lines changed

‎02 - JS Clock/index-FINISHED.html

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS + CSS Clock</title>
6+
</head>
7+
<body>
8+
9+
10+
<div class="clock">
11+
<div class="clock-face">
12+
<div class="hand hour-hand"></div>
13+
<div class="hand min-hand"></div>
14+
<div class="hand second-hand"></div>
15+
</div>
16+
</div>
17+
18+
19+
<style>
20+
html {
21+
background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
22+
background-size:cover;
23+
font-family:'helvetica neue';
24+
text-align: center;
25+
font-size: 10px;
26+
}
27+
28+
body {
29+
margin: 0;
30+
font-size: 2rem;
31+
display:flex;
32+
flex:1;
33+
min-height: 100vh;
34+
align-items: center;
35+
}
36+
37+
.clock {
38+
width: 30rem;
39+
height: 30rem;
40+
border:20px solid white;
41+
border-radius:50%;
42+
margin:50px auto;
43+
position: relative;
44+
padding:2rem;
45+
box-shadow:
46+
0 0 0 4px rgba(0,0,0,0.1),
47+
inset 0 0 0 3px #EFEFEF,
48+
inset 0 0 10px black,
49+
0 0 10px rgba(0,0,0,0.2);
50+
}
51+
52+
.clock-face {
53+
position: relative;
54+
width: 100%;
55+
height: 100%;
56+
transform: translateY(-3px); /* account for the height of the clock hands */
57+
}
58+
59+
.hand {
60+
width:50%;
61+
height:6px;
62+
background:black;
63+
position: absolute;
64+
top:50%;
65+
transform-origin: 100%;
66+
transform: rotate(90deg);
67+
transition: all 0.05s;
68+
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
69+
}
70+
</style>
71+
72+
<script>
73+
const secondHand = document.querySelector('.second-hand');
74+
const minsHand = document.querySelector('.min-hand');
75+
const hourHand = document.querySelector('.hour-hand');
76+
77+
function setDate() {
78+
const now = new Date();
79+
80+
const seconds = now.getSeconds();
81+
const secondsDegrees = ((seconds / 60) * 360) + 90;
82+
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
83+
84+
const mins = now.getMinutes();
85+
const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
86+
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
87+
88+
const hour = now.getHours();
89+
const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
90+
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
91+
}
92+
93+
setInterval(setDate, 1000);
94+
95+
setDate();
96+
97+
</script>
98+
</body>
99+
</html>

‎03 - CSS Variables/index-START.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Scoped CSS Variables and JS</title>
6+
</head>
7+
<body>
8+
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
9+
10+
<div class="controls">
11+
<label for="spacing">Spacing:</label>
12+
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
13+
14+
<label for="blur">Blur:</label>
15+
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
16+
17+
<label for="base">Base Color</label>
18+
<input id="base" type="color" name="base" value="#ffc600">
19+
</div>
20+
21+
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
22+
23+
<style>
24+
25+
/*
26+
misc styles, nothing to do with CSS variables
27+
*/
28+
29+
body {
30+
text-align: center;
31+
background: #193549;
32+
color: white;
33+
font-family: 'helvetica neue', sans-serif;
34+
font-weight: 100;
35+
font-size: 50px;
36+
}
37+
38+
.controls {
39+
margin-bottom: 50px;
40+
}
41+
42+
input {
43+
width:100px;
44+
}
45+
</style>
46+
47+
<script>
48+
</script>
49+
50+
</body>
51+
</html>

0 commit comments

Comments
(0)

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