Celsius to Fahrenheit Converter

Live Preview

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Celsius to Fahrenheit Converter</title>
  
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1>🌡️ Celsius to Fahrenheit (°C to °F) Conversion</h1>
    <form id="converter-form">
      <!-- Dropdown Menu -->
      <div class="form-group">
        <label for="unit">Temperature</label>
        <select id="unit">
          <option value="celsius">Celsius (°C) to Fahrenheit (°F)</option>
          <option value="fahrenheit">Fahrenheit (°F) to Celsius (°C)</option>
        </select>
      </div>

      <!-- Input Field -->
      <div class="form-group">
        <label for="input-value">Celsius</label>
        <input type="number" id="input-value" placeholder="Enter Celsius value" required>
        <span class="unit-display">°C</span>
      </div>

      <!-- Result Box -->
      <div class="form-group">
        <label for="result">Result</label>
        <div class="result-box">
          <input type="text" id="result" readonly>
          <button type="button" id="copy-btn">Copy</button>
        </div>
      </div>

      <!-- Calculation Steps Box -->
      <div class="steps-box">
        <h3>Calculation Steps</h3>
        <p id="steps"></p>
      </div>

      <!-- Buttons -->
      <div class="button-group">
        <button type="button" id="reset-btn">Reset</button>
        <button type="button" id="swap-btn">Swap</button>
      </div>
    </form>
  </div>
</body>
</html>

CSS

/* styles.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.container {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

input[type="number"], select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.unit-display {
  margin-left: 10px;
  font-size: 16px;
}

.result-box {
  display: flex;
  align-items: center;
}

#result {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f5f5f5;
  font-size: 16px;
}

#copy-btn {
  margin-left: 10px;
  padding: 10px 15px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#copy-btn:hover {
  background-color: #0056b3;
}

.steps-box {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.steps-box h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.button-group {
  display: flex;
  gap: 10px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

#reset-btn {
  background-color: #333;
  color: #fff;
}

#reset-btn:hover {
  background-color: #555;
}

#swap-btn {
  background-color: #28a745;
  color: #fff;
}

#swap-btn:hover {
  background-color: #218838;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
  h1 {
    font-size: 20px;
  }

  .container {
    padding: 20px;
  }
}

// script.js
document.addEventListener('DOMContentLoaded', () => {
  const unitSelect = document.getElementById('unit');
  const inputValue = document.getElementById('input-value');
  const resultField = document.getElementById('result');
  const copyBtn = document.getElementById('copy-btn');
  const resetBtn = document.getElementById('reset-btn');
  const swapBtn = document.getElementById('swap-btn');
  const stepsText = document.getElementById('steps');
  const unitDisplay = document.querySelector('.unit-display');

  // Update UI based on selected unit
  unitSelect.addEventListener('change', () => {
    updateUI();
    convertTemperature();
  });

  // Convert temperature as user types
  inputValue.addEventListener('input', convertTemperature);

  // Copy result to clipboard
  copyBtn.addEventListener('click', () => {
    resultField.select();
    document.execCommand('copy');
    alert('Result copied to clipboard!');
  });

  // Reset all fields
  resetBtn.addEventListener('click', () => {
    inputValue.value = '';
    resultField.value = '';
    stepsText.textContent = '';
  });

  // Swap conversion units
  swapBtn.addEventListener('click', () => {
    const currentUnit = unitSelect.value;
    unitSelect.value = currentUnit === 'celsius' ? 'fahrenheit' : 'celsius';
    updateUI();
    convertTemperature();
  });

  // Update UI labels and placeholders
  function updateUI() {
    const isCelsius = unitSelect.value === 'celsius';
    inputValue.placeholder = isCelsius ? 'Enter Celsius value' : 'Enter Fahrenheit value';
    unitDisplay.textContent = isCelsius ? '°C' : '°F';
  }

  // Convert temperature
  function convertTemperature() {
    const value = parseFloat(inputValue.value);
    if (isNaN(value)) {
      resultField.value = '';
      stepsText.textContent = '';
      return;
    }

    const isCelsius = unitSelect.value === 'celsius';
    let result, steps;

    if (isCelsius) {
      result = (value * 9 / 5) + 32;
      steps = `${value}°C × 9/5 + 32 = ${result.toFixed(2)}°F`;
    } else {
      result = (value - 32) * 5 / 9;
      steps = `(${value}°F - 32) × 5/9 = ${result.toFixed(2)}°C`;
    }

    resultField.value = result.toFixed(2);
    stepsText.textContent = steps;
  }
});

Celsius to Fahrenheit Converter

About Us

#buttons=(Accept !) #days=(20)

Contact form

Celsius to Fahrenheit Converter

Related Pages

E-Commerce Landing Page

#buttons=(Accept !) #days=(20)

Contact form