Skip to content

Commit 46e4cda

Browse files
solygambassolygambas
committed
feat: day 85
1 parent 01ff6a3 commit 46e4cda

File tree

3 files changed

+144
-9
lines changed

3 files changed

+144
-9
lines changed

‎085-sneaker shop/index.html

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,44 @@
1010
<title>Great Sneakers Inc.</title>
1111
</head>
1212
<body>
13+
<!-- Create a Dark Mode Toggle -->
14+
<button
15+
id="darkModeToggle"
16+
class="btn"
17+
type="button"
18+
aria-label="Toggle dark mode"
19+
>
20+
<span class="icon-sun" aria-hidden="true" style="display: inline">
21+
<!-- Sun SVG -->
22+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
23+
<circle cx="12" cy="12" r="5" fill="currentColor" />
24+
<g stroke="currentColor" stroke-width="2">
25+
<line x1="12" y1="1" x2="12" y2="3" />
26+
<line x1="12" y1="21" x2="12" y2="23" />
27+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
28+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
29+
<line x1="1" y1="12" x2="3" y2="12" />
30+
<line x1="21" y1="12" x2="23" y2="12" />
31+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
32+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
33+
</g>
34+
</svg>
35+
</span>
36+
<span class="icon-moon" aria-hidden="true" style="display: none">
37+
<!-- Moon SVG -->
38+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
39+
<path
40+
d="M21 12.79A9 9 0 1111.21 3a7 7 0 109.79 9.79z"
41+
fill="currentColor"
42+
/>
43+
</svg>
44+
</span>
45+
</button>
1346
<header class="hero">
1447
<div class="container spacing">
15-
<h1 class="primary-title">It's okay to be a little obsessed with shoes</h1>
48+
<h1 class="primary-title">
49+
It's okay to be a little obsessed with shoes
50+
</h1>
1651
<p>
1752
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam
1853
perspiciatis facilis beatae laudantium quidem enim sit sequi!
@@ -61,7 +96,8 @@ <h2 class="section-title">Featured sneakers</h2>
6196
<section class="our-products">
6297
<div class="container">
6398
<h2 class="section-title">Our sneakers</h2>
64-
<article class="product shoe-red spacing">
99+
<!-- Animate Products on Scroll -->
100+
<article class="product shoe-red spacing hidden">
65101
<img
66102
src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-1.png?raw=true"
67103
alt=""
@@ -75,7 +111,7 @@ <h3 class="product__title">A really nice shoe</h3>
75111
<a href="" class="btn">Buy now</a>
76112
</article>
77113

78-
<article class="product shoe-white shoe-left spacing">
114+
<article class="product shoe-white shoe-left spacing hidden">
79115
<img
80116
src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-2.png?raw=true"
81117
alt=""
@@ -89,7 +125,7 @@ <h3 class="product__title">A really nice shoe</h3>
89125
<a href="" class="btn">Buy now</a>
90126
</article>
91127

92-
<article class="product shoe-blue spacing">
128+
<article class="product shoe-blue spacing hidden">
93129
<img
94130
src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-3.png?raw=true"
95131
alt=""
@@ -105,5 +141,6 @@ <h3 class="product__title">A really nice shoe</h3>
105141
</div>
106142
</section>
107143
</main>
144+
<script src="script.js"></script>
108145
</body>
109146
</html>

‎085-sneaker shop/script.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const darkModeToggle = document.getElementById("darkModeToggle");
2+
const iconSun = darkModeToggle.querySelector(".icon-sun");
3+
const iconMoon = darkModeToggle.querySelector(".icon-moon");
4+
const products = document.querySelectorAll(".product");
5+
6+
function updateIcons() {
7+
const isDark = document.body.classList.contains("dark-mode");
8+
iconSun.style.display = isDark ? "none" : "inline";
9+
iconMoon.style.display = isDark ? "inline" : "none";
10+
}
11+
12+
// Create a Dark Mode Toggle
13+
darkModeToggle.addEventListener("click", function () {
14+
document.body.classList.toggle("dark-mode");
15+
updateIcons();
16+
});
17+
18+
// Animate Products on Scroll
19+
const observer = new IntersectionObserver(
20+
(entries, obs) => {
21+
entries.forEach((entry) => {
22+
if (entry.isIntersecting) {
23+
entry.target.classList.remove("hidden");
24+
obs.unobserve(entry.target);
25+
}
26+
});
27+
},
28+
{ threshold: 0.2 }
29+
);
30+
31+
products.forEach((product) => observer.observe(product));

