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 a2fa311

Browse files
author
Ritam Chakraborty
committed
Add logic
1 parent 4faabe3 commit a2fa311

File tree

3 files changed

+48
-6
lines changed

3 files changed

+48
-6
lines changed

‎projects/product-gallery-app/index.html

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111
<body>
1212
<main>
1313
<section class="section-1">
14-
<img src="./assets/image-1.png" alt="image-1">
15-
<img src="./assets/image-1.png" alt="image-2" hidden>
16-
<img src="./assets/image-1.png" alt="image-3" hidden>
14+
<img src="./assets/image-1.png" alt="image-1"class="image-1" data-visible="true">
15+
<img src="./assets/image-2.png" alt="image-2" class="image-2" data-visible="false">
16+
<img src="./assets/image-3.png" alt="image-3" class="image-3" data-visible="false">
1717
<div class="image-changer">
18-
<button class="switch-1"></button>
19-
<button class="swtich-2"></button>
20-
<button class="swtich-3"></button>
18+
<button class="switch-1"data-enabled="true"></button>
19+
<button class="swtich-2"data-enabled="false"></button>
20+
<button class="swtich-3"data-enabled="false"></button>
2121
</div>
2222
</section>
2323
<section class="section-2">
@@ -54,6 +54,7 @@ <h1 class="price">15ドル.00</h1>
5454
<button>Buy Now</button>
5555
</section>
5656
</main>
57+
<script type="module" src="main.js"></script>
5758
</body>
5859

5960
</html>

‎projects/product-gallery-app/main.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const switch1 = document.querySelector('.switch-1');
2+
const switch2 = document.querySelector('.swtich-2');
3+
const switch3 = document.querySelector('.swtich-3');
4+
const image1 = document.querySelector('.image-1');
5+
const image2 = document.querySelector('.image-2');
6+
const image3 = document.querySelector('.image-3');
7+
8+
switch1.addEventListener('click', () => {
9+
image1.setAttribute('data-visible', 'true');
10+
image2.setAttribute('data-visible', 'false');
11+
image3.setAttribute('data-visible', 'false');
12+
switch1.setAttribute('data-enabled', 'true');
13+
switch2.setAttribute('data-enabled', 'false');
14+
switch3.setAttribute('data-enabled', 'false');
15+
});
16+
17+
switch2.addEventListener('click', () => {
18+
image1.setAttribute('data-visible', 'false');
19+
image2.setAttribute('data-visible', 'true');
20+
image3.setAttribute('data-visible', 'false');
21+
switch1.setAttribute('data-enabled', 'false');
22+
switch2.setAttribute('data-enabled', 'true');
23+
switch3.setAttribute('data-enabled', 'false');
24+
});
25+
26+
switch3.addEventListener('click', () => {
27+
image1.setAttribute('data-visible', 'false');
28+
image2.setAttribute('data-visible', 'false');
29+
image3.setAttribute('data-visible', 'true');
30+
switch1.setAttribute('data-enabled', 'false');
31+
switch2.setAttribute('data-enabled', 'false');
32+
switch3.setAttribute('data-enabled', 'true');
33+
});

‎projects/product-gallery-app/style.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ main {
1818
margin-inline: auto;
1919
}
2020

21+
[data-visible='false'] {
22+
display: none;
23+
}
24+
2125
.section-1 {
2226
position: relative;
2327
height: clamp(40rem, 100vh, 60rem);
@@ -49,6 +53,10 @@ main {
4953
background-color: grey;
5054
}
5155

56+
[data-enabled='true'] {
57+
background-color: blue !important;
58+
}
59+
5260
.section-2 {
5361
padding: 2rem;
5462
display: flex;

0 commit comments

Comments
(0)

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