建立一個體重轉換器網站-css教學-PHP中文網

首頁

web前端

css教學

建立一個體重轉換器網站

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 18, 2024 am 06:32 AM

Build a Weight Converter Website

介紹

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

項目概況

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

特徵

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

使用的技術

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

專案結構

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

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

登入後複製

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

安裝

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

複製儲存庫：

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

登入後複製

開啟專案目錄:
```
cd Weight-Converter
```
登入後複製
運行項目:
- 在網頁瀏覽器中開啟index.html檔案以使用權重轉換器。

用法

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

程式碼說明

超文本標記語言

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weight Converter</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <h1>Weight Converter</h1>
      <label for="input">Pounds</label>
      <input
        type="number"
        id="input"
        class="input"
        step="0.1"
        placeholder="Enter number"
      />
      <p>Your weight in kg is: <span id="result"></span></p>
      <p class="error" id="error"></p>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

登入後複製

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 <= 0 || isNaN(inputEl.value)) {
    errorEl.innerText = "Please enter a valid number!";
    clearTimeout(errorTime);
    errorTime = setTimeout(() => {
      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);

登入後複製