温度コンバータの Web サイトを構築する

導入

開発者の皆さん、こんにちは！私の最新プロジェクト、実用的な温度コンバータを共有できることを嬉しく思います。このプロジェクトは、ユーザー入力の操作、変換の実行、DOM の動的更新によって JavaScript スキルを向上させたいと考えている人に最適です。初心者でも経験豊富な開発者でも、この温度コンバータは単位変換の基本を理解するのに最適なプロジェクトです。

プロジェクト概要

温度コンバータは、ユーザーが温度を摂氏、華氏、ケルビン間で簡単に変換できるようにする Web ベースのアプリケーションです。このプロジェクトでは、インタラクティブなユーザー インターフェイスを作成し、計算を処理し、ユーザーにリアルタイムのフィードバックを提供する方法を示します。

特徴

• ユーザーフレンドリーなインターフェイス: 使いやすさを追求したシンプルで直感的なデザイン。
• リアルタイム変換: 温度値を入力するとすぐに変換されます。
• レスポンシブ デザイン: レイアウトはさまざまな画面サイズに適応し、デスクトップとモバイル デバイスの両方でシームレスなエクスペリエンスを提供します。
• 複数単位のサポート: 摂氏、華氏、ケルビンの間で変換します。

使用されている技術

• HTML: Web ページと入力要素を構造化します。
• 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. プロジェクトを実行します:

   • Web ブラウザでindex.html ファイルを開いて、Temperature Converter の使用を開始します。

使用法

1. Web ブラウザで Web サイトを開きます。
2. 摂氏、華氏、ケルビンのいずれかの入力フィールドに温度値を入力します。
3. 変換された値を表示 対応するフィールドが自動的に更新されます。
4. 新しい変換を開始する場合は、フィールドをリセットします。

コードの説明

HTML

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 アプリケーションの作成方法についての理解を強化する、やりがいのある経験でした。このプロジェクトが、あなたがさらに研究を進め、独自の変換ツールを構築するきっかけとなることを願っています。コーディングを楽しんでください!

クレジット

このプロジェクトは、JavaScript と DOM 操作に焦点を当てて、Web 開発スキルを向上させるための私の継続的な取り組みの一環として開発されました。

著者

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

以上が温度コンバータの Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。