Erstellen Sie eine Website zur Gewichtsumrechnung-CSS-Tutorial-php.cn

Erstellen Sie eine Website zur Gewichtsumrechnung

WBOY

Freigeben： 2024-08-18 06:32:32

Original

939 Leute haben es durchsucht

Build a Weight Converter Website

Einführung

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.

Projektübersicht

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.

Merkmale

Handhabung von Benutzereingaben: Akzeptiert Benutzereingaben in Pfund und wandelt sie in Kilogramm um.
Validierung: Zeigt Fehlermeldungen für ungültige Eingaben an (z. B. nicht numerische oder negative Werte).
Echtzeitberechnung: Aktualisiert das Konvertierungsergebnis sofort, während der Benutzer tippt.
Responsives Design: Das Layout ist responsiv gestaltet und bietet ein einheitliches Erlebnis auf allen Geräten.

Verwendete Technologien

HTML: Strukturiert die Gewichtskonverterschnittstelle.
CSS: Gestaltet den Konverter, einschließlich reaktionsfähigem Layout und Fehlerbehandlung.
JavaScript: Verwaltet die Validierung von Benutzereingaben, Gewichtskonvertierung und DOM-Updates.

Projektstruktur

Hier ein kurzer Blick auf die Projektstruktur:

Weight-Converter/
├── index.html
├── styles.css
└── script.js

Nach dem Login kopieren

index.html: Enthält die HTML-Struktur des Gewichtskonverters.
styles.css: Enthält CSS-Stile für das Layout und das responsive Design.
script.js: Verwaltet die Logik für die Gewichtskonvertierung und Eingabevalidierung.

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

Klonen Sie das Repository:

git clone https://github.com/abhishekgurjar-in/Weight-Converter.git

Nach dem Login kopieren

Öffnen Sie das Projektverzeichnis:
```
cd Weight-Converter
```
Nach dem Login kopieren
Führen Sie das Projekt aus:
- Öffnen Sie die Datei index.html in einem Webbrowser, um den Gewichtskonverter zu verwenden.

Verwendung

Öffnen Sie die Website in einem Webbrowser.
Geben Sie ein Gewicht in Pfund in das Eingabefeld ein.
Sehen Sie sich das umgerechnete Gewicht in Kilogramm an, das auf der Seite angezeigt wird. Wenn die Eingabe ungültig ist, erscheint eine Fehlermeldung.

Code-Erklärung

HTML

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>

Nach dem Login kopieren

CSS

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);
  }

Nach dem Login kopieren

JavaScript

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);

Nach dem Login kopieren

Live-Demo

Sie können sich hier die Live-Demo des Weight Converter ansehen.

Abschluss

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!

Credits

Dieses Projekt wurde als praktische Anwendung von JavaScript für die Verarbeitung von Benutzereingaben und die DOM-Manipulation entwickelt.

Autor

Abhishek Gurjar
- GitHub-Profil

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!