Aplikacja oddechowa

Rejestracja:około 5 lat
Ostatnio:ponad rok
Postów:21

Cześć

Wątek już był ale nie pojawiło się rozwiązanie, a poza tym postanowiłem zmienić sposób rozwiązania problemu, więc postanowiłem napisać jeszcze raz.
Otóż mam problem z napisaniem poprawnego kodu js. Aplikacja po kliknięciu odpowiedniego przycisku ma włączać odpowiedni preset oddechowy. Tutaj kod który udało mi się już napisać. Wiem że kod można bardziej zoptymalizować przez dodanie pętli ale tutaj na razie robię to w ramach ćwiczeń. Będę wdzięczny za podpowiedź co jest nie tak w js. Styl animation jest dodawany dwa razy, ponieważ pierwszy ma za zadanie resetować wcześniej dodaną animację.

Kopiuj

<body>
    <h1><a href="../index.html">Czas na oddech</a></h1>
    <div class="wrapper clearfix">
        <div class="box1">
            <h2>Przygotowane presety</h2>
            <ul>
                <li><a href="#">Koherencja serca 5-5</a></li>
                <li><a href="#">Relaksacja 3-6-6</a></li>
                <li><a href="#">Kwadratowe oddychanie 4-4-4-4</a></li>
                <li><a href="#">fdsf</a></li>
                <li><a href="#">dsfdsf</a></li>
                <li><a href="#">dsfdsfsd</a></li>
                <li><a href="#">dfsdfds</a></li>
            </ul>
        </div>
        <div class="box2">
            <div class="circle"></div>
        </div>
    </div>

    <script></script>
</body>

Kopiuj

* {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

h1 {
    background-color: #02ED8C;
    text-align: center;
    padding: 20px;

}

h2 {
    text-align: center;
    padding: 10px;
}

.wrapper {
    /* background-color: green; */
    width: 80vw;
    height: 80vh;
    margin: auto;
}

.box1 {
    width: 30vw;
    background-color: #458AF7;
    float: left;
}

.box2 {
    width: 50vw;
    height: 100%;
    /* background-color: cadetblue; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.box3 {
    text-align: center;
    padding: 0 20px;
}

ul {
    height: 69.5vh;
    overflow-y: scroll;
}

li {
    list-style: none;
    padding: 5px 0 5px 10px;
}

li:hover {
    background-color: aqua;
}

a {
    text-decoration: none;
    color: black;
}

.circle {
    background-color: #000AF0;
    border-radius: 50%;
    box-shadow: 0 0 0 10px white, 0 0 0 15px #000AF0;
    animation: breathe55 10s linear infinite;
}

@keyframes breathe55 {
    0% {
        width: 0;
        height: 0;
    }

    50% {
        width: 150px;
        height: 150px;
    }

    100% {
        width: 0;
        height: 0;
    }
}

@keyframes breathe366 {
    0% {
        width: 0;
        height: 0;
    }

    20% {
        width: 150px;
        height: 150px;
    }

    60% {
        width: 0;
        height: 0;

    }

    100% {
        width: 0;
        height: 0;
    }

}

Kopiuj

const btn55 = document.querySelecctor("li:nth-child(1)");
const btn366 = document.querySelector("li:nth-child(2)");

btn55.addEventListener('click', function () {
    // console.log("klik");
    const animate55 = document.querySelector(".circle");
    animate55.style.animation = "animation", "";
    animate55.style.animation = 'animation', "breathe55 10s linear infinite";
});

btn366.addEventListener("click", function () {
    const animate366 = document.querySelector('.circle');
    animate366 = style.animation = 'animation', "";
    animate366.style.setProperty("animation", "breathe366 15s linear infinite");
})