Währungsrechner mit HTML, CSS oder Javascript programmieren

Menemey · 27. Januar 2018

Hallo,

ich habe vor ein Währungsrechner zu programmieren. Das Geld soll von Euro in Dollar umgewandelt werden und ich weiß nicht wie ich das machen soll.

Es soll so aussehen, dass oben ein Textfeld ist, wo man dann die Zahl schreiben, was dann spaeter in Dollar umgewandelt werden soll. Unter diesem Textfeld befindet sich dann ein Button (Knopf), welches dann die angegeben Zahl in dollar umwandelt. Und zum Schluß befindet sich wieder ein Textfeld, worin dann die in Dollar umgewandelte Zahl steht.

Beispiel:

Ich gebe oben im Textfeld die Zahl 8 an also 8 Euro und drücke dann auf diesen Button. Nachdem man den Button gedrückt hat, steht im unteren Textfeld dann, wie viel Dollar, 8 Euro sind. Also ein ganz normaler Währungsrechner, der Euro in Dollar umwandelt, indem man auf den Button drückt.

Ich hoffe ihr könnt mir hier weiterhelfen

Stef · 27. Januar 2018

Hey,

du brauchst dafür den Wechselkurs zwischen Euro und Dollar. Siehe auch https://www.finanzen.net/waehrungsrechner/euro_us-dollar

Das heißt du musst den eingegebenen Betrag nur mit diesem Wechselkurs multiplizieren. Dann hast du das fertige Ergebnis.

Beispiel:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Währungsrechner in Javascript</title>

    <script>
        
        window.onload = function(){

            
            var button = document.getElementById('umrechnen');

            button.addEventListener("click", euroToDollar);

            function euroToDollar(){
                var betrag = document.getElementById('betrag');

                betrag = betrag.value;
                var euroKurs =    1.2427;

                var ergebnis = betrag * euroKurs;

                console.log(ergebnis);
                document.getElementById('ausgabe').innerHTML = "<p>" + ergebnis + " $</p>";
                
            }
        }
    
    </script>
</head>
<body>
    <form method="post">    
            <label>Betrag:</label><input type="text" name="betrag" id="betrag"> €

            <button id="umrechnen">Umrechnen in Dollar</button>
            <section id="ausgabe"></section>
    </form>
</body>
</html>

Alles anzeigen

Menemey · 28. Januar 2018

Ich bedanke mich für diese Antwort !

wolf · 28. Januar 2018

Moin, bitte mach in Zukunft nur einen Thread auf!

Währungsrechner mit HTML, CSS und Javascript programmieren

Mein beitrag aus dem parralel Tread:

Denk daran, dass die Kurse schwanken.

Hierfür lohnt es sich eine API zu nutzen die einem diese angibt, z.B. http://fixer.io/ bzw.: https://api.fixer.io/latest?base=EUR

wolf · 28. Januar 2018

Stef , die Section ist nicht das richtige Element für das Ausgeben der Daten, in dem Fall eignet sich das outputElement hervorragend

https://codepen.io/wolf-w/pen/KQPQaR?editors=1010

Stef · 28. Januar 2018

Ok. Danke der Info.

Super Beispiel. Sieht sehr professionel aus.

wolf · 28. Januar 2018

Im Prinzip sind es nur zwei Methoden,
currency::init() und currency::calculate() die ::init() wird ausgeführt, wenn die Seite geladen ist, die ::calculate(), wenn sich im Formular etwas ändert oder das Formular abgesendet wird.

currency::init()

Liest alle Elemente aus dem DOM die gebraucht werden
Holt sich den aktuellen Kurs von fixer.io
Schreibt alle Währungen für die der Kurs bekannt ist in das Dropdown und aktiviert es dann
Sorgt dafür das ::calcualate() aufgerufen wird

currency::calculate()

Liest die "Einstellungen" aus dem Formular
Holt sich den Kurs aus den von ::init() geholten Daten
Berechnet das Ergebniss und schreibt es in das vorgesehene DOM objekt

Gerne könnt ihr meinen Code mit einem Verweis auf mich (elementcode.de) verwenden, für den Lerneffekt hat man mehr davon, wenn mann es nachprogrammiert (und nicht nur abschreibt ^^)

Stef · 29. Januar 2018

Hey,

hört sich schon leicht an. Aber die Umsetzung ist dann doch etwas komplizierter.

Wenn ich deine Seite versuche zu öffnen, bekomme ich nur eine 403 Forbidden Seite angezeigt. Jap. Der Lerneffekt ist beim nachprogrammieren schon stärker gegeben. Nur stärker wäre er gegeben, wenn man mit einem erfahrenen Programmierer zusammenarbeitet und man es erklärt bekommt.

Ich habe mal so aus meiner Sicht den Code kommentiert, ist das so richtig?:

