Runden

Der letzte Teil: Runden. Läufer und Schwimmer messen jede Runde mit einem Klick, während die Stoppuhr weiterläuft. Deine Stoppuhr bekommt einen Button Runde.

Die Aufgabe. Ein Klick auf Runde speichert die Zeit, die die Stoppuhr in diesem Moment zeigt. Die Runden stehen unter den Buttons in einer Liste mit der Klasse runden, die neueste zuerst, jede als Runde 2: 7.4: die Nummer der Runde und ihre Zeit. Zurücksetzen leert die Liste. Und weil eine Runde nur sinnvoll ist, solange die Zeit läuft, ist Runde deaktiviert, solange die Stoppuhr angehalten ist.

Tipps:

• Halte die Runden im State als Array von Objekten wie { nummer: 2, zeit: 74 }, mit der Zeit in Zehnteln, so wie die Stoppuhr sie hat.
• Neueste zuerst heißt, dass die neue Runde an den Anfang des Arrays kommt: setRunden((runden) => [neueRunde, ...runden]).
• Die Nummer der neuen Runde ist um eins größer als die Zahl der bisherigen Runden. Jede Runde hat eine andere Nummer, also ist sie ein guter key.

Das ist das ganze Projekt. Deine Stoppuhr hält drei Werte im State: die Zeit, ob sie läuft, und die Runden. Ein Effekt startet das Intervall, solange die Stoppuhr läuft, und seine Aufräumfunktion stoppt es, ob Stopp oder Zurücksetzen den State geändert hat. In der nächsten Lektion, Refs und eigene Hooks, setzt du den Cursor in ein Textfeld, merkst dir Werte, die die Seite nicht zeigt, und schreibst eigene Hooks.