-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
36 lines (29 loc) · 1.06 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* thumbnails interaction */
const thumbnails = document.querySelectorAll('.thumbnail');
const mainImg = document.querySelector('.main-img');
thumbnails.forEach(thumbnail => {
thumbnail.addEventListener('click', e => {
thumbnails.forEach(thumbnail => thumbnail.classList.remove('active'));
mainImg.attributes.src.value = e.target.attributes.src.value;
thumbnail.classList.add('active');
});
});
/* Cart interaction */
const addBtn = document.querySelector('#add-btn');
const cartBtn = document.querySelector('#cart-btn');
addBtn.addEventListener('click', () => {
cartBtn.classList.add('new-item');
});
/* color interaction */
const colors = document.querySelectorAll('.color');
colors.forEach(color => {
color.addEventListener('click', e => {
colors.forEach(color => color.classList.remove('selected-color'));
e.target.classList.add('selected-color');
});
});
/* Mobile menu overflow */
const mobileCheck = document.querySelector('#mobile-menu');
mobileCheck.addEventListener('change', () =>
document.body.classList.toggle('overflow-hidden')
);