Максим

Как стилизовать input type=range?
В input типа range, при изменении поля обрезается ползунок, как это исправить?
Как сделать такой progress bar?

Антон,
В вашем случае когда вы пишете:

// Возвращается dom node - прям этот элемент из DOM
document.querySelector('Ваш элемент') 
// Вы прям на эту ноду вешаете событие
document.querySelector('Ваш элемент').addEventListener('click',f())

Когда же вы пишите:

// Возвращается "Масив" элементов - тип масив
document.querySelectorAll('Ваш элемент')
// У массива нет метода addEventListener - ошибка
document.querySelectorAll('Ваш элемент').addEventListener('click',f())

Решается перебором масива:

document.querySelectorAll('Ваш элемент').forEach(item=>{
// Item - каждый элемент в массиве и он же является node елементом из DOM 
item.addEventListener('click',f())
})

Решается с помощью :placeholder-shown

Псевдоэлемент и трансформ

1KirillIvanov, А ну если у вас такой css, То решается в пару строк js
Именно когда на элементе есть

let allElem = document.querySelectorAll('[class$="light"]')//Ищем все элементы у которых в конце есть приставка light
allElem.forEach(item=>{
item.className = item.className.replace(/light/g, "dark");
});

Надеюсь понятно что на этом классе не должно быть ещё классов которые не относяться к изменению темы
просто light and dark
Их тоже перетрёт

По умолчанию INPUT имеет свойство

input {
  display: inline-block;
}

Будьте внимательнее.

Flex вам в помощь. Отлично расписано что и как делается вот тут
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Вот reduce:

const { x: countX = 0, o: countO = 0 } = Array
  .from(str.toLowerCase())
  .reduce((acc, n) => (acc[n] = (acc[n] ?? 0) + 1, acc), {});

А вот ещё короче без reduce'а:

const [ countX, countO ] = [ /x/i, /o/i ].map(n => ~-str.split(n).length);

function animateMarquee(el, duration) {
  const innerEl = el.querySelector('.marquee__inner');
  const innerWidth = innerEl.offsetWidth;
  const cloneEl = innerEl.cloneNode(true);
  el.appendChild(cloneEl);

  let start = 0;
  let rafId = null;
  let progressElapsed = 0;
  let progress = 0;

  function step(now) {
    progress = progressElapsed + (now - start) % duration / duration;
    const translateX = innerWidth * progress;

    innerEl.style.transform = `translate3d(-${translateX}px, 0 , 0)`;
    cloneEl.style.transform = `translate3d(-${translateX}px, 0 , 0)`;
    rafId = requestAnimationFrame(step);
  }
  
  function play() {
    if (rafId) return;
    progressElapsed = progress;
    start = performance.now();
    rafId = requestAnimationFrame(step);
  }
  
  function pause() {
    cancelAnimationFrame(rafId);
    rafId = null;
  }

  play();
  return { play, pause };
}

const marquee1 = document.querySelector('#marquee1');
const playback = animateMarquee(marquee1, 15000);

marquee1.addEventListener('mouseenter', () => playback.pause());
marquee1.addEventListener('mouseleave', () => playback.play());

Анимацию атрибутов внутри SVG можно реализовывать отдельным тегом Animate

Пример анимации цвета

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   viewBox="10 10 24 24">
    <defs>
        <linearGradient id="linear-gradient" x1="0" y1="0" x2="100%" y2="0" >
            <stop offset="0" stop-color="red">
               <animate attributeName="stop-color" values="yellow;red" dur="2s" repeatCount="indefinite"  /> 
            </stop>
            <stop offset="1" stop-color="yellow">
                <animate attributeName="stop-color" values="red;yellow" dur="2s" repeatCount="indefinite"  /> 
            </stop>
        </linearGradient>
    </defs>
<path fill="url(#linear-gradient)" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>

Пример анимации офсета

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   viewBox="10 10 24 24">
    <defs>
        <linearGradient id="linear-gradient" x1="-100%" y1="0" x2="200%" y2="0" >
            <stop offset="0" stop-color="red">
               <animate attributeName="offset" values="0;0.2;0.5" dur="2s" repeatCount="indefinite"  /> 
            </stop>
            <stop offset="0.5" stop-color="yellow">
                <animate attributeName="offset" values="0.5;0.7;0.8;1" dur="2s" repeatCount="indefinite"  /> 
            </stop>
        </linearGradient>
    </defs>
<path fill="url(#linear-gradient)" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>

Дизайнер это дизайнер. Чистый визуал, часто даже не понимающий как это будет сверстано.
Верстальщик - ну, сказать что это профессия как то даже не совсем верно. Хотя есть виртуозы, выигрывающие за счет глубокого погружения в тему, знания нюансов и скорости работы. Иногда это нужно именно в таком виде, ну и спрос на таких монстров есть.
Фронтендер - больше комбайн из верстальщика и ЖСера. Обычно требуется знание 1-2 серьезных фреймворков/библиотек, а ля вуе, реакт, ангулар... Ну и вебпак сасс лесс до кучи.

Так что нет, это разные специализации.

Отслеживаешь событие скролла и допустим если проскроллил больше 500 добавляешь класс block

(window.pageYOffset > 500){
      navigation.classList.add('block')

для того чтобы отслеживать на какой ты секций находишься есть тык

В общем проблема была из-за использования padding'ов вместо width и height. С ними всё как надо:

Как вам кнопочка?)