Dino Winchester

.is-active {
     animation-name: shake;
     animation-direction: alternate;
     animation-duration: 1s;
     animation-iteration-count: 4;
}

@keyframes shake {
     from {
          transform: translateX(0px);
     }
     to {
          transform: translateX(150px);
     }
}

const button = document.querySelector(".button");

button.classList.add("is-active");

button.addEventListener("animationend", (event) => {
     event.stopPropagation();
     button.classList.remove("is-active");
}, { once: true });

Создаю с нуля инпуты и кнопку для добавления новых элементов массива, добавляю, но цикл их не видит и не выводит в окно.

let li = document.createElement("li");
let content = `${elem.item}, цена ${elem.price}, номер ${elem.index}`;
li.textContent = content;
ul.appendChild(li);

but.addEventListener("click", () => {
    goods.push({
        item: input1.value,
        price: input2.value,
        index: input3.value,
    });

    ul.innerHTML = goods.map(({ item, price, index }) => {
        return `<li>${item}, цена ${price}, номер ${index}</li>`
    }).join("");
});

but.addEventListener("click", () => {
    goods.push({
        item: input1.value,
        price: input2.value,
        index: input3.value,
    });

    const { item, price, index } = goods[goods.length - 1];

    let li = document.createElement("li");
    let content = `${item}, цена ${price}, номер ${index}`;
    li.textContent = content;
    ul.append(li);
});

<div class="container text-uppercase">
    <p class="text curley">Hello</p>
    <div class="group">
      <p class="text web">Hello</p>
      <p class="text dev">Hello</p>
    </div>
    <div class="hide-text"></div>
  </div>

.container {
     width: 100%;
     max-width: 600px;
     margin: 0 auto;
}

.text {
     --sw-1: drop-shadow(0 0 1px black);
     --sw-2: drop-shadow(0 0 2px red);
     font-family: "Orbitron", sans-serif;
     background: linear-gradient(darkred 30%, cyan, white, cyan, darkred 70%);
     -webkit-text-stroke: 3px cyan;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: 900;
     font-size: 4.1em;
     text-align: center;
     text-transform: uppercase;
     filter: var(--sw-1) var(--sw-1) var(--sw-2) var(--sw-2);
     opacity: 0;
     margin: 0;
}

.group {
     display: flex;
     gap: 10px;
     justify-content: center;
}

.curley {
     animation: bg-shift 1s infinite linear alternate, 
                scale 750ms ease-in forwards 3.5s, 
                jump 500ms ease-out forwards 5.7s, 
                blur-in 300ms linear 3.5s,
                zoom 4s ease-in-out 6.25s, 
                flip 500ms linear forwards 8s;
}

.web {
     animation: bg-shift 1s infinite linear alternate, 
                scale-angle1 3s ease-in-out forwards 2s, 
                blur-in 500ms linear 2s, 
                rotate-up1 250ms ease-out forwards 5.7s,
                zoom 1.5s ease-in-out 6.25s, 
                flip 500ms linear forwards 8.5s;
}

.dev {
     animation: bg-shift 1s infinite linear alternate, 
                scale-angle2 3s ease-in-out forwards 2s, 
                blur-in 500ms linear 2s, 
                rotate-up2 250ms ease-out forwards 5.7s,
                zoom 1.5s ease-in-out 6.25s, 
                flip 500ms linear forwards 8.5s;
}

/*  Код анимаций без изменений */

Почему не работает for внутри append?

const getSetOfElements = () => {
     let arr = [];

     for (let i = 1; i <= 6; i++) {
          arr.push(`<div class="test">${i}</div>`);
     }

     return arr;
}

const setOfElements = getSetOfElements();

$('.second').append(`<p>hello</p> ${setOfElements.join("")}`);

const setOfElements = [...Array(6)].map((_, i) => (`<div class="test">${i + 1}</div>`)).join("");

$('.second').append(`<p>hello</p> ${setOfElements}`);

.ava:hover ~ #profiles_show .block {
   display:block;
}

slider("#target-element-id-1");
slider("#target-element-id-2");

document.querySelectorAll(".element").forEach(n => slider(n));

const targetElement = document.querySelector(".player-selector");

const observer = new MutationObserver((mutations) => {
     mutations.forEach(({ target: t }) => {
          t.classList.contains("is-finished") ?
               alert("element contains class") :
               alert("element does not contain a class");
     })
});

observer.observe(targetElement, {
     attributes: true,
     attributeFilter: ['class']
});

.programs__name {
   min-width: 0;
}

.programs__name p {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}

- console.log(e.target.parentElement.classList.contains["valide"]);
+ console.log(e.target.parentElement.classList.contains("valide"));

- if (e.target.parentElement.classList.contains["valide"]);
+ if (e.target.parentElement.classList.contains("valide"));

.flex {
   --gap: 20px;
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
}

.item {
   width: calc(50% - var(--gap) / 2);
   height: 100px;
   background-color: red;
}

const accordions = document.querySelectorAll('.accordion');
const accordionsButtons = document.querySelectorAll(".accordion__tittle")
const accordionsDataboxes =  document.querySelectorAll(".accordion__content");

accordions.forEach(n => {
     const currentButton = n.querySelector(".accordion__tittle");
     const currentDatabox = n.querySelector(".accordion__content");

     const toggleActiveElements = () => {
          accordionsButtons.forEach(v => {
               if (v !== currentButton) {
                    v.classList.remove("open");
               }
          });

          accordionsDataboxes.forEach(v => {
               if (v !== currentDatabox) {
                    v.classList.remove("open");
                    v.style.setProperty("--height", "0px");
               }
          });

          currentButton.classList.toggle("open");
          currentDatabox.classList.toggle("open");

          currentDatabox.classList.contains("open")
               ? currentDatabox.style.setProperty("--height", `${currentDatabox.scrollHeight}px`)
               : currentDatabox.style.setProperty("--height", "0px");
     };

     currentButton.addEventListener("click", toggleActiveElements);
});

.accordion__content.open {
    max-height: var(--height, 0);
  }

const slider = $(".slider").slick({
     centerMode: true,
     slidesToShow: 4
});

const breakpoint = window.matchMedia("(max-width: 992px)");

const breakpointChecker = () => {
   if (breakpoint.matches) {
      slider.slick('init');
   } else {
      slider.slick('destroy');
   }
};

breakpoint.addEventListener("change", breakpointChecker);
breakpointChecker();

<button class="trigger" data-text="Hello">Скопировать</button>

const button = document.querySelector(".trigger");
const dataText = button.dataset.text.trim();

button.addEventListener('click', e => {

  if(!dataText.length) return;
  
  navigator.clipboard.writeText(dataText)
    .then(() => console.log("Done!"))
    .catch(err => console.error(err))
})