In diesem Artikel erstellen wir eine einfache, aber nützliche Webanwendung zur Währungsumrechnung mit HTML, CSS und JavaScript. Diese Anwendung ist für alle nützlich, die häufig reisen oder mit internationalen Transaktionen arbeiten. Am Ende des Artikels können Sie eine funktionierende Währungsumrechnungs-App direkt in Ihrem Browser ausführen. 🎉
✨ Demo-Projekt | 📂 Quellcode auf GitHub herunterladen
🤖 In der App Kodik Sie können HTML, CSS und JavaScript sowie viele andere Kurse lernen, um Ihre Reise in die Webentwicklung zu beginnen! 🌱
1. Projektbeschreibung ✨
Unsere Währungsumrechnungs-App ermöglicht es dem Benutzer, die Währung auszuwählen, in der er den Betrag eingeben möchte, und ihn zum aktuellen Wechselkurs in eine andere Währung umzurechnen. Wir werden eine API verwenden, um aktuelle Wechselkurse zu erhalten. Die Benutzeroberfläche der Anwendung wird intuitiv und einfach sein, sodass jeder Anfänger sie leicht verstehen kann. 🌐
2. Vorbereitung auf das Projekt 🛠️
Um zu beginnen, benötigen wir die folgenden Tools und Ressourcen:
Texteditor (z. B. VS-Code) zum Schreiben von Code.
Browser um die Funktionsweise der Anwendung zu testen.
API zum Abrufen von Wechselkursen. Wir verwenden die kostenlose API von Exchangerate-API, mit dem Sie aktuelle Daten zu Wechselkursen erhalten können. Dazu müssen Sie sich auf der Website registrieren und einen API-Schlüssel erhalten.
Sobald Sie einen API-Schlüssel haben, können wir ihn in unser Projekt integrieren und für die Währungsumrechnung verwenden. 🚀
3. Entwicklungsschritte 🖥️
Schritt 1: HTML erstellen
HTML ist die Grundlage unserer Anwendung. Mit Hilfe von HTML erstellen wir eine Struktur zur Dateneingabe und Ergebnisanzeige.
So wird die Hauptdatei index.html aussehen:
<!DOCTYPE html>
<!-- Сделано командой coursme - https://coursme.com/ -->
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title>Приложение для конвертации валют | Coursme</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Ссылка на CDN для иконок FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<header>Конвертер валют</header>
<form action="#">
<div class="amount">
<p>Введите сумму</p>
<input type="text" value="1">
</div>
<div class="drop-list">
<div class="from">
<p>Из</p>
<div class="select-box">
<img src="https://flagcdn.com/48x36/us.png" alt="flag">
<select> <!-- Опции добавляются через JavaScript --> </select>
</div>
</div>
<div class="icon"><i class="fas fa-exchange-alt"></i></div>
<div class="to">
<p>В</p>
<div class="select-box">
<img src="https://flagcdn.com/48x36/np.png" alt="flag">
<select> <!-- Опции добавляются через JavaScript --> </select>
</div>
</div>
</div>
<div class="exchange-rate">Получение обменного курса...</div>
<button>Получить обменный курс</button>
</form>
</div>
<script src="js/country-list.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Schritt 2: Styling mit CSS
Fügen wir nun einige Stile hinzu, damit unsere Anwendung ordentlich und schön aussieht. So wird die Datei styles.css aussehen:
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0 10px;
background: #11152C;
}
::selection{
color: #fff;
background: #11152C;
}
.wrapper{
width: 370px;
padding: 30px;
border-radius: 7px;
background: #fff;
box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.wrapper header{
font-size: 28px;
font-weight: 500;
text-align: center;
}
.wrapper form{
margin: 40px 0 20px 0;
}
form :where(input, select, button){
width: 100%;
outline: none;
border-radius: 5px;
border: none;
}
form p{
font-size: 18px;
margin-bottom: 5px;
}
form input{
height: 50px;
font-size: 17px;
padding: 0 15px;
border: 1px solid #999;
}
form input:focus{
padding: 0 14px;
border: 2px solid #11152C;
}
form .drop-list{
display: flex;
margin-top: 20px;
align-items: center;
justify-content: space-between;
}
.drop-list .select-box{
display: flex;
width: 115px;
height: 45px;
align-items: center;
border-radius: 5px;
justify-content: center;
border: 1px solid #999;
}
.select-box img{
max-width: 21px;
}
.select-box select{
width: auto;
font-size: 16px;
background: none;
margin: 0 -5px 0 5px;
}
.select-box select::-webkit-scrollbar{
width: 8px;
}
.select-box select::-webkit-scrollbar-track{
background: #fff;
}
.select-box select::-webkit-scrollbar-thumb{
background: #888;
border-radius: 8px;
border-right: 2px solid #ffffff;
}
.drop-list .icon{
cursor: pointer;
margin-top: 30px;
font-size: 22px;
}
form .exchange-rate{
font-size: 17px;
margin: 20px 0 30px;
}
form button{
height: 52px;
color: #fff;
font-size: 17px;
cursor: pointer;
background: #11152C;
transition: 0.3s ease;
}
form button:hover{
background: #11152C;
}Schritt 3: Beschreibung des JavaScript-Codes
In unserer JavaScript-Währungsumrechnungs-App werden wir mehrere Hauptaufgaben ausführen:
Ausfüllen der Dropdown-Listen mit Währungen: Zuerst füllen wir beide Dropdown-Listen (
fromCurrencyundtoCurrency) mit verfügbaren Währungen, wobei wir die im Objektcountry_listbereitgestellten Währungsdaten verwenden. Dieser Vorgang umfasst das Hinzufügen von Währungsflaggen und Codes zu den Listen.Verarbeitung der Währungsauswahl: Wenn ein Benutzer eine Währung aus einer der Dropdown-Listen auswählt, aktualisieren wir automatisch die angezeigte Flagge für jede Währung, um die Auswahl des Benutzers widerzuspiegeln.
Währungsumschaltung mit Hilfe des Symbols: Für die Benutzerfreundlichkeit fügen wir die Möglichkeit hinzu, Währungen zwischen den Feldern "Von" und "In" über das Währungsumtauschsymbol zu wechseln. Wenn Sie auf das Symbol klicken, werden die Währungen ausgetauscht.
Erhalten des Wechselkurses: Wenn Sie auf die Schaltfläche "Wechselkurs abrufen" klicken oder eine der Währungen ändern, sendet die Anwendung eine Anfrage an eine externe API, um den aktuellen Wechselkurs zwischen den ausgewählten Währungen zu erhalten. Wir verwenden die API von Exchangerate-APIum aktuelle Daten zu den Wechselkursen zu erhalten.
Anzeige der Ergebnisse: Nach Erhalt des Kurses berechnen wir das Ergebnis der Umrechnung des eingegebenen Betrags in die ausgewählte Währung und zeigen es auf dem Bildschirm an. Wenn etwas schief gelaufen ist (z. B. kein Internet oder die API antwortet nicht), zeigen wir einen Fehler an.
Beschreibung und Funktionalität des Codes
Ausfüllen von Dropdown-Listen: Wir verwenden das Objekt
country_list, das Währungscodes und die entsprechenden Länder enthält. Mit Hilfe dieses Objekts füllen wir beide Dropdown-Listen (mit Währungen für die Felder "Von" und "In").
for (let i = 0; i < dropList.length; i++) {
for (let currency_code in country_list) {
let selected = i == 0 ? currency_code == "USD" ? "selected" : "" : currency_code == "NPR" ? "selected" : "";
let optionTag = `<option value="${currency_code}" ${selected}>${currency_code}</option>`;
dropList[i].insertAdjacentHTML("beforeend", optionTag);
}
}Hier gehen wir durch alle Dropdown-Listen und fügen ihnen Währungen hinzu. Standardmäßig wird für das Feld "Von" die Währung USD und für das Feld "Nach" die Währung NPR ausgewählt.
Flagge aktualisieren, wenn die Währung geändert wird: Wenn ein Benutzer eine Währung auswählt, aktualisieren wir die Flagge, die das Land anzeigt, zu dem diese Währung gehört. Dazu verwenden wir die Methode
loadFlag, die das Flaggenbild im Tag<img>ändert:
function loadFlag(element) {
for (let code in country_list) {
if (code == element.value) {
let imgTag = element.parentElement.querySelector("img");
imgTag.src = `https://flagcdn.com/48x36/${country_list[code].toLowerCase()}.png`;
}
}
}Währungsumschaltung mit Hilfe des Symbols: Der Benutzer kann die Währungen über das Austauschsymbol austauschen. Wenn Sie auf dieses Symbol klicken, werden die Währungscodes in den Feldern "Von" und "In" vertauscht:
const exchangeIcon = document.querySelector("form .icon");
exchangeIcon.addEventListener("click", () => {
let tempCode = fromCurrency.value;
fromCurrency.value = toCurrency.value;
toCurrency.value = tempCode;
loadFlag(fromCurrency);
loadFlag(toCurrency);
getExchangeRate();
});Erhalten des Wechselkurses: Wenn der Benutzer auf die Schaltfläche "Wechselkurs abrufen" klickt oder wenn er die Währung ändert, fordern wir den aktuellen Wechselkurs bei der API an. Die API gibt den Kurs für die ausgewählten Währungen zurück und wir berechnen den Gesamtbetrag:
function getExchangeRate() {
const amount = document.querySelector("form input");
const exchangeRateTxt = document.querySelector("form .exchange-rate");
let amountVal = amount.value;
if (amountVal == "" || amountVal == "0") {
amount.value = "1";
amountVal = 1;
}
const apiKey = 'f2cd93cc5c526e3204de8e90'; // Ihr API-Schlüssel
exchangeRateTxt.innerText = "Getting the exchange rate...";
let url = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${fromCurrency.value}`;
fetch(url).then(response => response.json()).then(result => {
let exchangeRate = result.conversion_rates[toCurrency.value];
let totalExRate = (amountVal * exchangeRate).toFixed(2);
exchangeRateTxt.innerText = `${amountVal} ${fromCurrency.value} = ${totalExRate} ${toCurrency.value}`;
}).catch(() => {
exchangeRateTxt.innerText = "Something went wrong";
});
}Wir stellen eine Anfrage an die API und verwenden den resultierenden Kurs, um den Gesamtbetrag zu berechnen. Wenn ein Fehler aufgetreten ist (z. B. Probleme mit der Internetverbindung), wird eine Fehlermeldung angezeigt.
Wichtige Punkte:
Verhindern, dass ein Formular gesendet wird: Durch Klicken auf die Schaltfläche "Wechselkurs abrufen" verhindern wir das Standardverhalten des Formulars (Neuladen der Seite) mit
e.preventDefault(), sodass die gesamte Verarbeitung auf derselben Seite stattfindet.Eingabevalidierung: Wir prüfen, ob der Benutzer 0 oder einen leeren Wert in das Betragsfeld eingegeben hat. In diesem Fall verwenden wir standardmäßig den Wert 1.
API-Schlüssel: Der Code verwendet eine externe API, um aktuelle Wechselkurse abzurufen. Sie müssen Ihren eigenen API-Schlüssel erhalten, indem Sie sich registrieren auf Exchangerate-API, um den aktuellen Schlüssel im Code zu ersetzen.
Flagge aktualisieren: Wir aktualisieren das Flaggenbild im Tag
<img>abhängig von der ausgewählten Währung, indem wir den Ländercode aus dem Objektcountry_listabrufen.
Dieser Ansatz ermöglicht es, eine flexible Währungsumrechnungs-App mit HTML, CSS und JavaScript zu erstellen, die aktuelle Daten von einer externen API abruft und dem Benutzer eine benutzerfreundliche Oberfläche für die Echtzeit-Währungsumrechnung bietet.
Den vollständigen Code können Sie auf unserer GitHub
Fazit ✨
Jetzt haben Sie einen funktionierenden Währungsumrechner, der aktuelle Wechselkurse aus der API verwendet! Sie können nach eigenem Ermessen weitere Währungen hinzufügen oder die Benutzeroberfläche verbessern. Vergessen Sie nicht, dass dieses Projekt ideal für Anfänger ist, da es alle wichtigen Aspekte der Webentwicklung abdeckt: Erstellen einer HTML-Struktur, Styling mit CSS und Arbeiten mit APIs mit JavaScript. Viel Glück bei der Entwicklung! 🎯
Den vollständigen Quellcode und möglicherweise weitere Verbesserungen finden Sie auf unserer GitHub.
Wenn Sie Fragen haben, zögern Sie nicht, diese zu stellen. Viel Glück beim Programmieren und mögen deine Projekte immer so interessant und aufregend sein! 👊🌟