温度コンバータの Web サイトを構築する-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

王林

Aug 19, 2024 am 04:28 AM

Build a Temperature Converter Website

導入

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

プロジェクト概要

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

特徴

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

使用されている技術

HTML: Web ページと入力要素を構造化します。
CSS: インターフェイスのスタイルを設定し、クリーンで応答性の高いデザインを保証します。
JavaScript: 変換ロジックを処理し、温度値をリアルタイムで更新します。

プロジェクトの構造

プロジェクトの構造を簡単に見てみましょう:

Temperature-Converter/
├── index.html
├── styles.css
└── script.js

ログイン後にコピー

index.html: 温度コンバーターの HTML 構造が含まれています。
styles.css: コンバーターの外観を向上させる CSS スタイルが含まれています。
script.js: 変換ロジックと動的更新を管理します。

インストール

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

リポジトリのクローンを作成します:
```
git clone https://github.com/abhishekgurjar-in/Temperature-Converter.git
```
ログイン後にコピー
プロジェクトディレクトリを開きます:
```
cd Temperature-Converter
```
ログイン後にコピー
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、Temperature Converter の使用を開始します。

使用法

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

コードの説明

HTML

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <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>
  </head>
  <body>
    <video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
      <source src="./images/bg.mp4" type="video/mp4">
    </video>
    <div class="container">
      <h1 class="heading">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>
  </body>
</html>

ログイン後にコピー

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

ログイン後にコピー