Gunnar Bittersmann: Währungsrechner in JavaScript

Beitrag lesen

@@Felix Riesterer

Du möchtest stattdessen ein Formular mit zwei Eingabefeldern und einem Button:

€______ [=] $______

Ein Button?

Ich will 8 Euro in Dollar umrechnen, trage im linken Eingabefeld 8 ein und drücke auf [=]. Im rechten Feld steht dann 8.82, so weit so gut.

Dann will ich 15 Dollar in Euro umrechnen, trage im rechten Eingabefeld 15 ein. Im linken steht noch die 8. Was soll denn nun beim Drücken auf [=] passieren?

Man bräuchte wohl zwei Buttons: einen für Euro in Dollar und einen für Dollar in Euro.

Braucht man aber nicht.

“Design isn’t crafting a beautiful, textured button. It’s figuring out if there’s a way to get rid of the button altogether.” —Edward Tufte

Wenn man bei der Eingabe in ein Eingabefeld das jeweils andere gleich automatisch aktualisiert, braucht man gar keinen Button.

Codepen: aufs input-Event gelauscht – nicht bei jedem Eingabefeld, sondern beim Widget (event delegation), und im Eventhandler abgefragt, welches Eingabefeld denn nun der Auslöser war.

Die Umrechnungskurse hab ich in einem Objekt zusammengefasst.

Ansonsten ist noch aria-live="polite" zu erwähnen, damit das Ergebnis auch vom Screenreader angesagt wird. (Funktioniert im VoiceOver noch nicht ganz zufriedenstellend, der ist da etwas zu geschwätzig. Morgen sollte sich eine Gelegenheit bieten, jemanden zu fragen, der sich damit auskennt.)

LLAP 🖖

--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

—Marc-Uwe Kling