Skip to content

Commit 7f946b9

Browse files
AhiShaharAhiShahar
committed
extra practice
1 parent f4d2892 commit 7f946b9

File tree

7 files changed

+110
-164
lines changed

7 files changed

+110
-164
lines changed

‎02 - JS + CSS Clock/css/style.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
body {
2+
background-image: url(http://unsplash.it/1500/1000?blur=50);
3+
background-size:cover;
4+
font-size: 2rem;
5+
display:flex;
6+
flex:1;
7+
min-height: 100vh;
8+
align-items: center;
9+
}
10+
11+
.clock {
12+
width: 20rem;
13+
height: 20rem;
14+
border:20px solid white;
15+
border-radius:15%;
16+
margin:50px auto;
17+
position: relative;
18+
padding:2rem;
19+
box-shadow: 0 0 0 4px rgba(0,0,0,0.2), inset 0 0 0 3px #EFEFEF, 0 0 10px rgba(0,0,0,0.2);
20+
}
21+
22+
23+
24+
.hand {
25+
width:45%;
26+
height:6px;
27+
background:black;
28+
position: absolute;
29+
top: calc( 50% - 2px );
30+
left: calc( 5% - 3px) ;
31+
transform-origin: 100%;
32+
transform: rotate(90deg);
33+
transition: all 0.05s;
34+
transition-timing-function: cubic-bezier(0, 2, 0.8, 1);
35+
}

‎02 - JS + CSS Clock/index-START.html‎

Lines changed: 2 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5+
<link rel="stylesheet" href="css/style.css">
56
<title>JS + CSS Clock</title>
67
</head>
78
<body>
@@ -16,58 +17,6 @@
1617
</div>
1718

1819

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-
font-size: 2rem;
30-
display:flex;
31-
flex:1;
32-
min-height: 100vh;
33-
align-items: center;
34-
}
35-
36-
.clock {
37-
width: 30rem;
38-
height: 30rem;
39-
border:20px solid white;
40-
border-radius:50%;
41-
margin:50px auto;
42-
position: relative;
43-
padding:2rem;
44-
box-shadow:
45-
0 0 0 4px rgba(0,0,0,0.1),
46-
inset 0 0 0 3px #EFEFEF,
47-
inset 0 0 10px black,
48-
0 0 10px rgba(0,0,0,0.2);
49-
}
50-
51-
.clock-face {
52-
position: relative;
53-
width: 100%;
54-
height: 100%;
55-
transform: translateY(-3px); /* account for the height of the clock hands */
56-
}
57-
58-
.hand {
59-
width:50%;
60-
height:6px;
61-
background:black;
62-
position: absolute;
63-
top:50%;
64-
}
65-
66-
</style>
67-
68-
<script>
69-
70-
71-
</script>
20+
<script src="js/main.js"></script>
7221
</body>
7322
</html>

‎02 - JS + CSS Clock/index.html‎

Lines changed: 3 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5+
<link rel="stylesheet" href="css/style.css">
56
<title>JS + CSS Clock</title>
67
</head>
78
<body>
89

9-
10+
1011
<div class="clock">
1112
<div class="clock-face">
1213
<div class="hand hour-hand"></div>
@@ -16,81 +17,6 @@
1617
</div>
1718

