HTML/JS/CSS. Währungsrechner code von USD zu EUR?

Hallöchen 👋

Bin gaaanz neu in der Thematik programmieren, und zwar ich würde gerne bei meinem aktuell Projekt (Währungsrechner) noch die Funktion hinzufügen das man von USD zu Euro umrechnen kann.

Ich habe selbst probiert eine "Funktion" hinzuzufügen allerdings funktioniert diese wohl nicht. Wäre um Hilfe und eine kleine erklärung sehr sehr dankbar. (Benutze VS)

Bild zum Beitrag

20.07.2024, 20:39

function calc() {
  let euro = euroField.value;
  let result = euro * 0.92;
  usdField.value = result.toFixed(2).replace(".", ",");
}


function euro() {
  let usd = euroField.value;
  let result = usd * 1.08;
  euroField.value = result;
}

2 Antworten

kernel0verflow

20.07.2024, 21:37

Ich kann der anderen Antwort nur zustimmen. Ich würde dir noch empfehlen den Wechselkurs nicht zu hardcoden, sondern den aktuellen Kurs per API mit fetch() abzurufen. Dadurch lernst du direkt noch das arbeiten mit asynchronen Operationen und hast immer den aktuellen Kurs. Alls fallback falls du keine aktive Internetverbindung hast, kannst du ja die 0.92 nehmen.

Maurice673

Beitragsersteller

20.07.2024, 23:22

Ich danke für die Hilfe, hab den Fehler selbst gefunden, werde aber mal schauen ob ich das schon selbst hin bekomme was ihr meintet

kernel0verflow

20.07.2024, 21:40

Und um viele Requests zu vermeiden, könntest du zum Beispiel ebenfalls den aktuellen Kurs einmal abrufen und diesen zusammen mit dem Zeitpunkt wann er abgerufen wurde im Local Storage speichern. Wenn du die Seite lädst kannst du dann erstmal schauen ob ein aktueller Kurs vorhanden ist, falls ja kannst du den lokalen verwenden. Falls dieser bspw. älter als 6h ist könntest du ihn updaten und neu herunterladen und speichern.
Nur so eine Idee wie du das ganze ausbauen könntest.

LG.

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

21.07.2024, 02:10

Hi Maurice673,

ich würde dir empfehlen die Wert aus dem Eingabefeld in eine Zahl umzuwandeln.

function calc() { let euro = parseFloat(euroField.value); if (!isNaN(euro)) { let result = euro * 1.08; usdField.value = result.toFixed(2).replace(".", ","); } else { usdField.value = "Invalid input"; } }

function calcEuro() { let usd = parseFloat(usdField.value); if (!isNaN(usd)) { let result = usd * 0.92; euroField.value = result.toFixed(2).replace(".", ","); } else { euroField.value = "Invalid input"; } }

Viel Erfolg

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Ähnliche Beiträge

JavaScript EventListener funktioniert nicht richtig?

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

...zum Beitrag

C-Knopf im Taschenrechner programmieren?

Ich habe vor, einen Taschenrechner in HTML und JS zu coden, aber ich weiß nicht, wie ich diesen Knopf, der alles löscht in eine Funktion packen kann.

So habe ich es bisher versucht, aber es funktioniert nicht:

function deleteAll() {
  let container = document.getElementById("resultarea");
  let remove = clrs(container.innerHTML);
  container.innerHTML = remove;
}

...zum Beitrag

Schnell Geld mit Html und Css?

Hallo ich habe gute Html und css kenntnisse ich muss schnell an geld kommen was würdet ihr mir empfehlen ich rede nicht von tausenden euros sondern ein bisschen

...zum Beitrag

Wieso funktioniert array.push() nicht?

Bei folgendem Code funktioniert die array.push-Funktion nicht.

let XArray = [];

function Xcoordinate() {
  for (let i = 0; i <= width; i+= 30) {
    XArray.push(i);
  }
}
//width ist die breite des Canvas

Das Array füllt sich nicht.

Ich arbeite mit p5.js.

Kann mir jemand helfen?

VG Finja

...zum Beitrag

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zum Beitrag

Werte aus Datenbank anzeigen mit JS?

Hallo,

ich habe folgenden Code für mein Formular:

<form action="/message1" method="post">
  <div class="input">
    <input type="text" placeholder="Chat" id="input" name="input1">
  </div>
  <div class="send">
    <button type="submit" onclick="message();">Send</button>
  </div>
</form>

Nun noch das JS onclick-Event:

