CC ↔ Penukar HP

CC ↔ Penukar HP

Dalam artikel ini, kami akan memecahkan kod di sebalik penukar CC ↔ HP (Cubic Centimeters ↔ Horsepower). Alat yang ringkas namun praktikal ini membantu pengguna menukar antara dua unit penting untuk kenderaan dan enjin. Kami akan menelusuri keseluruhan kod, menerangkan setiap bahagian secara terperinci, dan meneroka logik di sebalik penukaran CC ↔ HP. Jika anda seorang pembangun, anda akan menghargai logik, struktur dan peluang untuk menambah baik kod!

Tetapi sebelum kita menyelam, uji kod sendiri dengan mengklik pada pautan di bawah dan mencuba kalkulator untuk diri sendiri. ?

? Uji Kod Di Sini! ?⚡ ?

Ciri Utama Penukar CC ↔ HP:

• Faktor Penukaran: Faktor boleh disesuaikan yang menentukan cara CC dan HP berkaitan.
• Jenis Penukaran: Keupayaan untuk bertukar antara menukar daripada CC kepada HP dan sebaliknya.
• Input Interaktif: Dua medan input yang ditunjukkan berdasarkan jenis penukaran yang dipilih.
• Pengendalian Ralat: Mesej yang membimbing pengguna untuk memasukkan nilai yang sah.

Pecahan Terperinci Kod

1. Struktur HTML:

Bahagian HTML kod mentakrifkan struktur antara muka CC ↔ HP Converter.

    <div>

<p>- <strong>Conversion Factor Input:</strong> This input allows users to specify the conversion factor, which defaults to 15 CC = 1 HP.</p>

<p>- <strong>Conversion Type Selector:</strong> This dropdown lets users switch between CC to HP and HP to CC conversions.</p>

<p>- <strong>CC and HP Input Fields:</strong> Depending on the selection in the dropdown, the relevant input field (either for CC or HP) will be displayed for user input.</p>

<p>- <strong>Convert Button:</strong> The button that triggers the conversion when clicked.</p>

<p>- <strong>Result Display:</strong> A place to show the result of the conversion.</p>

<p>- <strong>Error Message:</strong> This is where error messages will be displayed if the user enters invalid data.</p>

<h3>
  
  
  2. CSS Styling:
</h3>

<p>The styles provide a clean and user-friendly design for the converter. Here's the key CSS used for the layout:</p>

<pre class="brush:php;toolbar:false">    .cc-hp-body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
      background-color: #f4f4f4;
    }

    .cc-hp-calculator-container {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
      background: #fff;
    }

- Penggayaan Umum: Halaman keseluruhan menggunakan latar belakang yang terang dengan teks berpusat dan reka bentuk yang bersih dan minimum.

- Bekas Kalkulator: Bekas berpusat dengan lebar tetap 400px dan termasuk pelapik untuk jarak.

- Butang dan Input: Ini digayakan menjadi besar dan mudah untuk berinteraksi, dengan kesan tuding untuk butang.

3. Fungsi JavaScript:

Di sinilah keajaiban sebenar berlaku. Fungsi JavaScript mengendalikan input pengguna, mengira penukaran dan memaparkan hasilnya.

toggleInputs Fungsi:

Fungsi ini menunjukkan dan menyembunyikan medan input yang sesuai berdasarkan jenis penukaran yang dipilih (CC ke HP atau HP ke CC).

    function toggleInputs() {
      const conversionType = document.getElementById("conversion-type").value;
      const ccInputGroup = document.getElementById("cc-input-group");
      const hpInputGroup = document.getElementById("hp-input-group");

      if (conversionType === "ccToHp") {
        ccInputGroup.style.display = "block";
        hpInputGroup.style.display = "none";
      } else {
        ccInputGroup.style.display = "none";
        hpInputGroup.style.display = "block";
      }
    }

- Logik: Jika pengguna memilih "CC ke HP," medan input CC akan ditunjukkan. Jika mereka memilih "HP ke CC", medan input HP akan dipaparkan.

tukar Fungsi:

Fungsi ini melakukan penukaran berdasarkan nilai input dan faktor penukaran.

    function convert() {
      const conversionFactor = parseFloat(document.getElementById("conversion-factor").value);
      const conversionType = document.getElementById("conversion-type").value;
      const errorMessage = document.getElementById("error-message");
      const resultDisplay = document.getElementById("result-display");

      // Clear previous error and result
      errorMessage.textContent = "";
      resultDisplay.textContent = "";

      if (conversionType === "ccToHp") {
        const ccValue = parseFloat(document.getElementById("cc-input").value);
        if (isNaN(ccValue) || ccValue <= 0) {
          errorMessage.textContent = "Please enter a valid CC value greater than 0.";
          return;
        }
        const hpValue = ccValue / conversionFactor;
        resultDisplay.textContent = `${ccValue} CC is approximately ${hpValue.toFixed(2)} HP.`;
      } else if (conversionType === "hpToCc") {
        const hpValue = parseFloat(document.getElementById("hp-input").value);
        if (isNaN(hpValue) || hpValue <= 0) {
          errorMessage.textContent = "Please enter a valid HP value greater than 0.";
          return;
        }
        const ccValue = hpValue * conversionFactor;
        resultDisplay.textContent = `${hpValue} HP is approximately ${ccValue.toFixed(2)} CC.`;
      }
    }

- Logik: Ia mula-mula mendapatkan semula faktor penukaran dan jenis penukaran yang dipilih. Ia kemudian menyemak sama ada pengguna telah memasukkan nilai yang sah dan mengira keputusan berdasarkan formula (CC / conversionFactor untuk CC ke HP, HP * conversionFactor untuk HP ke CC).

Cadangan Penambahbaikan:

Walaupun kod berfungsi dengan baik, sentiasa ada cara untuk menambah baik dan meningkatkan fungsi. Berikut ialah beberapa idea:

• Tambah sokongan penukaran unit: Benarkan pengguna menukar unit lain (cth. Liter kepada CC).
• Peningkatan Pengesahan: Tambahkan semakan untuk nilai melampau atau input yang sangat besar.
• Pengoptimuman mudah alih: Pastikan reka letak berfungsi dengan lancar pada skrin yang lebih kecil.
• Penambahbaikan Mesej Ralat: Sediakan lebih banyak mesej ralat deskriptif untuk pengalaman pengguna yang lebih baik.

Jika anda mempunyai sebarang cadangan tentang cara menambah baik kod atau ciri yang anda ingin lihat, sila tinggalkan pendapat anda dalam ulasan di bawah! ?

Dengan mengikuti panduan ini, anda kini seharusnya mempunyai pemahaman yang baik tentang cara penukar CC ↔ HP berfungsi, dan cara anda berpotensi menambah baik dan memanjangkan fungsi. Selamat mengekod! ?‍???‍?

Atas ialah kandungan terperinci CC ↔ Penukar HP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!