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

導入

開発者の皆さん、こんにちは！私の最新プロジェクトであるウェイトコンバータをご紹介できることを嬉しく思います。このプロジェクトは、ユーザーが体重をポンドからキログラムに変換するのに役立つ、シンプルかつ実用的なツールです。これは、特にユーザー入力、計算、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: 重み変換と入力検証のロジックを処理します。

インストール

プロジェクトを開始するには、次の手順に従います:

1. リポジトリのクローンを作成します:
   

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

2. プロジェクト ディレクトリを開きます:
   

   cd Weight-Converter
   

3. プロジェクトを実行します:

   • Web ブラウザでindex.html ファイルを開いて、重みコンバータを使用します。

使用法

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

コードの説明

HTML

index.html ファイルは、入力フィールドや結果表示を含む重みコンバータの構造を設定します。スニペットは次のとおりです:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Weight Converter6e916e0f7d1e588d4f442bf645aedb2f
    d8b7823904473d155afe66ded7e78f93
    5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
      4a249f0d628e2318394fd9b75b4636b1Weight Converter473f0a7621bec819994bb5020d29372a
      1adfcf403e84ee950da4e51ec7bcc58ePounds8c1ecd4bb896b2264e0711597d40766c
      2bd967a228ad4dd6dd46bd4135780e50
      e388a4556c0f65e1904146cc1a846beeYour weight in kg is: 1d8fe9c7fe60ca65fea7ef18556b479354bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3
      fcc3d86900ee5e367762a3d4e4f4c3eb94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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 2d1b547ac038f694c7ef60a480b9dfa0 {
      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 の可能性を探ることができる楽しいプロジェクトでした。このプロジェクトが、日常の作業を容易にする同様のツールを作成するきっかけとなることを願っています。ニーズに合わせてコードを自由に探索、カスタマイズ、改善してください。コーディングを楽しんでください!

クレジット

このプロジェクトは、ユーザー入力処理と DOM 操作のための JavaScript の実用的なアプリケーションとして開発されました。

著者

• アビシェク・グルジャル
  • GitHub プロフィール

以上が体重換算ウェブサイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。