Temperatur in °C und °F
Ein Glasthermometer, das mit dem Wert steigt und von kalt zu warm wechselt; beim Umschalten der Einheit rechnet die Zahl mit.
Einstellungen
Code
<div class="uvq06-tp"><div class="th" aria-hidden="true"><span class="tb"><i class="hg"></i></span><span class="bu"></span></div><div class="sd"><label for="uvq06-tp-in" class="lb">Temperatur</label><div class="fd"><input id="uvq06-tp-in" type="number" inputmode="decimal" step="0.5"><span class="un">°C</span></div><div class="sg" role="radiogroup" aria-label="Einheit"><label><input type="radio" name="uvq06-tp-u" value="c"><span>°C</span></label><label><input type="radio" name="uvq06-tp-u" value="f"><span>°F</span></label><i aria-hidden="true"></i></div><p class="fl" aria-live="polite"></p></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Eingabefelder
Alle ansehen: EingabefelderWofür du ihn nutzen kannst
Ein Zahlenfeld für Temperaturen mit einem Glasthermometer daneben. Höhe und Farbe der Quecksilbersäule kommen aus einer einzigen CSS-Variablen, die Kalt- und Warmfarbe mischt, während der Wert steigt, und ein kurzes Wort beschreibt das Gefühl. Ein Segment-Schalter wechselt zwischen Celsius und Fahrenheit und rechnet die Zahl mit einer kleinen Rollbewegung um.
Setz die warme Farbe als Hauptfarbe und die kalte als zweite. Es passt zu Wetter-Widgets, Smart-Home-Panels, Koch-Apps und Laborformularen, und die Beschreibungen im Skript lassen sich in Bereiche für Backöfen, Kühlschränke oder Aquarien umbauen.