1819

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-
font-size: 2rem;
30-
display:flex;
31-
flex:1;
32-
min-height: 100vh;
33-
align-items: center;
34-
}
35-
36-
.clock {
37-
width: 30rem;
38-
height: 30rem;
39-
border:20px solid white;
40-
border-radius:50%;
41-
margin:50px auto;
42-
position: relative;
43-
padding:2rem;
44-
box-shadow:
45-
0 0 0 4px rgba(0,0,0,0.1),
46-
inset 0 0 0 3px #EFEFEF,
47-
inset 0 0 10px black,
48-
0 0 10px rgba(0,0,0,0.2);
49-
}
50-
51-
.clock-face {
52-
position: relative;
53-
width: 100%;
54-
height: 100%;
55-
transform: translateY(-3px); /* account for the height of the clock hands */
56-
}
57-
58-
.hand {
59-
width:50%;
60-
height:6px;
61-
background:black;
62-
position: absolute;
63-
top:50%;
64-
transform-origin: 100%;
65-
transform: rotate(90deg);
66-
transition: all 0.05s;
67-
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
68-
}
69-
</style>
70-
71-
<script>
72-
const secondHand = document.querySelector('.second-hand');
73-
const minsHand = document.querySelector('.min-hand');
74-
const hourHand = document.querySelector('.hour-hand');
75-
76-
function setDate() {
77-
const now = new Date();
78-
79-
const seconds = now.getSeconds();
80-
const secondsDegrees = ((seconds / 60) * 360) + 90;
81-
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
82-
83-
const mins = now.getMinutes();
84-
const minsDegrees = ((mins / 60) * 360) + 90;
85-
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
86-
87-
const hour = now.getMinutes();
88-
const hourDegrees = ((mins / 12) * 360) + 90;
89-
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
90-
}
91-
92-
setInterval(setDate, 1000);
93-
94-
</script>
20+
<script src="js/main.js"></script>
9521
</body>
9622
</html>

‎02 - JS + CSS Clock/js/main.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
'use strict';
2+
3+
const secondHand = document.querySelector('.second-hand'),
4+
minuteHand = document.querySelector('.min-hand'),
5+
hourHand = document.querySelector('.hour-hand');
6+
7+
function setDate() {
8+
const now = new Date();
9+
10+
const seconds = now.getSeconds() * 6 + 90;
11+
const minutes = now.getMinutes() * 6 + 90;
12+
const hours = (minutes - 90) * 5 + 90;
13+
14+
secondHand.style.transform = `rotate(${seconds}deg)`;
15+
16+
minuteHand.style.transform = `rotate(${minutes}deg)`;
17+
18+
hourHand.style.transform = `rotate(${hours}deg)`;
19+
}
20+
21+
setInterval(setDate, 1000);
22+
setDate();

‎03 - CSS Variables/css/style.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
:root {
2+
--base: #429942;
3+
--spacing: 3px;
4+
--blur: 2px;
5+
}
6+
7+
img {
8+
background: var(--base);
9+
padding: var(--spacing);
10+
filter: blur(var(--blur));
11+
}
12+
13+
.hl {
14+
color: var(--base);
15+
}
16+
17+
body {
18+
text-align: center;
19+
background: #193549;
20+
color: white;
21+
font-family: 'helvetica neue', sans-serif;
22+
font-weight: 100;
23+
font-size: 50px;
24+
}
25+
26+
.controls {
27+
margin-bottom: 50px;
28+
}
29+
30+
a {
31+
color: var(--base);
32+
text-decoration: none;
33+
}
34+
35+
input {
36+
width:100px;
37+
}

‎03 - CSS Variables/index-START.html‎ renamed to ‎03 - CSS Variables/index.html‎

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5+
<link rel="stylesheet" href="css/style.css">
56
<title>Scoped CSS Variables and JS</title>
67
</head>
78
<body>
@@ -20,40 +21,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
2021

2122
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
2223

23-
<style>
24-
25-
/*
26-
misc styles, nothing to do with CSS variables
27-
*/
28-
29-
body {
30-
text-align: center;
31-
}
32-
33-
body {
34-
background: #193549;
35-
color: white;
36-
font-family: 'helvetica neue', sans-serif;
37-
font-weight: 100;
38-
font-size: 50px;
39-
}
40-
41-
.controls {
42-
margin-bottom: 50px;
43-
}
44-
45-
a {
46-
color: var(--base);
47-
text-decoration: none;
48-
}
49-
50-
input {
51-
width:100px;
52-
}
53-
</style>
54-
55-
<script>
56-
</script>
24+
<script src="js/main.js"></script>
5725

5826
</body>
5927
</html>

‎03 - CSS Variables/js/main.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
function handleUpdate() {
2+
debugger
3+
const suffix = this.dataset.sizing || '';
4+
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
5+
}
6+
7+
const inputs = document.querySelectorAll('.controls input');
8+
9+
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

0 commit comments

Comments
 (0)