тебе не надо будет каждый раз обновлять лист, при изменении дерева элементов - коллекция автоматически обновиться

собственно теперь решение вашей задачи - пустяки)

как получить количество дивов в листе ?

Аружан Сду, [13.11.2021 18:27]
ul - #list ,  div - .todo

Короче классы и айди такие

Какие метод нужен

getElementById и getElementsByClassName

Разными способами можно получить количество divов.  document.queryselectorAll('');

Этот метод вернет статическую коллекцию... каждый раз надо ручками пересчитывать

в Safari на Mac Webp формат изображений не поддерживается. А поддерживается ли Webp в Safari на iOs?

Гугли тег picture там все само что надо подсунет

всем привет, мучаюсь над анимацией кругов. Есть 5 кругов (сверху), которые должны перемещаться на места друг друга, например синий на место красного и наоборот и 5 кругов (снизу), которые отвечают за расположение (типа кнопки), т.е наводишь на синий круг снизу и круги сверху начинают анимацию переходов. Как это можно сделать? Css и JavaScript, можно и так и так

код HTML
<div class="main">
       <div class="circls">
           <div class="cls1"></div>
           <div class="cls2"></div>
           <div class="cls3"></div>
           <div class="cls4"></div>
           <div class="cls5"></div>
       </div>
       <div class="js">
           <div class="btw1"></div>
           <div class="btw2"></div>
           <div class="btw3"></div>
           <div class="btw4"></div>
           <div class="btw5"></div>
       </div>

код css
body{
   margin: 0;
   font-family: 'Montserrat', sans-serif;
   background-color: black;
   font-size: 15px;
   line-height: 1.6;
   color: #333;
}

.main{
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
   height: 100vh;
   background: url("img/black.jpg") center no-repeat;
   -webkit-background-size: cover;
   background-size: cover;
}

.circls{
   margin-top: 50px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   width: 100%;
   height: 100vh;
   -webkit-background-size: cover;
   background-size: cover;
}

.cls1{
 position: relative;
 left: 60px;
 background-color: blue;

 width: 40px;
 height: 40px;
 border-radius: 20px;

 -webkit-animation:pulsing 1s infinite;
 animation: pulsing 1s infinite;
}

.cls2{
   position: relative;
   left: 60px;
   background-color: red;

   width: 40px;
   height: 40px;
   border-radius: 20px;

   -webkit-animation:pulsing 1s infinite;
   animation: pulsing 1s infinite;
}

.cls3{
   position: relative;
   top: 20px;
   background-color: yellow;

   width: 40px;
   height: 40px;
   border-radius: 20px;

   -webkit-animation:pulsing 1s infinite;
   animation: pulsing 1s infinite;
}

.cls4{
   position: relative;
   top: 40px;
   right: 60px;
   background-color: orange;
   
   width: 40px;
   height: 40px;
   border-radius: 20px;

   -webkit-animation:pulsing 1s infinite;
   animation: pulsing 1s infinite;
}

.cls5{
   position: relative;
   top: 40px;
   right:60px;
   background-color: green;

   width: 40px;
   height: 40px;
   border-radius: 20px;

   -webkit-animation:pulsing 1s infinite;
   animation: pulsing 1s infinite;
}

.js{
   display: flex;
   flex-direction: row;
   justify-content: center;
   width: 100%;
   height: 100vh;
   -webkit-background-size: cover;
   background-size: cover;
}

.btw1{
   margin: 40px;
   background-color: blue;
   width: 80px;
   height: 80px;
   border-radius: 40px;
}

.btw2{
   margin: 40px;
   background-color: red;
   width: 80px;
   height: 80px;
   border-radius: 40px;
}

.btw3{
   margin: 40px;
   background-color: yellow;
   width: 80px;
   height: 80px;
   border-radius: 40px;
}

.btw4{
   margin: 40px;
   background-color: orange;
   width: 80px;
   height: 80px;
   border-radius: 40px;
}

.btw5{
   margin: 40px;
   background-color: green;
   width: 80px;
   height: 80px;
   border-radius: 40px;

Не ясно куда какой должен переместиться))

в принципе куда угодно, главное на место другого круга. Если прям нужно конкретно то пусть Синий на место красного, красный на место оранжевого, оранжевый на место зеленного, зеленый на место синего

желтый пусть пока на месте стоит)

Ну если так... я бы сделал 5 классов, для положения каждого элемента (без разницы на цвет), и через js вешал бы рандомно эти классы...

проблема в том что в css файле через relative я расположил круги сверху, в js файле я начинаю делать анимацию, и когда анимация происходит круги сначала встают на первоначальную позицию (как это было до relative) а потом встают на указанную позицию

сейчас видео скину