JavaScript

 //initialize after DOM is ready
      //Warten bis Seite fertig geladen wurde und dann wird die funktion init von der Klasse currency aufgerufen
$(function(){
  currency.init(); 
});

var currency = {
  // Eigenschaften intialisieren
  select: null,
  form: null,
  outputAmount: null,
  
  rates: {},
  
  init: function(){
    // alle benötigten HTML-Elemente in variable, bzw. objekt, speichern
    this.select = $('#Currencies');
    this.form = $('#Form');
    this.outputAmount = $('#OutputAmount');
    this.outputDate = $('#OutputDate');
    
    // fügt auf die Form die Events submit sowie change hinzu, bei dem die Seite nicht neu geladen wird. Mit dem Call erhält man die Daten aus den this-elementen und dem mitgegebenen Parameter
    this.form.on('submit', function(ao_event){
      ao_event.preventDefault();
      currency.calculate.call(this, ao_event);
    });
    this.form.on('change', function(ao_event){
      currency.calculate.call(this, ao_event);
    });
  
    //Benötigte Daten via Ajax von der API holen und das Ergebnis in die variable speichern, der Inhalt sind da alle verschiedenen Kurse
    $.ajax({
      url: 'https://api.fixer.io/latest?base=EUR'
    })
    .done(function(lo_result) {
      currency.rates = lo_result.rates;
      
      //Für jedes element in der variable currency.rates wird eine function ausgeführt, welche jeden Kurs in ein option-tag einfügt. Dieser Select Liste wird bei jedem Durchgang immer der nächste Kurs mitdrangehongen. Sonst wära da nur ein Kurs
      $.each(currency.rates, function(ls_key){
        lo_option = $('<option/>');
        lo_option.text(ls_key);
  
        currency.select.append(lo_option);
      });

      // sagt aus, dass man auch andere Kurse wählen kann. Ebenso wird als Wert des select-menüs die Währung USD genommen
      currency.select.attr('readonly',false);
      currency.select.val('USD');
      
      // Datum erstellen
      lo_date = new Date(lo_result.date);
      // hier wird das Datum ausgegeben
      currency.outputDate.val(lo_date.toLocaleDateString('en-US', {}))
      
      //run the first calculation
      currency.calculate();
    })
    .fail(function() {
      alert('Can not retrive currency rates!');
    });
  },
  
  calculate: function(ao_event){
    //get form data as object (key => value)
    //Hier wird der Inhalt des Formulares in normale Strings umgewandelt (mit serializeArray) und zusammengerechnet (mit reduce). Dann wird das ergebnis zurückgegeben. 
    lo_form_data = currency.form.serializeArray().reduce(function(obj, item) {
      obj[item.name] = item.value;
      return obj;
    }, {});
    
    //calculate
    //Woher hast du amount bei lo_form_data ? 
    li_result = lo_form_data.amount * currency.rates[lo_form_data.currency];
    
    //output
    //Ausgabe mit 2 Kommestellen
    currency.outputAmount.val(li_result.toFixed(2));
  }
};

Alles anzeigen

Menemey · 29. Januar 2018

Danke auch für diese Antwort. Leider weiß ich nicht, ob das richtig ist, da ich noch ein totaler Anfänger in javascript bin. Wie kann ich denn am besten Javascript lernen. Also jetzt für schuliche Zwecken?

Sempervivum · 29. Januar 2018

Zitat

Wie kann ich denn am besten Javascript lernen.

Ich würde sagen, gleich hier:
https://www.html-seminar.de/javascript.htm

Menemey · 30. Januar 2018

Danke

Stef · 30. Januar 2018

Dieses kleine Tutorial finde ich ziemlich spärlich. Was ich dir raten kann ist ein Openbook von Rheinwerk. Ist online frei zugänglich, vom Jahr 2014 (denke es ist noch soweit ganz aktuell). Link dazu: http://openbook.rheinwerk-verl…86f6ada81276b0bd8025c78fa . Oder andere tiefergreifende Tutorials.

wolf · 30. Januar 2018

Stef ohne geringste grundkentnisse ist es wichtig erstmal das bisschen kennen zu lernen.

Stef · 31. Januar 2018

wolf : Ich sehe dies anders. Dieses Buch behandelt sehr viele Sachen von Javascript, auch das was in dem kleinen JS-Tutorial behandelt wird. Für die Personen, die gerne mit einem Buch lernen,nicht mehr im WWW nach den anderen Themen, welches das Buch behandelt, suchen möchten, ist das Openbook doch besser. Nur für die Leute die es schnell lernen möchten, bzw. nur sehen
möchten wie was funktioniert, wäre die abgespeckte Varainte doch besser.

Es kommt immer auf die Person an.

PS: Irgendwas stimmt grad mit diesem Editor nicht, darum sieht der Beitrag etwas komisch aus.

Währungsrechner mit HTML, CSS oder Javascript programmieren

Jetzt mitmachen!

Teilen