建立一個體重轉換器網站

介紹

各位開發者大家好！我很高興向大家介紹我的最新項目：重量轉換器。這個項目是一個簡單而實用的工具，可以幫助用戶將體重從磅轉換為公斤。這是練習 JavaScript 的絕佳方法，特別是在處理使用者輸入、計算和 DOM 操作方面。無論您是 JavaScript 新手還是正在尋找一個有趣、快速的項目，這個權重轉換器都是您的完美選擇。

項目概況

重量轉換器是一個網路應用程序，允許使用者輸入以磅為單位的重量並獲得以公斤為單位的等效重量。此專案展示如何使用表單輸入、在 JavaScript 中執行計算以及根據使用者輸入動態更新網頁內容。

特徵

• 使用者輸入處理：接受以磅為單位的使用者輸入並將其轉換為公斤。
• 驗證：顯示無效輸入的錯誤訊息（例如，非數字或負值）。
• 即時計算：隨著使用者輸入立即更新轉換結果。
• 響應式設計：佈局設計為響應式，可在不同裝置上提供一致的體驗。

使用的技術

• HTML：建構權重轉換器介面。
• CSS：設定轉換器的樣式，包括響應式佈局和錯誤處理。
• JavaScript：管理使用者輸入驗證、權重轉換與 DOM 更新。

專案結構

以下是專案結構的快速瀏覽：

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

• index.html：包含權重轉換器的 HTML 結構。
• styles.css：包含版面配置和響應式設計的 CSS 樣式。
• script.js：處理權重轉換與輸入驗證的邏輯。

安裝

要開始該項目，請按照以下步驟操作：

1. 複製儲存庫：
   

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

2. 開啟專案目錄:
   

   cd Weight-Converter
   

3. 運行項目:

   • 在網頁瀏覽器中開啟index.html檔案以使用權重轉換器。

用法

1. 在網頁瀏覽器中開啟網站。
2. 在輸入欄位中輸入重量（以磅為單位）。
3. 查看頁面上顯示的轉換後的重量（以公斤為單位）。如果輸入無效，將會出現錯誤訊息。

程式碼說明

超文本標記語言

index.html 檔案設定了權重轉換器的結構，包括輸入欄位和結果顯示。這是一個片段：

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Weight Converter6e916e0f7d1e588d4f442bf645aedb2f
    d8b7823904473d155afe66ded7e78f93
    5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
      4a249f0d628e2318394fd9b75b4636b1Weight Converter473f0a7621bec819994bb5020d29372a
      1adfcf403e84ee950da4e51ec7bcc58ePounds8c1ecd4bb896b2264e0711597d40766c
      2bd967a228ad4dd6dd46bd4135780e50
      e388a4556c0f65e1904146cc1a846beeYour weight in kg is: 1d8fe9c7fe60ca65fea7ef18556b479354bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3
      fcc3d86900ee5e367762a3d4e4f4c3eb94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

styles.css 檔案設定權重轉換器的樣式，包括輸入欄位、錯誤訊息和佈局。以下是一些關鍵樣式：

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

JavaScript

script.js 檔案管理轉換邏輯、輸入驗證和更新 DOM。這是一個片段：

const inputEl = document.getElementById("input");
const errorEl = document.getElementById("error");
const resultEl = document.getElementById("result");
let errorTime;
let resultTime;

function updateResults() {
  if (inputEl.value 2d1b547ac038f694c7ef60a480b9dfa0 {
      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);

現場演示

您可以在此處查看重量轉換器的現場示範。

結論

建立這個權重轉換器是一個令人愉快的項目，它讓我能夠探索 JavaScript 在處理即時輸入驗證和計算方面的潛力。我希望這個專案能夠激勵您創建類似的工具，使日常任務變得更加輕鬆。請隨意探索、客製化和改進程式碼以滿足您的需求。快樂編碼！

製作人員

這個專案是作為 JavaScript 的實際應用程式開發的，用於使用者輸入處理和 DOM 操作。

作者

• 阿布舍克·古賈爾
  • GitHub 簡介

以上是建立一個體重轉換器網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！