温度コンバータの 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 ファイルは、摂氏、華氏、ケルビンの入力フィールドを含む、温度コンバーターの基本構造を提供します。スニペットは次のとおりです:

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

ライブデモ

ここで温度コンバーターのライブデモをチェックできます。

結論

この温度コンバーターの構築は、JavaScript とインタラクティブな Web アプリケーションの作成方法についての理解を強化する、やりがいのある経験でした。このプロジェクトが、あなたがさらに研究を進め、独自の変換ツールを構築するきっかけとなることを願っています。コーディングを楽しんでください!

クレジット

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

著者

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

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