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

首頁

web前端

css教學

建立一個溫度轉換器網站

王林

Aug 19, 2024 am 04:28 AM

Build a Temperature Converter Website

介紹

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

項目概況

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

特徵

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

使用的技術

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

專案結構

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

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

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

安裝

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

複製儲存庫：

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

開啟專案目錄:
```
cd Temperature-Converter
```
運行項目:
- 在網頁瀏覽器中開啟index.html 檔案以開始使用溫度轉換器。

用法

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

程式碼說明

超文本標記語言

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


  
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temperature Converter</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
  
  
    <video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
      <source src="./images/bg.mp4" type="video/mp4">
    </source></video>
    <div class="container">
      <h1 id="Temperature-Converter">Temperature Converter</h1>
      <div class="temp-container">
        <label for="celsius">Celsius:</label>
        <input onchange="computeTemp(event)" type="number" name="celsius" id="celsius" placeholder="Enter Temperature" class="input">
      </div>
      <div class="temp-container">
        <label for="fahrenheit">Fahrenheit:</label>
        <input onchange="computeTemp(event)" type="number" name="fahrenheit" id="fahrenheit" placeholder="Enter Temperature" class="input">
      </div>
      <div class="temp-container">
        <label for="kelvin">Kelvin:</label>
        <input onchange="computeTemp(event)" type="number" name="kelvin" id="kelvin" placeholder="Enter Temperature" class="input">
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>

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