Počítání pro mou dcerku (JS)

Html se moc nevěnuji, mám základy. Css je pro mne naprosto mimo, nemám cit na "hezký" (Je mi jedno jak to vypadá, hlavně že to funguje)

// script.js
const generateBtn = document.getElementById("generate-btn");
const submitBtn = document.getElementById("submit-btn");
const countInput = document.getElementById("example-count");
const message = document.getElementById("message");
const examplesContainer = document.getElementById("examples-container");

let currentExamples = [];
let round = 0;

function generateExamples(count) {
  const operators = ["+", "-", "*", ":"];
  const examples = [];

  for (let i = 0; i < count; i++) {
    let x = Math.floor(Math.random() * 101);
    let y = Math.floor(Math.random() * 101);
    let op = operators[Math.floor(Math.random() * operators.length)];

    if (op === "+") {
      while (x + y > 100) y = Math.floor(Math.random() * 101);
    } else if (op === "-") {
      while (y > x) y = Math.floor(Math.random() * 101);
    } else if (op === "*") {
      while (x > 10) x = Math.floor(Math.random() * 101);
      while (y > 10) y = Math.floor(Math.random() * 101);
    } else if (op === ":") {
      while (x > 10 || x === 0) x = Math.floor(Math.random() * 101);
      while (y > 10 || y === 0) y = Math.floor(Math.random() * 101);
      x *= y;
    }

    examples.push(`${x} ${op} ${y}`);
  }
  return examples;
}

function renderExamples() {
  examplesContainer.innerHTML = "";

  const half = Math.ceil(currentExamples.length / 2);
  const leftColumn = currentExamples.slice(0, half);
  const rightColumn = currentExamples.slice(half);

  const columnsWrapper = document.createElement("div");
  columnsWrapper.classList.add("columns-wrapper");

  const createColumn = (examples) => {
    const column = document.createElement("div");
    column.classList.add("column");

    examples.forEach((example) => {
      const wrapper = document.createElement("div");
      wrapper.classList.add("example-wrapper");

      const label = document.createElement("label");
      label.textContent = `${example} =`;

      const input = document.createElement("input");
      input.type = "text";
      input.classList.add("answer-input");

      wrapper.appendChild(label);
      wrapper.appendChild(input);
      column.appendChild(wrapper);
    });

    return column;
  };

  columnsWrapper.appendChild(createColumn(leftColumn));
  columnsWrapper.appendChild(createColumn(rightColumn));

  examplesContainer.appendChild(columnsWrapper);
}

generateBtn.addEventListener("click", () => {
  const count = parseInt(countInput.value);
  if (!count || count < 1) return;
  currentExamples = generateExamples(count);
  renderExamples();
  submitBtn.disabled = false;
  generateBtn.disabled = true;
  message.textContent = getRandomNote(count);
});

submitBtn.addEventListener("click", () => {
  const inputs = document.querySelectorAll(".answer-input");
  let errors = 0;
  let retry = [];
  const results = [["Příklad", "Odpověď", "Správně"]];

  inputs.forEach((input, i) => {
    const val = input.value.trim();
    const expected = eval(currentExamples[i].replace(":", "/"));
    const correct = parseFloat(val) === expected;

    input.style.backgroundColor = correct ? "lightgreen" : "lightcoral";
    results.push([currentExamples[i], val, correct ? "ANO" : "NE"]);
    if (!correct) retry.push(currentExamples[i]);
  });

  // CSV uložení výsledků
  const csvContent = results.map(e => e.join(",")).join("\n");
  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
  const url = URL.createObjectURL(blob);

  const downloadLink = document.createElement("a");
  downloadLink.href = url;
  downloadLink.download = `vysledky_kolo${round + 1}.csv`;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(url);

  round++;
  if (retry.length === 0) {
    message.textContent = round === 1 ? "Vše správně napoprvé! Super!" : `Hotovo! Ale až po ${round} kolech.`;
    submitBtn.disabled = true;
    generateBtn.disabled = false;
  } else {
    currentExamples = retry;
    setTimeout(() => {
      renderExamples();
      message.textContent = `Opravit ${retry.length} chyb.`;
    }, 1000);
  }
});

function getRandomNote(count) {
  const notes = [
    `Tak tady máš nášup ${count} příkladů.`,
    `Tipuju, že z těchto ${count} příkladů uděláš pět chyb.`,
    `Zvládneš ${count} levou zadní!`,
    `Snad nekňouráš, ${count} není tak moc.`,
    `Když tohle dáš, jsi génius!`
  ];
  return notes[Math.floor(Math.random() * notes.length)];
}