Start und Stopp

Zeit für ein Projekt! In diesem Checkpoint baust du eine Stoppuhr: Sie misst die Zeit in Zehntelsekunden, hält an und läuft wieder weiter, springt zurück auf null und misst Runden. Wie bei den früheren Checkpoints sagen die Anweisungen, was die App tun soll, und wie du es schreibst, ist dir überlassen. Jede Übung macht dort weiter, wo die vorige aufgehört hat.

Die Seite. App.jsx enthält die Teile der Stoppuhr, die noch nichts tun: die Zeit 0.0 in einem Absatz mit der Klasse zeit und einen Button Start.

Die Aufgabe. Ein Klick auf Start startet die Stoppuhr: Die Zeit steigt alle zehntel Sekunden um 0.1 (0.0, 0.1, 0.2 … 12.3), und auf dem Button steht Stopp. Ein Klick auf Stopp hält die Zeit an, und auf dem Button steht wieder Start. Der nächste Start macht bei der Zeit weiter, bei der die Stoppuhr angehalten wurde.

Tipps:

• Halte die Zeit im State als ganze Zahl von Zehnteln: 123 bedeutet 12,3 Sekunden. Zeige sie mit (zehntel / 10).toFixed(1). toFixed(1) macht aus einer Zahl einen Text mit einer Stelle nach dem Dezimalpunkt: (123 / 10).toFixed(1) ist "12.3" und (10 / 10).toFixed(1) ist "1.0".
• Ob die Stoppuhr läuft, ist ein weiterer State, true oder false.
• Das Intervall gehört in einen Effekt, der davon abhängt, ob die Stoppuhr läuft. Wenn sie nicht läuft, tut der Effekt nichts und endet mit return. Wenn sie läuft, startet der Effekt ein Intervall von 100 Millisekunden und gibt die Aufräumfunktion zurück, die es stoppt. Ein Klick auf Stopp ändert den State, und React ruft die Aufräumfunktion auf, bevor es den Effekt erneut ausführt.