Procvičování událostí, lovení chyb

'use strict';

const inputElm = document.querySelector('#form-input');
const buttonElm = document.querySelector('#form-button');
const alertElm = document.querySelector('#form-alert');

buttonElm.addEventListener('click', (event) => {
  alertElm.textContent = `Uživatel ${inputElm.value} už existuje.`;

  // 2. úkol
  event.target.textContent = 'Zkusit znova';
});

'use strict';

const carElm = document.querySelector('#car');

document.addEventListener('keydown', (event) => {
  if (event.code === 'ArrowRight') {
    carElm.style.marginLeft = `40px`;
  }

  if (event.code === 'ArrowLeft') {
    carElm.style.marginLeft = `0`;
  }
});

/*
1. chyba: index.js:12 Uncaught TypeError: Cannot read property 'addEventListener' of null

1. řešení:
Na řádku 12 vidím, přidávám posluchač událostí na proměnnou 'btnUp'.
Z chyby jsem vyčetl, že je v proměnné 'btnUp' uložena hodnota null.
Jak se mi do proměnné 'btnUp' mohlo dostat null?

Je zřejmé, že na řádku 9, kde je proměnná deklarována a vyhledává se element pomocí querySelectoru. Prohlédnu si selektor, ve kterém je řetězec 'counter__up'.
Tuším, že 'counter__up' není název žádného HTML tagu a tak předpokládám,
že by selektor měl začínat buď na '.' nebo '#'. Zkontroluji si v index.html,
zda chci najít element podle třídy nebo podle id a následně opravím řádek 9
z:
const btnUp = document.querySelector('counter__up');
na:
const btnUp = document.querySelector('.counter__up');
*/

/*
2. chyba: index.js:19 Uncaught TypeError: Cannot read property 'addEventListener' of null

2. řešení:
Stejné jako předchozí chyba. Změním řádek 10
z:
const btnDown = document.querySelector('counter__down');
na:
const btnDown = document.querySelector('.counter__down');
*/

/*
3. chyba: index.js:5 Uncaught ReferenceError: numbr is not defined

3. řešení:
Chyba mi říká, že proměnná 'numbr' použitá na řádku 5 není definovaná.
Při prohlédnutí funkce odhaduji, že zde zřejmě měla být použita
proměnná 'number', které je parametrem této funkce.
Opravím řádek 5
z:
valueElm.value = String(numbr).padStart(2, '0');
na:
valueElm.value = String(number).padStart(2, '0');
*/

/*
4.chyba: index.js:5 Uncaught TypeError: Cannot set property 'value' of null

4. řešení:
Opět stejné jako chyba číslo 1.
Opravím řádek 4
z:
const valueElm = document.querySelector('counter__value');
na:
const valueElm = document.querySelector('.counter__value');
*/

// Nyní se mi již po přenačtení stránky v konzoli žádná chyba nezobrazuje
// Zkusím tedy, zda program již funguje.
// Po kliknutí na tlačítko 'up' se mi v konzoli objeví další chyba

/*
5. chyba: index.js:13 Uncaught ReferenceError: velue is not defined

5. řešení:
Zde se jedná pravděpodobně o překlep v názvu použité, proměnné 'velue'.
Předpokládám, že zde měla být použita proměnná 'value', které je deklarovaná na řádku 8.

Stejnou chybu vidím krom řádku 13 i na řádcích 14, 20 a 21,
proto ji rovnou opravím všude
*/

/*
6. chyba: index.js:15 Uncaught ReferenceError: updateCountr is not defined

6. řešení:
Chyba říká že proměnná 'updateCountr' není definovaná.

Zde se jedná o překlep a chci určitě použít funkci uloženou v proměnné 'updateCounter'.

Stejnou chybu vidím mimo řádku 15 i na řádku 22, změním kód na těchto řádcích na:
updateCounter(value);
*/

/*
Nyní již opět nevidím v konzoli žádné chyby, ale program stále nefunguje.
Po klikání na tlačítka se nemění hodnota.

7. chyba:
Když si prohlédnu, jak program vypadá a zkusím odhadnout, jak by se měl chovat.
Vzhledem k tomu, že na řádku 8 ukládám do proměnné 'value' hodnotu 0
a následně na řádku 26 se tuto hodnotu snažím pomocí funkce 'updateCounter(value)' nastavit,
tak vidím, že bych hned po spuštění měl na stránce vidět hodnotu '0',
ale mám zde stále hodnotu 15.

Mohu tedy předpokládat, že zřejmě správně nefunguje funkce 'updateCounter'.

Zkusím si tedy hned na začátek této funkce (na řádek 4) vložit:
console.log(number);
Tím si ověřím, zda se tato funkce vůbec zavolá a zároveň,
zda v proměnné 'number' bude mnou předpokládaná hodnota 0.

Toto se opravdu stalo a tudíž vím, že až sem funguje program správně.
Následně si v souboru index.html prohlédnu element s třídou 'counter__value',
zde zjistím, že se jedná o div element, který nemá žádný atribut 'value', který se snažím na řádku 6 (5) nastavit.
Opět si tedy ze řádku 4 smažu console.log(number); a následně změním řádek 5
z:
valueElm.value = String(number).padStart(2, '0');
na:
valueElm.textContent = String(number).padStart(2, '0');
*/

/*
Nyní již po spuštění programu vidím na stránce '00', ale stále nefunguje
zvyšování a snižování hodnoty pomocí tlačítek.

8. chyba:
Na řádku 14 vidím, že k proměnné 'value' přičítám 1, ale nikam tuto hodnotu neukládám.
Pokud chci k proměnné 'value' přičíst 1, tak změním kód na jednu z následujících možností:
value = value + 1;
value += 1;
value++;

Stejnou chybu vidím i na řádku 22, zde opravím na jednu z následujících možností:
value = value - 1;
value -= 1;
value--;

nyní již program funguje správně
*/

'use strict';

document.querySelector('button').addEventListener('click', () => {
  let time = Number(document.querySelector('.time-input').value);

  const myInteral = setInterval(() => {
    document.querySelector('.alarm__seconds').textContent = String(
      time,
    ).padStart(2, '0');
    if (time === 0) {
      document.querySelector('audio').play();
      document.querySelector('.alarm').classList.add('alarm--ring');
      clearInterval(myInteral);
    } else {
      time--;
    }
  }, 1000);
});

'use strict';

document.querySelector('button').addEventListener('click', (event) => {
  event.target.disabled = true;
  let time = Number(document.querySelector('.time-input').value) * 60;

  const myInteral = setInterval(() => {
    const seconds = time % 60;
    const minutes = (time - seconds) / 60;

    document.querySelector('.alarm__seconds').textContent = String(
      seconds,
    ).padStart(2, '0');
    document.querySelector('.alarm__minutes').textContent = String(
      minutes,
    ).padStart(2, '0');
    if (minutes === 0 && seconds === 0) {
      document.querySelector('audio').play();
      document.querySelector('.alarm').classList.add('alarm--ring');
      clearInterval(myInteral);
    } else {
      time--;
    }
  }, 1000);
});