Hallo, liebe Entwickler! Ich freue mich, Ihnen mein neuestes Projekt vorzustellen: einen praktischen Temperaturkonverter. Dieses Projekt ist perfekt für diejenigen, die ihre JavaScript-Kenntnisse verbessern möchten, indem sie mit Benutzereingaben arbeiten, Konvertierungen durchführen und das DOM dynamisch aktualisieren. Egal, ob Sie Anfänger oder erfahrener Entwickler sind, dieser Temperaturumrechner ist ein großartiges Projekt, um die Grundlagen der Einheitenumrechnung zu verstehen.
Der Temperaturkonverter ist eine webbasierte Anwendung, mit der Benutzer Temperaturen einfach zwischen Celsius, Fahrenheit und Kelvin umrechnen können. Dieses Projekt zeigt, wie man eine interaktive Benutzeroberfläche erstellt, Berechnungen durchführt und dem Benutzer Echtzeit-Feedback gibt.
Hier ein kurzer Blick auf die Projektstruktur:
Temperature-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/Temperature-Converter.git
Öffnen Sie das Projektverzeichnis:
cd Temperature-Converter
Führen Sie das Projekt aus:
Die Datei index.html stellt die Grundstruktur des Temperaturkonverters bereit, einschließlich der Eingabefelder für Celsius, Fahrenheit und Kelvin. Hier ist ein Ausschnitt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Temperature Converter</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
<source src="./images/bg.mp4" type="video/mp4">
</video>
<div class="container">
<h1 class="heading">Temperature Converter</h1>
<div class="temp-container">
<label for="celsius">Celsius:</label>
<input
onchange="computeTemp(event)"
type="number"
name="celsius"
id="celsius"
placeholder="Enter Temperature"
class="input"
/>
</div>
<div class="temp-container">
<label for="fahrenheit">Fahrenheit:</label>
<input
onchange="computeTemp(event)"
type="number"
name="fahrenheit"
id="fahrenheit"
placeholder="Enter Temperature"
class="input"
/>
</div>
<div class="temp-container">
<label for="kelvin">Kelvin:</label>
<input
onchange="computeTemp(event)"
type="number"
name="kelvin"
id="kelvin"
placeholder="Enter Temperature"
class="input"
/>
</div>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
Die Datei „styles.css“ formatiert den Temperaturkonverter und sorgt für ein sauberes und reaktionsfähiges Layout. Hier sind einige wichtige Stile:
body {
margin: 0;
background: url(./images/bg.mp4);
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-family: monospace;
color: white;
}
.container {
background: #202124;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
border-radius: 10px;
width: 85%;
max-width: 450px;
min-width: 350px;
display: flex;
flex-direction: column;
align-items: center;
}
.heading {
font-size: 32px;
}
.temp-container {
width: 100%;
padding: 15px;
font-weight: bold;
font-size: 18px;
}
.input {
width: 220px;
font-family: monospace;
padding: 5px;
float: right;
outline: none;
background: white;
border-color: white;
border-radius: 5px;
color: black;
font-size: 18px;
}
.input::placeholder {
color: gray;
}
#background-video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
.footer {
margin-top: 200px;
text-align: center;
}
Die Datei script.js übernimmt die Konvertierungslogik und aktualisiert die Temperaturwerte basierend auf Benutzereingaben. Hier ist ein Ausschnitt:
const celsiusEl = document.getElementById("celsius");
const fahrenheitEl = document.getElementById("fahrenheit");
const kelvinEl = document.getElementById("kelvin");
function computeTemp(event) {
const currentValue = +event.target.value;
switch (event.target.name) {
case "celsius":
kelvinEl.value = (currentValue + 273.32).toFixed(2);
fahrenheitEl.value = (currentValue * 1.8 + 32).toFixed(2);
break;
case "fahrenheit":
celsiusEl.value = ((currentValue - 32) / 1.8).toFixed(2);
kelvinEl.value = ((currentValue - 32) / 1.8 + 273.32).toFixed(2);
break;
case "kelvin":
celsiusEl.value = (currentValue - 273.32).toFixed(2);
fahrenheitEl.value = ((currentValue - 273.32) * 1.8 + 32).toFixed(2);
break;
default:
break;
}
}
Sie können sich hier die Live-Demo des Temperaturkonverters ansehen.
Der Bau dieses Temperaturkonverters war eine lohnende Erfahrung und hat mein Verständnis von JavaScript und der Erstellung interaktiver Webanwendungen gestärkt. Ich hoffe, dass dieses Projekt Sie dazu inspiriert, weiter zu erkunden und Ihre eigenen Konvertierungstools zu erstellen. Viel Spaß beim Codieren!
Dieses Projekt wurde als Teil meiner kontinuierlichen Reise zur Verbesserung meiner Webentwicklungsfähigkeiten entwickelt, wobei ich mich auf JavaScript und DOM-Manipulation konzentrierte.
Das obige ist der detaillierte Inhalt vonErstellen Sie eine Temperaturkonverter-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
