FIain

А зачем хранить отфильтрованные пиццы? Какие-то проблемы с производительностью?
По текущему коду складывается ощущение, что ререндер будет происходить только при смене категории.
Можно спокойно написать categires.filter(...).map(...), вместо попыток построить звезду смерти.

функция addTask каждый раз создаёт новый ul
Нужно поместить const todolist = document.createElement("ul"); в условие, и после else обращаться по классу
document.querySelector(".todo-list").insertAdjacentHTML("beforeend", task);

let variants = [
  { condition: (tries === 0), alert: 'У вас закончились попытки' },
  { condition: (value == number), alert: 'Поздравляю, вы угадали', returnValue: true },
  { decreaseTries: true }
];
for(let i = 0; i < variants.length; ++i) {
  let v = variants[i];
  if(typeof v.condition === 'undefined' || v.condition) {
    if(v.alert) {
      alert(v.alert);
    }
    if(v.decreaseTries) {
      tries--;
      triesSpan.textContent = declOfNum(tries, ['попытка', 'попытки', 'попыток']);
      triesTitle.textContent = `У вас осталось ${tries} ${triesSpan.textContent}`;
    }
    return v.returnValue || false;
  }
}

Все варианты перечислять не стал, нужные добавляются по аналогии.

css transition не поддерживает анимацию градиентов.
На js это можно реализовать с помощью requestAnimationFrame

const lerp = (a, b, t) => a * (1 - t) + b * t;

// from: https://easings.net
const easeOutQuad = (x) => 1 - (1 - x) * (1 - x);

function tween(from, to, duration, onUpdate, easeFn) {
  let rafId = null;
  let begin;

  const loop = (now) => {
    begin ??= now;
    const progress = Math.min(1, (now - begin) / duration);
    const ease = easeFn ? easeFn(progress) : progress;
    const val = lerp(from, to, ease);

    onUpdate(val);

    if (progress === 1) {
      rafId = null;
      return;
    }

    rafId = requestAnimationFrame(loop);
  };

  rafId = requestAnimationFrame(loop);

  return () => rafId ?? cancelAnimationFrame(rafId);
}

const progressBar = document.querySelector(".progressbar");
const progressBarValue = document.querySelector(".progressbar__value");

const progressBarStartValue = 0;
const progressBarEndValue = 100;
const progressBarStep = 10;
const animationDuration = 1000;

let progressBarCurrentValue = progressBarStartValue;
let killTween = null;

function onUpdate(val) {
  progressBarValue.textContent = `${val.toFixed(1)}%`;
  progressBar.style.background = `conic-gradient(#FFF ${val * 3.6}deg, #262623 ${val * 3.6}deg)`;

  if (val === progressBarEndValue) {
    alert("you have completed all the tasks");
  }
}

document.body.addEventListener("click", (e) => {
  if (progressBarCurrentValue === progressBarEndValue) {
    alert("you have completed all the tasks");
  } else {
    const fromValue = progressBarCurrentValue;

    progressBarCurrentValue = Math.min(
      progressBarEndValue,
      progressBarCurrentValue + progressBarStep
    );

    killTween?.();
    killTween = tween(
      fromValue,
      progressBarCurrentValue,
      animationDuration,
      onUpdate,
      easeOutQuad
    );
  }
});

Во первых ты строку из промпта сравниваешь с числом, не хорошо
Во-вторых зачем функция если не вызываешь?)
В третьих если я правильно понял суть, то ты просто запутал код) Функция должна в цикле на каждой итерации спрашивать у юзера - prompt и сравнивать. return должен быть в каждом месте выхода из функции, иначе будут ситуации что функция ничего не вернет

function getUserInfo() {
 	let tries = 10;
 	for (let index = 0; index < 10; index++) {
 		let input = Number.parseInt(prompt("Сколько вам лет? ( Пример - 16 )"));
 		let input2 = prompt("Укажите ваш пол ( Пример - Male / Female )");
 		if ((input <= 0) && (input2 != "Male" || "Female")) {
 			alert("Данные введены некорректно, " + "у вас осталось " + tries + " попыток");
 			tries--;
 		} else if (tries === 0) {
 			return "Попытки закончились, вы временно заблокированны.";
 		} else {
 			return `Добро пожаловать, вам ${input} и вы ${input2}`;
 		}
 	}
 };
alert(getUserInfo());