Владислав Линник

Примерно так. А там уже дальше может подогнать надо Вам будет. Добавить проверку на 0 и тд.

inputSumm.addEventListener('change', updateSumm)
selectValue.addEventListener('change', updateSumm)

function updateSumm() {
  text.textContent = (Number(inputSumm.value) * 1.5) / Number(selectValue.value)
}

P.s. inputSumm, selectValue и text - это элементы по их id.

Вам будет полезно ознакомиться со статьями:
https://learn.javascript.ru/introduction-browser-events
https://learn.javascript.ru/events-change-input

У вас шапка не помещается, разве не видите?
Переделывайте ее раскладу по другому на маленьких экранах.

https://jsfiddle.net/jo28yc35/1/
"Австралийский флекс"

let date1 = new Date('2020-05-08 12:51').getTime();
let date2 = new Date('2020-05-08 12:52').getTime();

/* переводим timestamp в минуты */
date1 = Math.floor((date1 / 1000 / 60));
date2 = Math.floor((date2 / 1000 / 60));

/* сравниванием минуты */
if (date1 === date2) {
    console.log('время в минутах совпадает');
} else {
    console.log('время в минутах НЕ совпадает');
}

/* или через тернарный оператор:
    (date1 === date2) ? 'время в минутах совпадает' : 'время в минутах НЕ совпадает';
*/

date1 = (date1 - (date1%60000))
date2 = (date2 - (date2%60000))
date1 === date2

Весь блок (например, section) имеет фон в 3 слоя (слой не путать с блоком)
1 слой покрываете линейным градиентом (linear-gradient)
2 слой покрываете радиальным градиентом (radial-gradient) с бирюзовым цветом (отблески)
3 слой наносите текстуру в виде шестиугольника

Блок по левой стороне
Делаете цельным вектором, обязательно с группировкой. - в дальнейшем будет удобно менять статус кнопки

Центральный блок
Делаете так же векторные элементы для кубиков.
Текст можно позиционировать отдельными блоками.
Рамки для полей ввода можно сделать только боковые (по левой и правой стороне), верх\низ соответственно будет border

Блок по правой стороне
Это отдельный aside блок с вкладками, а для фона делаете 2 слоя с линейным градиентом:
- Первый слой фона для верхней линии (разделяющую кнопки вкладок)
- Второй слой фона по левой стороне блока
Кнопки вкладок делаете с псевдоэлементами, красите с прозрачностью в зависимости от статуса "активная\неактивная" и сдвигаете друг на друга внешним отступом (отрицательный margin)

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

function addNewPlayer() {
  if (players.includes(inputAdd.value)) {
    return;
  }

  players.push(inputAdd.value);
  inputAdd.value = '';
  renderNewPlayer();
}

function renderNewPlayer() {
  playersList.insertAdjacentHTML('beforeEnd', `<li>${players[players.length - 1]}</li>`);
}

Я бы задал картинку как before:: блоку списка. Адаптив это уже дело тонкое. Убирать лишнее по мере уменьшения, а на мобилках пирамиду скрыть.

function render() {
    res.innerHTML = ''; /// добавь эту строку
    for (let i = 0; i < list.length; i++) {
      res.innerHTML += list[i] + '<br/>';
    }
}

https://jsfiddle.net/nfyerLpq/

Так? https://codepen.io/delphinpro/pen/WLarwX?editors=1100

Smart-grid.
Отличная поддержка и невероятно удобное использование.
Минус: нет документации, нужно самому разбираться, но оно того стоит. Автор проводит платные курсы, потому и нет документации.

$('.filter-block ul li').on('click', function(){
		var filterAttr = $(this).attr('data-work'); //берем атрибут у кнопки
	        $('.content-block ul li').css('display','none');
		$('.content-block ul li[data-work="' + filterAttr + '"]').css('display','block');
	});