Александр

Надо отслеживать изменения в input'е.

- let val = document.querySelector('#changer').value;
+ let val = document.querySelector('#changer');

let el = document.createElement('h3');
let cont = document.querySelector('#box');
t.addEventListener('input', () => {
    el.textContent = t.value;
});
el.textContent = t.value;
cont.append(el);

Если Вы хотите сделать что-то похожее на SPA (Single Page Application), то для начала Вам надо научить сервер отдавать всегда index.html. Следующий шаг - History API, это пригодится для подмены URL и генерации Ваших ссылок. А для того чтобы загрузить необходимое содержимое необходимо будет проанализировать location.pathname и отобразить необходимую информацию (как будто Вы нажали на элемент меню).
Второй вариант попроще - использовать location.hash для хранения уникального URL, загружать будете также как в первом варианте.

useEffect(() => {
    let intervalId = setInterval(async () => {
        const response = await fetch('http://127.0.0.1:8000/api/timecalculate', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            credentials: 'include',
        });
        const content = await response.json();
        const now = new Date();

        console.log(content + now);
    }, 10000)

    return () => {
        clearInterval(intervalId);
    };
}, []);

UPD: https://codesandbox.io/s/qna-q969499-m7b1n

window.requestAnimationFrame(draw.bind(null, ctx));

либо выносите контекст глобально либо в модуль.

document.querySelector('#test_id').value
или
document.querySelector('#test_id').selectedIndex
или
document.querySelector('#test_id').selectedOptions

input.value.trim().startsWith('value')

fetch('https://test-test.com/sub?channel=system:fb:advc')
  .then(response => {
    if (response.status >= 200 && response.status < 400) {
      return response.json();
    } else {
      return Promise.reject();
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

Во-первых, если подключаете скрипт не перед закрытием body, то поместите его туда.
Во-вторых, document.getElementsByClassName возвращает HTMLCollection - массив, который будет автоматически изменять свое содержимое при изменениях на странице. Поэтому, либо берете из него первый элемент, либо используете document.querySelector.

Также, неплохо было бы проверять элементы, прежде чем добавлять им события; вместо onevent использовать element.addEventListener('event', handler);; вместо == использовать ===; вместо style.backgroundColor использовать style.setProperty('background-color', value);.

case 'SN/PROFILE/ADD_POST': {
  let newPost = {
    id: 1,
    postMessage: action.post.postMessage,
    file: action.post.file,
  }
+ let previousPost = state.posts[state.posts.length - 1] || null;
+ if (previousPost !== null) {
+   newPost.id = previousPost.id + 1;
+ }
  return {
    ...state,
    posts: [...state.posts, newPost],
  }
}

Всё работает.

https://codesandbox.io/s/qna-q963407-lgkp1

Поддержка синтаксиса тут (включите Show obsolete platforms). Babel.

let headerMain = document.getElementById('header__main');
let headerLogo = document.getElementById('header__logo-img');
let headerMenu = document.getElementById('header__menu');

function applySmallHeader() {
    headerMain.style.height = '80px';
    headerLogo.style.height = '140px';
    headerMenu.style.paddingTop = '0px';
}

function applyNormalHeader() {
    headerMain.style.height = '136px';
    headerLogo.style.height = '170px';
    headerMenu.style.paddingTop = '7px';
}

function onPageScroll() {
    if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        applySmallHeader();
    } else {
        applyNormalHeader();
    }
}

window.addEventListener('scroll', function () {
    if (window.innerWidth > 992) {
        onPageScroll();
    }
});

window.addEventListener('resize', function () {
    if (window.innerWidth <= 992) {
        applyNormalHeader();
    } else {
        onPageScroll();
    }
});

avatar: {
  '&:hover': {
    '& $changePhoto': {
      display: 'block',
    },
  },
},
changePhoto: {},

function validatePIN(pin) {
  const preparedPin = pin.replace(/\D/g, '');
  
  return preparedPin === pin && (pin.length === 4 || pin.length === 6);
}

https://www.npmjs.com/package/papaparse

Вопрос 1. Вы использовали querySelectorAll, а надо было querySelector.
Вопрос 2. Вы можете заранее получить элемент и добавить на него прослушку события.

let switchItem = document.querySelector('.switch-item');

switchItem.addEventListener('click', event => {
	event.preventDefault();
  switchItem.classList.toggle('on');
});

Вопрос 3. Имеется ввиду одно действие не в том смысле, что это одна инструкция. Имеется ввиду, что если функция должна переключить класс у элемента, то это она и должна делать, а не такое поведение, что она начинает вызывать другие функции, которые приведут к тому, чего разработчик не будет ожидать.