Конвертер температуры с использованием HTML CSS и JavaScript

Опубликовано: 31 Декабря, 2022

В этой статье мы увидим преобразование температуры между градусами Цельсия, Фаренгейта и Кельвина с использованием HTML CSS и JavaScript. Температура обычно измеряется в градусах, то есть в градусах по Цельсию, в градусах Фаренгейта и Кельвина.

Цельсий является стандартной единицей измерения температуры по шкале Цельсия и обозначается символом °C.

В качестве единицы измерения Фаренгейта используется градус Фаренгейта, который обозначается символом °F.

Кельвин является международно признанным стандартом для научного измерения температуры. Это абсолютная температурная шкала, полученная путем сдвига шкалы Цельсия на -273,15°, чтобы совместить абсолютный ноль с 0К.

Следующие примеры отображают 0°C в градусах Фаренгейта и Кельвина:

Input: 0 in Celsius
Output: 32 in Fahrenheit and 273.15 in Kelvin

Input: 0 in Fahrenheit
Output: -17.78 in Celsius and 255.37 in Kelvin

Input: 0 in Kelvin
Output: -273.15 in Celsius and -459.67 in Fahrenheit

Формула преобразования шкалы Цельсия в шкалу Фаренгейта и шкалу Кельвина:

T(°F) = (T(°C) * 9)/5 + 32
T(°K) = T(°C) + 273.15

Формула преобразования шкалы Фаренгейта в шкалу Цельсия и шкалу Кельвина:

T(°C) = ((T(°F) - 32) * 5) / 9
T(°K) = (T(°F)  - 32) * 5 / 9 + 273.15

Формула преобразования шкалы Кельвина в шкалу Цельсия и шкалу Фаренгейта:

T(°C) = (T(°K) - 273.15
T(°F) = (T(°K) - 273.15) * 9 / 5 + 32;

Подход :

Создайте один контейнер, в котором присутствуют все элементы.
Внутри этого контейнера добавьте 3 поля ввода, одно для градусов Цельсия, а другое для градусов Фаренгейта и Кельвина.
Теперь стиль, который вы хотите, я добавляю этот контейнер в центре.
Теперь добавлен Javascript, который преобразует следующие значения температуры (градусы Фаренгейта, Цельсия, Кельвина) в соответствующие оставшиеся два результата температуры в различных полях ввода .

Пример: этот пример иллюстрирует базовое преобразование температуры между градусами Цельсия, Фаренгейта и Кельвина с использованием HTML, CSS и JS.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                         initial-scale=1.0">
    <title>
          Temperature Conversion between
          Celsius, Fahrenheit & Kelvin
      </title>
 
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }
 
        .container {
            width: 100%;
            height: 100vh;
            background-image:
              linear-gradient(rgb(140, 219, 140), rgb(20, 141, 20));
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
 
        .container h1 {
            color: green;
            font-weight: 700;
            font-size: 25px;
            text-align: center;
        }
 
        .converter-row {
            display: flex;
            width: 40%;
            justify-content: space-between;
            align-items: center;
            background: rgb(0, 56, 0);
            border-radius: 10px;
            padding: 50px 20px;
        }
 
        .col {
            flex-basis: 32%;
            text-align: center;
        }
 
        .col label {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 10px;
            color: #fff;
        }
 
        .col input {
            width: 150px;
            height: 30px;
            background: white;
            border-radius: 5px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h1>GeeksforGeeks <br>
            Temperature Converter</h1>
        <div class="converter-row">
            <div class="col">
                <label>Fahrenheit</label>
                <input type="number" id="fahrenheit">
            </div>
 
            <div class="col">
                <label>Celsius</label>
                <input type="number" id="celsius">
            </div>
 
            <div class="col">
                <label>Kelvin</label>
                <input type="number" id="kelvin">
            </div>
        </div>
    </div>
 
    <script>
        let celsius = document.getElementById("celsius");
        let fahrenheit = document.getElementById("fahrenheit");
        let kelvin = document.getElementById("kelvin");
        celsius.oninput = function () {
            let f = (parseFloat(celsius.value) * 9) / 5 + 32;
            fahrenheit.value = parseFloat(f.toFixed(2));
 
            let k = (parseFloat(celsius.value) + 273.15);
            kelvin.value = parseFloat(k.toFixed(2));
        }
        fahrenheit.oninput = function () {
            let c = ((parseFloat(
                fahrenheit.value) - 32) * 5) / 9;
            celsius.value = parseFloat(c.toFixed(2));
 
            let k = (parseFloat(
                fahrenheit.value) - 32) * 5 / 9 + 273.15;
            kelvin.value = parseFloat(k.toFixed(2));
        }
        kelvin.oninput = function () {
            let f = (parseFloat(
                kelvin.value) - 273.15) * 9 / 5 + 32;
            fahrenheit.value = parseFloat(f.toFixed(2));
 
            let c = (parseFloat(kelvin.value) - 273.15);
            celsius.value = parseFloat(c.toFixed(2));
        }
    </script>
</body>
</html>

Выход:

Ссылка на GitHub: https://github.com/priyansh70/Temperature-Converter

JavaScript HTML CSS

Конвертер температуры с использованием HTML CSS и JavaScript

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