microsoft_clone_site/script.js at main · MustafaMulla29/microsoft_clone_site · GitHub

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
const slides = document.querySelectorAll('.slide')
const circlePrev = document.getElementById('circlePrev')
const circleNext = document.getElementById('circleNext')

let counter = 0

circlePrev.style.backgroundColor = "black"

slides.forEach(
    (slide, index) => {
        slide.style.left = `${index * 100}%`
    }
)

const goNext = () => {
    if (counter < slides.length - 1) {
        counter++
        slideImage()
    }
    circlePrev.style.backgroundColor = 'white'
    circleNext.style.backgroundColor = 'black'

}
const goPrev = () => {
    if (counter != 0) {
        counter--
        slideImage()
    }
    circlePrev.style.backgroundColor = 'black'
    circleNext.style.backgroundColor = 'white'
}


const slideImage = () => {
    slides.forEach(
        (slide) => {
            slide.style.transform = `translateX(-${counter * 100}%)`
        }
    )
}


const navigation = document.getElementById('navigation')
const hamburger = document.getElementById('hamburger')
const close = document.getElementById('close')

if (window.outerHeight <= 1024) {
    hamburger.addEventListener('click', () => {
        navigation.style.display = 'block'
        hamburger.style.display = 'none'
        close.style.display = 'block'
    })

    close.addEventListener('click', () => {
        navigation.style.display = 'none'
        if (window.outerWidth <= '1024')
            hamburger.style.display = 'block'
        else {
            hamburger.style.display = 'none'
        }
        close.style.display = 'none'
    })
}