‎085-sneaker shop/style.css

Lines changed: 72 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,18 @@
11
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&display=swap");
22

3+
/* Create a Dark Mode Toggle */
4+
:root {
5+
--clr-text: #fff;
6+
--clr-background: #fff;
7+
--clr-background-secondary: #eee;
8+
--clr-text-secondary: #333;
9+
--clr-title-text: #17353d;
10+
--clr-accent: blue;
11+
--clr-inner: limegreen;
12+
--clr-outer: purple;
13+
--clr-toggle: #ffb347;
14+
}
15+
316
*,
417
*::before,
518
*::after {
@@ -12,6 +25,41 @@ body {
1225
font-family: "Noto Sans JP", sans-serif;
1326
margin: 0;
1427
line-height: 1.6;
28+
background: var(--clr-background);
29+
overflow-x: hidden;
30+
}
31+
32+
body.dark-mode {
33+
--clr-text: #eee;
34+
--clr-background: #222;
35+
--clr-background-secondary: #333;
36+
--clr-text-secondary: #ccc;
37+
--clr-title-text: #fff;
38+
--clr-accent: #ffb347;
39+
--clr-inner: #222;
40+
--clr-outer: #111;
41+
--clr-toggle: #6a7fdb;
42+
}
43+
44+
#darkModeToggle {
45+
position: fixed;
46+
top: 1rem;
47+
right: 1rem;
48+
z-index: 1;
49+
cursor: pointer;
50+
background-color: var(--clr-toggle);
51+
border-radius: 50%;
52+
padding: 0.5rem;
53+
}
54+
55+
#darkModeToggle:focus {
56+
outline-color: var(--clr-toggle);
57+
}
58+
59+
#darkModeToggle svg {
60+
vertical-align: middle;
61+
width: 1.5em;
62+
height: 1.5em;
1563
}
1664

1765
img {
@@ -56,9 +104,9 @@ section {
56104
.btn {
57105
display: inline-block;
58106
text-decoration: none;
59-
color: var(--clr-text, #fff);
107+
color: var(--clr-text);
60108
font-weight: 700;
61-
background-color: var(--clr-accent, blue);
109+
background-color: var(--clr-accent);
62110
text-transform: uppercase;
63111
font-size: 1.125rem;
64112
padding: 0.5rem 1.25rem;
@@ -72,6 +120,12 @@ section {
72120
opacity: 0.9;
73121
}
74122

123+
/* Improve Button Accessibility on Focus */
124+
.btn:focus {
125+
outline: 2px solid var(--clr-accent);
126+
outline-offset: 2px;
127+
}
128+
75129
/* hero section */
76130

77131
.primary-title {
@@ -86,7 +140,7 @@ section {
86140
font-size: 3.5rem;
87141
font-size: clamp(2.5rem, calc(5vw + 1rem), 4rem);
88142
line-height: 1;
89-
color: #17353d;
143+
color: var(--clr-title-text);
90144
margin-bottom: 5rem;
91145
}
92146

@@ -111,14 +165,14 @@ section {
111165
/* featured section */
112166

113167
.featured {
114-
background: #eee;
168+
background: var(--clr-background-secondary);
115169
}
116170

117171
.featured__item {
118172
display: block;
119173
position: relative;
120174
text-decoration: none;
121-
color: #333;
175+
color: var(--clr-text-secondary);
122176
text-align: center;
123177
line-height: 1.2;
124178
transform: scale(0.85);
@@ -170,6 +224,19 @@ section {
170224
border-radius: 1rem;
171225
margin-bottom: 5rem;
172226
text-align: center;
227+
/* Add a Clearfix to Product Articles */
228+
display: flow-root;
229+
}
230+
231+
/* Animate Products on Scroll */
232+
.product.hidden {
233+
opacity: 0;
234+
transform: translateX(-100%);
235+
transition: all 1s;
236+
}
237+
238+
.product.shoe-left.hidden {
239+
transform: translateX(100%);
173240
}
174241

175242
.product__title {

0 commit comments

Comments
 (0)