建立一个体重转换器网站-css教程-PHP中文网

建立一个体重转换器网站

WBOY

发布： 2024-08-18 06:32:32

原创

939 人浏览过

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

登录后复制