建立一個溫度轉換器網站

介紹

各位開發者大家好！我很高興分享我的最新項目：實用的溫度轉換器。該專案非常適合希望透過處理使用者輸入、執行轉換和動態更新 DOM 來增強 JavaScript 技能的人。無論您是初學者還是經驗豐富的開發人員，此溫度轉換器都是了解單位轉換基礎知識的絕佳項目。

項目概況

溫度轉換器是一個基於網路的應用程序，允許用戶輕鬆地在攝氏度、華氏度和開爾文之間轉換溫度。此專案示範如何建立互動式使用者介面、處理計算並向使用者提供即時回饋。

特徵

• 使用者友善的介面：簡單直覺的設計，易於使用。
• 即時轉換：輸入溫度值時立即轉換。
• 響應式設計：佈局適應不同的螢幕尺寸，在桌面和行動裝置上提供無縫體驗。
• 多單位支援：在攝氏度、華氏度和開爾文之間轉換。

使用的技術

• HTML：建立網頁和輸入元素。
• CSS：設定介面樣式，確保簡潔且響應靈敏的設計。
• JavaScript：處理轉換邏輯並即時更新溫度值。

專案結構

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

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

• index.html：包含溫度轉換器的 HTML 結構。
• styles.css：包含 CSS 樣式以增強轉換器的外觀。
• script.js：管理轉換邏輯與動態更新。

安裝

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

1. 複製儲存庫：
   

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

2. 開啟專案目錄:
   

   cd Temperature-Converter
   

3. 運行項目:

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

用法

1. 在網頁瀏覽器中開啟網站。
2. 在攝氏度、華氏度或開爾文輸入欄位中輸入溫度值。
3. 查看轉換後的值在對應欄位中自動更新。
4. 如果您想開始新的轉換，請重設欄位。

程式碼說明

超文本標記語言

index.html 檔案提供了溫度轉換器的基本結構，包括攝氏度、華氏度和開爾文的輸入欄位。這是一個片段：

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

styles.css 檔案設定溫度轉換器的樣式，提供乾淨且響應式的佈局。以下是一些關鍵樣式：

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

script.js 檔案處理轉換邏輯，依照使用者輸入更新溫度值。這是一個片段：

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

現場演示

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

結論

建立這個溫度轉換器是一次有益的經歷，它增強了我對 JavaScript 以及如何建立互動式 Web 應用程式的理解。我希望這個專案能夠激勵您進一步探索並建立自己的轉換工具。快樂編碼！

製作人員

這個專案是我不斷提升 Web 開發技能的一部分，專注於 JavaScript 和 DOM 操作。

作者

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

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