4minuta 22sekunda - trzeba było wyjaśnić, że nazwa zmiennej span wzięłaś się dlatego, że zdarzenie odnosi się do elementów html <span> w kodzie timer-a, choć może być dowolna zapisana nazwa tej zmiennej (dobrze jakby była zgodna z tzw. Konwencją nazewniczą)
7minuta 11sekunda - użycie return, to nie jest jak powiedziałeś "wrócenie do początku" (pomijam fakt, że nie sprecyzowałeś do jakiego początku, czego początku, dla początkujących może to nie być oczywiste, wręcz niezrozumiałe), tylko natychmiastowe opuszczenie funkcji, bo w przypadku użycia klawisza Delete lub Backspace dalsze wykonywanie kodu w funkcji jest bezcelowe, ponieważ przypisujemy początkową wartość do elementu, w tym przypadku "00".
7minuta 34sekunda - "taki zapis", powinieneś doprecyzować, że chodzi o regułę RegExp (Regular expressions)
12minuta 44sekunda - IMO, ta pomyłka w opisie działania funkcji slice() z podaną negatywną wartością powinna zostać poddana edycji, co skutkować będzie ponownym wgraniem materiału kursu na YT po jego poprawieniu.
if (/^\d$/.test(e.key)) { // tylko cyfry
const currentValue = span.textContent,
inputValue = e.key;
let newValue = parseInt(currentValue + inputValue);
if (newValue > 99) newValue = newValue.toString().slice(-2);
if (newValue > 59) newValue = inputValue;
span.textContent = ('00' + newValue).slice(-2);
}
span.textContent - zwraca wartość w postaci tekstu
currentValue + inputValue - łączymy wartość tekstową z wartością znaku klawisza (konkatenacja - concatenate)
ten zapis sprawdza czy wartość jest 3 znakowa, jeżeli tak to zamienia wartość liczbową na string i przypisuje 2 ostanie znaki slice(-2) z liczby (ponieważ ciąg znaków w js-ie jest traktowany jak array i każdy znak ma swój indeks, to możemy używać funkcji do operowania na tablicach - w tym przypadku użycie: slice().
if (newValue > 99) newValue = newValue.toString().slice(-2);
można zapisać
let newValue = currentValue + inputValue;
if (newValue.length > 2) newValue = newValue.slice(-2);
if (parseInt(newValue) > 59) newValue = inputValue;
Sprawdź
const a = 992;
console.log(a.toString().slice(-2));
console.log(a.toString().substring(a.toString().length - 2));
const b = "123";
console.log(b.slice(-2));
console.log(b.substring(b.length - 2));
span.textContent = ('00' + newValue).slice(-2);
można zapisać
span.textContent = newValue.toString().padStart(2, '0'); // jeżeli newValue jest po praseInt
span.textContent = newValue.padStart(2, '0');
4minuta 36sekunda - robisz kurs w języku polskim, więc dobrze by było to przetłumaczyć i pokazać planszę w polskim języku, lub w obu językach, żeby zachować oryginalną treść (wiadomo, nie da się przetłumaczyć z obcego języka dosłownie)
15minuta 08sekunda - ponieważ wcześniej w kodzie wykonaliśmy parseInt
let newValue = parseInt(currentValue + inputValue);
dostępne wartości newValue po wykonaniu się
if (newValue > 99) newValue = newValue.toString().slice(-2);
if (newValue > 59) newValue = inputValue;
to: 1 nie 01, 2 nie 02, ..., 9 nie 09, 10, 11, ... 59.
po wykonaniu (konkatenacja - concatenate)
('00' + newValue)
mamy: 001 dla 1, ... 009 dla 9, 010 dla 10, ..., 059 dla 59 i po slice(-2)
('00' + newValue).slice(-2)
mamy: 01, ..., 09, 10, ..., 59.
16minuta 33sekunda - to nie jest zdarzenie dla przytrzymanego klawisza, tylko sam fakt wciśnięcia klawisza, wtedy kiedy programiście jest obojętne czy keydown, czy keyup. Keypress - używanie w kodzie jest już nie zalecane.
BTW, klawisz przytrzymany
document.addEventListener('keydown', function(e) {
// Sprawdź, czy klawisz jest wciśnięty i także czy przytrzymywany
if (e.repeat)
console.log('Klawisz przytrzymany!', e.key);
else
console.log(e.key)
});
17minuta 24sekunda - właśnie odwrotnie, blokujemy domyślną akcję dla zdarzenia "keyup" na elemencie html, w tym przypadku <span> z ustawionym atrybutem contenteditable="true", bo kod funkcji (formatNumbers) przypisanej do zdarzenia "keyup" opisuje nowe zachowanie się (nową, inną akcję) w odpowiedzi na zdarzenie.
e.preventDefault();
