体重換算ウェブサイトを構築する-CSSチュートリアル-php.cn

体重換算ウェブサイトを構築する

WBOY

リリース： 2024-08-18 06:32:32

オリジナル

717 人が閲覧しました

Build a Weight Converter Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクトであるウェイトコンバータをご紹介できることを嬉しく思います。このプロジェクトは、ユーザーが体重をポンドからキログラムに変換するのに役立つ、シンプルかつ実用的なツールです。これは、特にユーザー入力、計算、DOM 操作の処理において JavaScript を練習するのに最適な方法です。 JavaScript を初めて使用する場合でも、楽しくて迅速なプロジェクトを探している場合でも、このウェイトコンバーターは最適です。

プロジェクト概要

Weight Converter は、ユーザーがポンド単位で体重を入力し、同等の重量をキログラム単位で取得できる Web アプリケーションです。このプロジェクトでは、フォーム入力の操作方法、JavaScript での計算方法、およびユーザー入力に基づいて Web ページのコンテンツを動的に更新する方法を紹介します。

特徴

ユーザー入力処理: ポンド単位でのユーザー入力を受け入れ、それをキログラムに変換します。
検証: 無効な入力 (数値以外または負の値など) に対するエラーメッセージを表示します。
リアルタイム計算: ユーザーが入力するとすぐに変換結果を更新します。
レスポンシブデザイン: レイアウトはレスポンシブになるように設計されており、デバイス間で一貫したエクスペリエンスを提供します。

使用されている技術

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
```
ログイン後にコピー
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、重みコンバータを使用します。

使用法

Web ブラウザで Web サイトを開きます。
入力フィールドに重量をポンド単位で入力します。
ページに表示される換算重量をキログラム単位で表示します。入力が無効な場合は、エラーメッセージが表示されます。

コードの説明

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

ログイン後にコピー

ライブデモ

ここで Weight Converter のライブデモをチェックできます。

結論

この Weight Converter の構築は、リアルタイムの入力検証と計算の処理における JavaScript の可能性を探ることができる楽しいプロジェクトでした。このプロジェクトが、日常の作業を容易にする同様のツールを作成するきっかけとなることを願っています。ニーズに合わせてコードを自由に探索、カスタマイズ、改善してください。コーディングを楽しんでください!