<header>
  <h2 class="title">Конвертер температур</h2>
  <p class="description">Конвертує значення між Цельсієм і Фаренгейтом.</p>
</header>
<main>
  <div class="result">
    <!-- Форма для введення значення -->
    <form id="converterForm">
      <label for="temperature">Введіть температуру:</label>
      <input type="number" id="temperature" name="temperature" required>
      
      <label for="conversionType">Тип конвертації:</label>
      <select id="conversionType" name="conversionType">
        <option value="toCelsius">З Фаренгейта в Цельсій</option>
        <option value="toFahrenheit">З Цельсія в Фаренгейт</option>
      </select>
      
      <button type="button" id="convertBtn">Конвертувати</button>
    </form>
    <!-- Місце для результату -->
    <p id="resultText">Результат: <span id="resultValue">-</span></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

form label {
  display: block;
  margin: 10px 0 5px;
}

form input,
form select {
  padding: 5px;
  margin-bottom: 10px;
  width: 100%;
  max-width: 300px;
}

form button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

form button:hover {
  background-color: #0056b3;
}

#resultText {
  margin-top: 15px;
  font-weight: bold;
  font-size: 1.2em;
}

// Функція для конвертації температури
function convertTemperature(value, type) {
  if (type === "toCelsius") {
    return ((value - 32) * 5) / 9; // З Фаренгейта в Цельсій
  } else if (type === "toFahrenheit") {
    return (value * 9) / 5 + 32; // З Цельсія в Фаренгейт
  }
  return null; // Якщо тип некоректний
}

// Обробник кнопки конвертації
document.getElementById("convertBtn").addEventListener("click", function () {
  // Отримуємо введені значення
  const temperature = parseFloat(document.getElementById("temperature").value);
  const conversionType = document.getElementById("conversionType").value;

  // Перевіряємо, чи введено число
  if (isNaN(temperature)) {
    alert("Будь ласка, введіть коректне число!");
    return;
  }

  // Виконуємо конвертацію
  const result = convertTemperature(temperature, conversionType);

  // Відображаємо результат
  document.getElementById("resultValue").textContent = result.toFixed(2);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.