Mizutsune

document.addEventListener("click", ({ target }) => {
    if (target.classList.contains("lk-addapp-ajax-block")) {
      const value = target.querySelector("input").value;
      alert(value);
    }
  });

.lk-addapp-ajax-block  * {
        pointer-events: none;
}

button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-panel_button.sending .svg{
    animation: fly-out-in var(--animation-duration) ease-in-out;
}

addTodoButton.addEventListener("click", () => {
     addTodoButton.classList.add("sending");
     addTodoButton.addEventListener("animationend", e => {
               addTodoButton.classList.remove("sending");
               addItem();
          }, { once: true }
     );
});

let shop_id = 82;
data[`SHOPID_${shop_id}`].name_shop;

const instance = tippy(".target");
const breakpoint = window.matchMedia("(max-width: 1200px)");

const breakpointChecker = () => {
     if (breakpoint.matches) {
              instance[0].setProps({
               placement: "bottom-end"
          });

     } else {
          instance[0].setProps({
               placement: "left-start"
          });
     }
};

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

// коллекция тултипов
const triggers = document.querySelectorAll(".item__right, .item__prc");

triggers.forEach(element => {
     const instance = tippy(element, {
          // ваши настройки
     });

     // ширина экрана при достижении которой нужно изменить настройки
     const breakpoint = window.matchMedia("(max-width: 1200px)");

     const togglePlacement = status => {
          // селекторы классов используемых тултипов
          const triggerOne = "item__right";
          const triggerTwo = "item__prc";

          const { reference: target } = instance;

          const isTargetElement = v => Boolean(target.classList.contains(v));

          switch (status) {
               case "update":
                    if (isTargetElement(triggerOne)) {
                         instance.setProps({
                              placement: "bottom-end"
                         });
                    } else if (isTargetElement(triggerTwo)) {
                         instance.setProps({
                              placement: "left-start"
                         });
                    }
                    break;
               case "default":
                    if (isTargetElement(triggerOne)) {
                         instance.setProps({
                              placement: "left-start"
                         });
                    } else if (isTargetElement(triggerTwo)) {
                         instance.setProps({
                              placement: "bottom-end"
                         });
                    }
          }
     };

     const breakpointChecker = () => {
          if (breakpoint.matches) {
               return togglePlacement("update");
          } else {
               return togglePlacement("default");
          }
     };

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

const targetElement = document.querySelector(".target");
const breakpoint = window.matchMedia("(max-width: 700px)");

const breakpointChecker = () => {
     if (breakpoint.matches) {
          targetElement.textContent = "Apple";
     } else {
          targetElement.textContent = "Orange";
     }
};

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

const parentContainer = document.querySelector(".inputs");

parentContainer.addEventListener("keypress", event => {
   if (event.target.tagName !== "INPUT") return;
   if (event.key !== "Enter") return;

   console.log(event.target.id);
});

.header {
   background: linear-gradient(180deg, #0d606f 0%, rgba(13, 96, 111, 0) 25.1%), 
               url("ссылка_на_изображение.jpg") 0 0/100% 100% no-repeat;
}

const elements = document.querySelectorAll(".value-item");
const stateClasses = ["value-active", "basic__shadow"];

document.addEventListener("click", ({ target }) => {
   if (!target.classList.contains("value-item")) return;
   elements.forEach(v => v.classList.remove(...stateClasses));
   target.classList.add(...stateClasses);
});

const stateClasses = ["value-active", "basic__shadow"];

document.addEventListener("click", ({ target }) => {
   if (!target.classList.contains("value-item")) return;
   const activeItem = document.querySelector(".value-active");
   activeItem && activeItem.classList.remove(...stateClasses);
   target.classList.add(...stateClasses);
});

const elements = document.querySelectorAll(".value-item");
const stateClasses = ["value-active", "basic__shadow"];

const toggleActiveElement = element => {
   element.addEventListener("click", () => {
      elements.forEach(n => n.classList.remove(...stateClasses));
      element.classList.add(...stateClasses);
   });
};

elements.forEach(v => toggleActiveElement(v));

const elements = document.querySelectorAll(".value-item");
const stateClasses = ["value-active", "basic__shadow"];

const toggleActiveElement = element => {
   element.addEventListener("click", () => {
      document.querySelector(".value-active")?.classList.remove(...stateClasses);
      element.classList.add(...stateClasses);
   });
};

elements.forEach(v => toggleActiveElement(v));

const truncateString = (s, w) => s.length > w ? s.slice(0, w) + "..." : s;

const truncateString = (s, w) => s.length > w ? s.substring(0, w) + "..." : s;

const truncateString = (s, w) => s.length > w ? s.slice(0, w).trim() + "..." : s;

const truncateString = (s, w) => s.length > w ? s.substring(0, w).trim() + "..." : s;

const truncateStringByLimitChars = ({ target, limit, pattern, useREGEx = true }) => {
  const ignoredChars = new RegExp(`[${pattern}]+$`, "g");

  const truncateString = () => {
    return useREGEx === false
      ? target.substring(0, limit).trim() + "..."
      : target.substring(0, limit).replace(ignoredChars, "").trim() + "...";
  };

  return target.length >= limit ? truncateString() : target;
};

console.log(
  truncateStringByLimitChars({
    target: "1234_______",
    limit: 8,
    pattern: [",", ".", "_"]
  })
);

let string = "Hello__World",

console.log(string.length > 7 ? string.slice(0, 7).trim() + "..." : string)

Hello-World.loooooooong.image.name.sss.123456789.jpg

BackgroundImage_for__container.with.blog-news.cards.jpg

<div>Файл "BackgroundImageForContainerWithBlogNewsCards.jpg" успешно загружен</div>

const truncateString = configuration => {
     const {
        targetString: target,
        limitWords: limit,
        pattern = [",", ".", "_"],
        useREGEx = true,
        suffix = "...",
        addFileExtension = false
    } = configuration;

     const ignoredChars = new RegExp(`[${pattern}]+$`, "g");

     const reduceContentByLimitCharset = () => {
          return useREGEx === false ?
             target.substring(0, limit).trim() :
             target.substring(0, limit).replace(ignoredChars, "").trim();
     };

     const updatedContent = () => {
          const croppedString = reduceContentByLimitCharset();
          const fileExtension = target.slice(target.lastIndexOf(".") + 1);

          return addFileExtension === false ?
             `${croppedString}${suffix}` :
             `${croppedString}${suffix} .${fileExtension}`;
     };

     return target.length >= limit ? updatedContent() : target;
};

console.log(
     truncateString({
          targetString: "BackgroundImageForContainerWithBlogNewsCards.jpg",
          limitWords: 15,
          addFileExtension: true
     })
);

Как поменять цвет активного буллита

.swiper-pagination-bullets .swiper-pagination-bullet-active {
// стили для активного буллета
}

и как их все вместе немного сдвинуть вниз