190324-interactive-slider/script.js at main · animecodeindo/190324-interactive-slider · 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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
window.onload = () => {
    document.body.style.opacity = 1;

    function generateRandomInRange(min, max) {
        return Math.random() * (max - min) + min;
    }

    function randomizeEmotePosition(emoteBox) {
        const absolutePosition = ["top", "bottom", "left", "right"];
        const randomAbsolute = Math.floor(Math.random() * absolutePosition.length);
        const randomXPosition = Math.floor(Math.random() * 100);
        const randomYPosition = Math.floor(Math.random() * 100);

        const rotateTop = generateRandomInRange(170, 190);
        const rotateBottom = generateRandomInRange(-10, 10);
        const rotateLeft = generateRandomInRange(80, 118);
        const rotateRight = generateRandomInRange(-70, -118);

        if (absolutePosition[randomAbsolute] === "top") {
            emoteBox.style.cssText = `
                top: 0;
                left: ${randomXPosition}%;
                transform: translateX(-${randomXPosition}%) translateY(-5%) rotate(${rotateTop}deg);
            `;
        } else if (absolutePosition[randomAbsolute] === "bottom") {
            emoteBox.style.cssText = `
                bottom: 25px;
                left: ${randomXPosition}%;
                transform: translateX(-${randomXPosition}%) translateY(3%) rotate(${rotateBottom}deg);
            `;
        } else if (absolutePosition[randomAbsolute] === "left") {
            emoteBox.style.cssText = `
                top: ${randomYPosition}%;
                left: 0;
                transform: translateY(-${randomYPosition}%) rotate(${rotateLeft}deg);
            `;
        } else if (absolutePosition[randomAbsolute] === "right") {
            emoteBox.style.cssText = `
                top: ${randomYPosition}%;
                right: 0;
                transform: translateY(-${randomYPosition}%) rotate(${rotateRight}deg);
            `;
        }
    }

    const radioBox = document.querySelectorAll(".radio-box"),
        radioLabel = document.querySelectorAll(".radio-box p");

    radioBox.forEach((box) => {
        box.onmouseenter = () => {
            radioLabel.forEach((label) => {
                label.style.opacity = 0.3;
            });
            box.lastElementChild.style.opacity = 1;
        };

        box.onmouseleave = () => {
            radioLabel.forEach((label) => {
                label.style.opacity = 1;
            });
        };
    });

    const radioButton = document.querySelectorAll(".radio-box .circle");
    const imageEmotes = document.querySelectorAll(".emote-image");
    const innerProgress = document.querySelector(".inner-progress");

    imageEmotes.forEach((emote) => {
        emote.classList.remove("active");
    });

    const emoteBoxes = document.querySelectorAll(".emote-box");

    emoteBoxes.forEach((emoteBox) => {
        randomizeEmotePosition(emoteBox);
    });

    let currentTargetIndex = null;

    radioButton.forEach((radio, index) => {
        const rangeRating = radio.getAttribute("data-progress-rating");

        radio.onclick = () => {
            innerProgress.style.width = `${rangeRating}%`;

            imageEmotes.forEach((emote) => {
                emote.classList.remove("active");
            });
            imageEmotes[index].classList.add("active");

            if (currentTargetIndex !== index) {
                if (currentTargetIndex !== null) {
                    setTimeout(() => {
                        randomizeEmotePosition(emoteBoxes[currentTargetIndex]);
                    }, 10);
                }
                currentTargetIndex = index;

                console.log(currentTargetIndex);
            }
        };
    });
};