Vor einer Weile wurde mir ein Rezept für Pizzateig empfohlen. Zunächst habe ich die Anweisungen auf einem kleinen Stück Papier festgehalten und immer wieder zum Spicken benutzt. Inspiriert durch eine andere Seite mit einem Rezept für selbstgemachten Tofu und weil ich gefragt wurde, ob ich es nicht mal ‘leserlich’ aufschreiben und teilen kann, habe ich das Rezept für den Pizzateig in gleicher Weise auf eine simple Webseite gebracht.
Da ich mich aktuell sowieso mit React beschäftige, hat es umso mehr Spaß gemacht State behandeln zu müssen, um die Mengenangaben und Anweisungen dynamisch an die gewünschte Menge anzupassen. Viel Styling gibt es nicht—außer das durch Create React App erzeugte.
Anfangs wurde die Mengenangabe durch einen Number-Input gesteuert, aber das war auf dem Smartphone ein Albtraum, der Range-Slider funktioniert dagegen sehr gut. Außerdem muss ich damit fehlerhaften Input nicht behandeln—der Slider liefert immer numerischen Input.
Slider vs Number-Input
Hier kannst du die beiden Input-Methoden ja mal ausprobieren, um den Unterschied selbst festzustellen:
Anmerkung: Versuch den Wert auf einem Smartphone anzupassen!
Hier gehts zum Rezept
Eigentlich geht es ja um Pizza, also im folgenden noch der Link zur Seite mit den Anweisungen für den Teig: pizza.metters.dev
Quellen
- Ja, ja—Ich habe auch mit den Augen gerollt, weil es TikTok ist, aber das Rezept ist trotzdem gut: Video Teil 1 und Teil 2
- Inspirationsquelle für die Umsetzung als statische Webseite: dofunao.jonasgroeger.de