function message() {
  input = document.getElementById("input").value;
  count++;

  if (input == "") {
    alert("please type your message!");
  }
  else {
    if (count % 2 == 0) {
      let newDiv = document.createElement("div");
      newDiv.id = "divMessage";
      newDiv.style.display = "flex";
      newDiv.style.justifyContent = "flex-start";
      newDiv.style.margin = "45px";
      newDiv.style.backgroundColor = "#303032";
      newDiv.style.borderRadius = "10px";
      newDiv.style.padding = "10px";
      newDiv.style.marginTop = "80px";
      newDiv.style.color = "white";
      newDiv.style.marginBottom = "80px";
      newDiv.style.width = "120px";
      newDiv.innerHTML = input;

      let chatMessages = document.querySelector(".chat-messages");
      chatMessages.appendChild(newDiv);
    }

Und nun noch das Reinschreiben mit node.js in die MariaDB-Datenbank:

app.post('/message1', async (req, res) => {
  const input = req.body.input1;
  console.log(input);
  const conn = await pool.getConnection();
  await conn.query(`INSERT INTO test.handy (id, name) VALUES (2, '${input}')`);
  conn.release();
});

Nun möchte ich aber, das, was in die Datenbank geschrieben wurde, beim Aktualisieren der Seite immer noch im "newDiv" anzeigen. Wie geht das?

...zum Beitrag

wass Macht Dieser Code?

<!DOCTYPE html> <html> <head> <title>Zufällige Geschichte und Bananen-Animation</title> <style> .story { font-size: 20px; margin-bottom: 20px; } .banana { width: 100px; height: 200px; position: absolute; bottom: 0; left: 0; animation: eatCars 5s infinite linear; } .car { width: 50px; height: 30px; position: absolute; bottom: 0; animation: moveCar 5s infinite linear; } @keyframes eatCars { 0% { left: 0; } 100% { left: 100%; } } @keyframes moveCar { 0% { left: 0; } 100% { left: -50px; } } </style> </head> <body> <button onclick="getRandomStory()">Zufällige Geschichte</button> <button onclick="startBananaAnimation()">Banane füttern</button> <div class="story"></div> <div class="banana"></div> <div class="car"></div> <div class="car"></div> <div class="car"></div> <script> const stories = [ "Es war einmal...", "In einer weit entfernten Galaxie...", "Ein kleines Mädchen fand...", ]; function getRandomStory() { const storyElement = document.querySelector('.story'); const randomIndex = Math.floor(Math.random() * stories.length); storyElement.textContent = stories[randomIndex]; } function startBananaAnimation() { const banana = document.querySelector('.banana'); banana.style.display = 'block'; } </script> </body> </html>

...zum Beitrag

Was mache ich falsch in JavaScript?

Ich will die Rotation einen 2D-Versors berechnen und dafür, will ich erstmal den Realteil ausrechnen.

Mein Problem ist: Es rechnet einfach nicht.

Was mache ich falsch?:

window.addEventListener('keydown', (event) => {
    if (event.keycode === '13') {
        return
    };
    function calculate (calculate)
}
)


function calculate (calculate) {
    let z_rotaited = document.getElementById('RotatedComplexversorZ');
    let Rez = document.getElementById('Re(z)');
    let Imz = document.getElementById('Im(z)');
    let Rotationangle = document.getElementById('Rotationangleindegree');
    let result = Math.sqrt(Rez ** 2 + Imz ** 2) * Math.cos(Rotationangle + Math.atan2(Rez, Imz) * 180 / Math.PI);
    z_rotaited = result;
}
function calcAngleDegrees(containerRez, containerImz) {
    return Math.atan2(containerRez, containerImz) * 180 / Math.PI;
  }

(Wenn ich Enter drücke, soll die eine Funktion laufen, welche das rotierte z ausrechnet.
Die Funktion (mathematich gesehen) lautet:

z_{rotiert} = sqrt(Re(z)² + Im(z)²) * (phi + cos(arctan2(Re(z), Im(z))) i * sin(phi + arctan2(Re(z), Im(z))))
z = 2D-Versor
phi = der dazu adierte Winkel

Die Seite sieht so aus:

...zum Beitrag

Wird HTMX JavaScript nutzlos machen?

...zum Beitrag

Währungsrechnen USD zu euro?

Wie kann ich von usd zu Euro umrechnen

...zum Beitrag

Spotify API Get Methode Blocked?

Moin, hab mal ne Frage, da ich es einfach nicht hin bekomme. Ich habe vor sowas wie eine Musikwunsch Seite für ein Schul Projekt zu coden. Dafür will ich die Spotify API nutzen, damit man über diese Songs suchen kann. Es kommt aber immer in der Netzwerkanalyse der Fehler NS_BINDING_ABORTED, obwohl mein Access Token korrekt ist. Hier ist meine script.js

const API_ENDPOINT = "https://api.spotify.com/v1/search";
const ACCESS_TOKEN = "your_access_token";

function searchSong() {
    let songName = document.getElementById("song-name").value;

    fetch(`${API_ENDPOINT}?q=${songName}&type=track`, {
        headers: {
            "Authorization": `Bearer ${ACCESS_TOKEN}`
        }
    })
    .then(response => response.json())
    .then(data => {
        let songResults = data.tracks.items;

        if (songResults.length > 0) {
            let songList = document.createElement("ul");

            for (let i = 0; i < songResults.length; i++) {
                let song = songResults[i];

                let songItem = document.createElement("li");
                songItem.innerHTML = `<a href="javascript:void(0)" onclick="selectSong('${song.id}')">${song.name} by ${song.artists[0].name}</a>`;

                songList.appendChild(songItem);
            }

            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "";
            songResultsDiv.appendChild(songList);
        } else {
            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "Sorry, no songs found.";
        }
    })
    .catch(error => {
        const errorMessage = document.getElementById("error-message");
        errorMessage.innerText = error;
    });
}

function selectSong(songId) {
    fetch("db.php", {
        method: "POST",
        body: JSON.stringify({songId: songId}),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert("Song added to the list!");
        } else {
            alert("Error adding song to the list.");
        }
    })
    .catch(error => {
        console.log(error);
    });
}

Hier ist dann noch die Index.html:

 <!DOCTYPE html>
<html>
<head>
    <title>DJ Song Request</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>DJ Song Request</h1>
    <form>
        <label for="song-name">Enter song name:</label>
        <input type="text" id="song-name" name="song-name">
        <button type="submit" onclick="searchSong()">Search</button>
    </form>
    <div id="song-results"></div>
</body>
</html>

Vielleicht kann mir ja jemand helfen, da ich echt nicht mehr weiter weiß, im vorraus schon mal Vielen Dank ;D

...zum Beitrag

Wann kann man JavaScript gut?

Also, ich kann von APIs Daten abrufen. Voice Recorder, Wetter Webseite etc.

Slideshows kann ich auch programmieren. Ist auch einfach. Node.js kann ich nicht und json habe ich noch nicht ganz verstanden.

HTML und CSS beherrsche ich richtig gut.

Wann würdet ihr sagen, dass man gut JavaScript Code schreiben kann?

...zum Beitrag

Shared library Nutzung in python "undefined symbol"?

Ich versuche ein möglichst einfaches Beispiel zu verwenden um überhaupt erstmal irgendwas zum Laufen zu bringen. Ich möchte die Funktionen einer shared library in python nutzen:

Calc.h

#ifndef CALC_H
#define CALC_H

class Calc {
public:
   int add();
};

#endif

Calc.cpp

#include "include/Calc.h"
int Calc::add() {
   return 5;
}

CMakeLists.txt

cmake_minimum_required(VERSION 3.0)

project(calc)

set(CMAKE_CXX_STANDARD 11)

# Define sources and executable
set(SOURCES Calc.cpp)

add_library(calc SHARED ${SOURCES})
target_link_libraries(calc ${LIBS} -Wl,--export-dynamic)

install(TARGETS calc DESTINATION lib)
install(FILES Calc.h DESTINATION include)

mkdir build && cd build && cmake .. && make

...
[100%] Linking CXX shared library libcalc.so
[100%] Built target calc

main.py

import ctypes

lib = ctypes.CDLL('./libcalc.so')

lib.add.restype = ctypes.c_int

result = lib.add()

print(result)
...$ python3 main.py 
Traceback (most recent call last):
 File ".../main.py", line 7, in <module>
   lib.add.restype = ctypes.c_int
 File "/usr/local/lib/python3.9/ctypes/__init__.py", line 387, in __getattr__
   func = self.__getitem__(name)
 File "/usr/local/lib/python3.9/ctypes/__init__.py", line 392, in __getitem__
   func = self._FuncPtr((name_or_ordinal, self))
AttributeError: ./libcalc.so: undefined symbol: add   <----------

Was mache ich falsch?

...zum Beitrag

Bild wird nicht im Browser angezeigt?

Hallo,

ich bin gerade dabei eine Website zu schreiben mit HTML und CSS und gerade scheitere ich daran mein Logo richtig zu verlinken. Ich hab es genauso wie bei meiner anderen Website gemacht wo es funktioniert aber hier nicht. Weiß jemand vllt weiter? Dankeschön schonmal. :)

HTML:

CSS:

ORNDER:

Mein HTML und CSS Code befindet sich im TEST 2 Ordner also so eigentlich:

TEST 2/BILDER/LOGO.eps

So sieht es bis jetzt aus:

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen