Skip to content

Commit 03eec3e

Browse files
rootroot
root
authored and
root
committed
Update
1 parent 00ab599 commit 03eec3e

File tree

25 files changed

+2115
-1990
lines changed

25 files changed

+2115
-1990
lines changed

‎.eslintrc.js‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
module.exports = {
2-
env: {
3-
browser: true,
4-
commonjs: true,
5-
es6: true
6-
},
7-
extends: 'eslint:recommended',
8-
parserOptions: {
9-
sourceType: 'module'
10-
},
11-
rules: {
12-
indent: ['error', 4],
13-
'linebreak-style': ['error', 'windows'],
14-
quotes: ['error', 'single'],
15-
semi: ['error', 'always']
16-
}
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
commonjs: true,
5+
es6: true
6+
},
7+
extends: 'eslint:recommended',
8+
parserOptions: {
9+
sourceType: 'module'
10+
},
11+
rules: {
12+
indent: ['error', 4],
13+
'linebreak-style': ['error', 'windows'],
14+
quotes: ['error', 'single'],
15+
semi: ['error', 'always']
16+
}
1717
};

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

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

‎03 - CSS Variables/index-FINISHED.html‎

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,76 @@
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-
:root {
25-
--base: #ffc600;
26-
--spacing: 10px;
27-
--blur: 10px;
28-
}
29-
30-
img {
31-
padding: var(--spacing);
32-
background: var(--base);
33-
filter: blur(var(--blur));
34-
}
35-
36-
.hl {
37-
color: var(--base);
38-
}
39-
40-
/*
41-
misc styles, nothing to do with CSS variables
42-
*/
43-
44-
body {
45-
text-align: center;
46-
background: #193549;
47-
color: white;
48-
font-family: 'helvetica neue', sans-serif;
49-
font-weight: 100;
50-
font-size: 50px;
51-
}
52-
53-
.controls {
54-
margin-bottom: 50px;
55-
}
56-
57-
input {
58-
width:100px;
59-
}
60-
</style>
61-
62-
<script>
63-
const inputs = document.querySelectorAll('.controls input');
64-
65-
function handleUpdate() {
66-
const suffix = this.dataset.sizing || '';
67-
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
68-
}
69-
70-
inputs.forEach(input => input.addEventListener('change', handleUpdate));
71-
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
72-
</script>
73-
74-
75-
</body>
76-
</html>
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+
:root {
25+
--base: #ffc600;
26+
--spacing: 10px;
27+
--blur: 10px;
28+
}
29+
30+
img {
31+
padding: var(--spacing);
32+
background: var(--base);
33+
filter: blur(var(--blur));
34+
}
35+
36+
.hl {
37+
color: var(--base);
38+
}
39+
40+
/*
41+
misc styles, nothing to do with CSS variables
42+
*/
43+
44+
body {
45+
text-align: center;
46+
background: #193549;
47+
color: white;
48+
font-family: 'helvetica neue', sans-serif;
49+
font-weight: 100;
50+
font-size: 50px;
51+
}
52+
53+
.controls {
54+
margin-bottom: 50px;
55+
}
56+
57+
input {
58+
width:100px;
59+
}
60+
</style>
61+
62+
<script>
63+
const inputs = document.querySelectorAll('.controls input');
64+
65+
function handleUpdate() {
66+
const suffix = this.dataset.sizing || '';
67+
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
68+
}
69+
70+
inputs.forEach(input => input.addEventListener('change', handleUpdate));
71+
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
72+
</script>
73+
74+
75+
</body>
76+
</html>

0 commit comments

Comments
 (0)