Bina Laman Web Penukar Suhu

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

• 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:

1. Klon repositori:
   

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

2. Buka direktori projek:
   

   cd Temperature-Converter
   

3. Jalankan projek:

   • Buka fail index.html dalam pelayar web untuk mula menggunakan Penukar Suhu.

Penggunaan

1. Buka tapak web dalam penyemak imbas web.
2. Masukkan nilai suhu sama ada dalam medan masukan Celsius, Fahrenheit atau Kelvin.
3. Lihat nilai yang ditukar dikemas kini secara automatik dalam medan yang sepadan.
4. 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:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    acd8feeb3a0ea7477b979779de32785a
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Temperature Converter6e916e0f7d1e588d4f442bf645aedb2f
    d8b7823904473d155afe66ded7e78f93
    5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    4492840997c74db10011ac8717ea6ac2
      9947948bd0c7f33255136b5b9e12c219
    a6a9c6d3f311dabb528ad355798dc27d
    4883ec0eb33c31828b7c767c806e14c7
      8aa91ccc1781f6d086dd693d1ccd2e49Temperature Converter473f0a7621bec819994bb5020d29372a
      5af4639a3b4aa67ddb14f778e2191314
        4f3b9da5e46787dc85d5626accbd48a5Celsius:8c1ecd4bb896b2264e0711597d40766c
        1af2da99b7d2b2ac0ca2620ea43ea8f3
      16b28748ea4df4d9c2150843fecfba68
      5af4639a3b4aa67ddb14f778e2191314
        79830ae63548443415aa4d7f9c38b8d2Fahrenheit:8c1ecd4bb896b2264e0711597d40766c
        c21b76a69f2b20dcfa863aa9b2f20cba
      16b28748ea4df4d9c2150843fecfba68
      5af4639a3b4aa67ddb14f778e2191314
        4033c6ff5b61c7068afe78fdf1824b20Kelvin:8c1ecd4bb896b2264e0711597d40766c
        7506eb57d1d6fd93dfc9a1c28bbb6cf4
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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

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

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!