Bina Laman Web Penukar Suhu-tutorial css-php.cn

Bina Laman Web Penukar Suhu

王林

Lepaskan： 2024-08-19 04:28:12

asal

643 orang telah melayarinya

Build a Temperature Converter Website

pengenalan

Helo, rakan pembangun! Saya teruja untuk berkongsi projek terbaharu saya: Penukar Suhu praktikal. Projek ini sesuai untuk mereka yang ingin meningkatkan kemahiran JavaScript mereka dengan bekerja dengan input pengguna, melakukan penukaran dan mengemas kini DOM secara dinamik. Sama ada anda seorang pemula atau pembangun yang berpengalaman, Penukar Suhu ini merupakan projek yang hebat untuk memahami asas penukaran unit.

Gambaran Keseluruhan Projek

Penukar Suhu ialah aplikasi berasaskan web yang membolehkan pengguna menukar suhu antara Celsius, Fahrenheit dan Kelvin dengan mudah. Projek ini menunjukkan cara mencipta antara muka pengguna interaktif, mengendalikan pengiraan dan memberikan maklum balas masa nyata kepada pengguna.

Ciri-ciri

Antara Muka Mesra Pengguna: Reka bentuk yang ringkas dan intuitif untuk kemudahan penggunaan.
Penukaran Masa Nyata: Menukar nilai suhu dengan serta-merta semasa anda memasukkannya.
Reka Bentuk Responsif: Reka letak menyesuaikan diri dengan saiz skrin yang berbeza, memberikan pengalaman yang lancar pada kedua-dua peranti desktop dan mudah alih.
Sokongan Berbilang Unit: Menukar antara Celsius, Fahrenheit dan Kelvin.

Teknologi yang Digunakan

HTML: Menstruktur halaman web dan elemen input.
CSS: Menggayakan antara muka, memastikan reka bentuk yang bersih dan responsif.
JavaScript: Mengendalikan logik penukaran dan mengemas kini nilai suhu dalam masa nyata.

Struktur Projek

Berikut ialah pandangan ringkas pada struktur projek:

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

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk Penukar Suhu.
styles.css: Termasuk gaya CSS untuk meningkatkan penampilan penukar.
script.js: Mengurus logik penukaran dan kemas kini dinamik.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Temperature-Converter
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam pelayar web untuk mula menggunakan Penukar Suhu.

Penggunaan

Buka tapak web dalam penyemak imbas web.
Masukkan nilai suhu sama ada dalam medan masukan Celsius, Fahrenheit atau Kelvin.
Lihat nilai yang ditukar dikemas kini secara automatik dalam medan yang sepadan.
Tetapkan semula medan jika anda ingin memulakan penukaran baharu.

Penerangan Kod

HTML

Fail index.html menyediakan struktur asas Penukar Suhu, termasuk medan input untuk Celsius, Fahrenheit dan Kelvin. Berikut adalah coretan:

<!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>

Salin selepas log masuk

CSS

Fail styles.css menggayakan Penukar Suhu, memberikan reka letak yang bersih dan responsif. Berikut ialah beberapa gaya utama:

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

Salin selepas log masuk

JavaScript

Fail script.js mengendalikan logik penukaran, mengemas kini nilai suhu berdasarkan input pengguna. Berikut adalah coretan:

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

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung Penukar Suhu di sini.

Kesimpulan

Membina Penukar Suhu ini merupakan pengalaman yang bermanfaat, mengukuhkan pemahaman saya tentang JavaScript dan cara membuat aplikasi web interaktif. Saya harap projek ini memberi inspirasi kepada anda untuk meneroka lebih lanjut dan membina alat penukaran anda sendiri. Selamat mengekod!

Kredit

Projek ini telah dibangunkan sebagai sebahagian daripada perjalanan berterusan saya untuk meningkatkan kemahiran pembangunan web saya, memfokuskan pada JavaScript dan manipulasi DOM.

Pengarang

Abhishek Gurjar
- Profil GitHub

Atas ialah kandungan terperinci Bina Laman Web Penukar Suhu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!