Smirator

Object.fromEntries(new FormData(document.querySelector('form')).entries());

что делаю не так?

Всё делаете не так.

Зачем переключаете класс active на кнопке? Его у элемента с классом d-n переключать надо - вместо той ерунды с изменением стилей напрямую. Кстати, а кому вы пытаетесь назначить style.display = 'table-cell'? Если идти от кнопки parent-parent-next (вместо того, чтобы несколько раз дёргать parentNode, следует использовать метод closest) - это будет (не будет, погуглите, в чём разница между nextSibling и nextElementSibling) строка, а не ячейка - так что перенесите-ка класс d-n на один уровень выше. Зачем создавать каждой кнопке индивидуальный обработчик? Достаточно одного на всех, создавайте его вне цикла. Наконец, у classList.toggle есть второй параметр, не надо им пренебрегать.

Исправляем:

document.querySelectorAll('.panel').forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const panel = this.closest('tr').nextElementSibling;
  const isActive = !panel.classList.contains('active');
  panel.classList.toggle('active', isActive);
  this.classList.toggle('changing-icon', isActive);
}

task__date-text

svg + css + html
1. ::first-letter
2. https://codepen.io/phpcodertech/pen/ZEQYBgQ
3. ::afer
4. https://css-tricks.com/snippets/svg/curved-text-al...
5. ::after, ::before и иже с ними

Вообще, вариантов реализации каждого вопроса более 1. Рекомендую как всегда курить спецификации - mdn хотя бы. Ответы взял не из головы, а из гугла - если там не забанили, можно посмотреть)

document.getElementsByClassName('calculator-block-btn')[0].addEventListener('click', calculateThis);

function calculateThis() {
  let inputs = document.querySelectorAll('.calculator-value');
  let height = Number(document.getElementById('height').value);
  let heightValue = Number(height);

  let width = Number(document.getElementById('width').value);
  let widthValue = Number(width);

  let length = Number(document.getElementById('length').value);
  let lengthValue = Number(length);

  let amount = (document.getElementById('amount').value);
  let amountValue = Number(amount);

  let wordsResult = '  шт. бруса';
  let wordsSurfaceArea = ' общая площадь, шт';


  inputs.forEach((el) => {
    if (!el.value) el.classList.add('empty');
    else {
      el.classList.remove('empty');
    }
  })

  function payment() {
    return (1 / ((widthValue * heightValue * lengthValue) / 1000000000)) * amountValue;
  }

  function surfaceArea() {
    return ((heightValue * widthValue * 2) + (heightValue * lengthValue * 2) + (widthValue * lengthValue * 2)) / 1000000;
  }

  document.getElementById('result').innerHTML = (payment()).toFixed(3) + wordsResult;
  document.getElementById('surface-area').innerHTML = (surfaceArea()).toFixed(1) + wordsSurfaceArea;

}

А для того, чтобы не выводилось Nan и 0 можете указать начальное значение или выйти из функции calculateThis проверив имеется ли у кого-то класс empty

Быстро:

if (!height || !width || !length || !amount) {
      alert('Вы не ввели значения!');
      return false;
    } else {

А еще можно событие вешать не на клик кнопки, а на отправку формы, тогда и required будет работать