Temperature Converter

Project Overview

Create a temperature converter that demonstrates these JavaScript concepts:

• Working with numbers and mathematical operations
• Type conversion between strings and numbers
• Form input handling and validation
• Real-time DOM updates
• Formatting numbers with decimal places

What You'll Build

A temperature converter application that:

• Converts between Celsius and Fahrenheit
• Updates results in real-time as users type
• Validates input to ensure only numbers are entered
• Displays formatted results with proper decimal places
• Provides a clean, user-friendly interface

Project Steps

<div class="converter-container">
  <div class="field">
    <label class="label">Celsius</label>
    <div class="control">
      <input type="number" id="celsius" class="input" placeholder="Enter temperature in Celsius">
    </div>
  </div>

  <div class="field">
    <label class="label">Fahrenheit</label>
    <div class="control">
      <input type="number" id="fahrenheit" class="input" placeholder="Enter temperature in Fahrenheit">
    </div>
  </div>

  <div id="result" class="notification is-info is-light mt-4">
    Enter a temperature to see the conversion
  </div>
</div>

// Get DOM elements
const celsiusInput = document.getElementById('celsius');
const fahrenheitInput = document.getElementById('fahrenheit');
const resultDiv = document.getElementById('result');

// Conversion functions
function celsiusToFahrenheit(celsius) {
    return (celsius * 9/5) + 32;
}

function fahrenheitToCelsius(fahrenheit) {
    return (fahrenheit - 32) * 5/9;
}

// Format number to 2 decimal places
function formatNumber(num) {
    return Number(num).toFixed(2);
}

// Update result when Celsius input changes
celsiusInput.addEventListener('input', function() {
    if (this.value === '') {
        fahrenheitInput.value = '';
        resultDiv.textContent = 'Enter a temperature to see the conversion';
        return;
    }

    const celsius = parseFloat(this.value);
    if (isNaN(celsius)) {
        resultDiv.textContent = 'Please enter a valid number';
        return;
    }

    const fahrenheit = celsiusToFahrenheit(celsius);
    fahrenheitInput.value = formatNumber(fahrenheit);
    resultDiv.textContent = `${formatNumber(celsius)}°C = ${formatNumber(fahrenheit)}°F`;
});

// Update result when Fahrenheit input changes
fahrenheitInput.addEventListener('input', function() {
    if (this.value === '') {
        celsiusInput.value = '';
        resultDiv.textContent = 'Enter a temperature to see the conversion';
        return;
    }

    const fahrenheit = parseFloat(this.value);
    if (isNaN(fahrenheit)) {
        resultDiv.textContent = 'Please enter a valid number';
        return;
    }

    const celsius = fahrenheitToCelsius(fahrenheit);
    celsiusInput.value = formatNumber(celsius);
    resultDiv.textContent = `${formatNumber(fahrenheit)}°F = ${formatNumber(celsius)}°C`;
});

.converter-container {
    max-width: 500px;
    margin: 2rem auto;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.field {
    margin-bottom: 1.5rem;
}

.input:focus {
    border-color: #3273dc;
    box-shadow: 0 0 0 2px rgba(50, 115, 220, 0.25);
}

#result {
    text-align: center;
    font-size: 1.2rem;
}

Challenge Yourself

Once you've completed the basic converter, try these enhancements:

• Add Kelvin conversion support
• Create a temperature scale visualization
• Add common temperature reference points (freezing, boiling, etc.)
• Implement a temperature history feature
• Add unit conversion for other measurements (length, weight, etc.)