Hallo, liebe Entwickler! Ich freue mich, Ihnen mein neuestes Projekt vorzustellen: einen Gewichtsumrechner. Dieses Projekt ist ein einfaches, aber praktisches Tool, das Benutzern hilft, Gewicht von Pfund in Kilogramm umzurechnen. Es ist eine hervorragende Möglichkeit, JavaScript zu üben, insbesondere im Umgang mit Benutzereingaben, Berechnungen und DOM-Manipulation. Egal, ob Sie JavaScript-Neuling sind oder auf der Suche nach einem unterhaltsamen, schnellen Projekt sind, dieser Gewichtskonverter ist perfekt für Sie.
Der Gewichtsumrechner ist eine Webanwendung, die es Benutzern ermöglicht, ein Gewicht in Pfund einzugeben und das entsprechende Gewicht in Kilogramm zu erhalten. Dieses Projekt zeigt, wie man mit Formulareingaben arbeitet, Berechnungen in JavaScript durchführt und den Webseiteninhalt basierend auf Benutzereingaben dynamisch aktualisiert.
Hier ein kurzer Blick auf die Projektstruktur:
Weight-Converter/ ├── index.html ├── styles.css └── script.js
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Weight-Converter.git
Öffnen Sie das Projektverzeichnis:
cd Weight-Converter
Führen Sie das Projekt aus:
Die Datei index.html richtet die Struktur des Gewichtskonverters ein, einschließlich des Eingabefelds und der Ergebnisanzeige. Hier ist ein Ausschnitt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Weight Converter</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<h1>Weight Converter</h1>
<label for="input">Pounds</label>
<input
type="number"
id="input"
class="input"
step="0.1"
placeholder="Enter number"
/>
<p>Your weight in kg is: <span id="result"></span></p>
<p class="error" id="error"></p>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
Die Datei „styles.css“ formatiert den Gewichtskonverter, einschließlich des Eingabefelds, der Fehlermeldungen und des Layouts. Hier sind einige wichtige Stile:
body {
margin: 0;
background-color: black;
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-family: 'Courier New', Courier, monospace;
color: white;
}
.container {
background: rgba(141, 133, 133, 0.632);
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
border-radius: 10px;
width: 85%;
max-width: 450px;
margin-bottom: 200px;
}
.input-container {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: 700;
}
.input {
padding: 10px;
width: 70%;
background: rgb(255, 253, 253);
border-color: rgba(0, 0, 0, 0.5);
font-size: 18px;
border-radius: 10px;
color: rgb(0, 0, 0);
outline: none;
}
.error {
color: red;
}
#result {
color: rgb(0, 255, 0);
}
Die Datei script.js verwaltet die Konvertierungslogik, die Eingabevalidierung und aktualisiert das DOM. Hier ist ein Ausschnitt:
const inputEl = document.getElementById("input");
const errorEl = document.getElementById("error");
const resultEl = document.getElementById("result");
let errorTime;
let resultTime;
function updateResults() {
if (inputEl.value <= 0 || isNaN(inputEl.value)) {
errorEl.innerText = "Please enter a valid number!";
clearTimeout(errorTime);
errorTime = setTimeout(() => {
errorEl.innerText = "";
inputEl.value = "";
}, 2000);
} else {
resultEl.innerText = (+inputEl.value / 2.2).toFixed(2);
clearTimeout(resultTime);
resultTime = setTimeout(() => {
resultEl.innerText = "";
inputEl.value = "";
}, 10000);
}
}
inputEl.addEventListener("input", updateResults);
Sie können sich hier die Live-Demo des Weight Converter ansehen.
Die Erstellung dieses Gewichtskonverters war ein unterhaltsames Projekt, das es mir ermöglichte, das Potenzial von JavaScript bei der Verarbeitung von Eingabevalidierungen und -berechnungen in Echtzeit zu erkunden. Ich hoffe, dass dieses Projekt Sie dazu inspiriert, ähnliche Tools zu entwickeln, die alltägliche Aufgaben erleichtern. Fühlen Sie sich frei, den Code entsprechend Ihren Anforderungen zu erkunden, anzupassen und zu verbessern. Viel Spaß beim Codieren!
Dieses Projekt wurde als praktische Anwendung von JavaScript für die Verarbeitung von Benutzereingaben und die DOM-Manipulation entwickelt.
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Website zur Gewichtsumrechnung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
