Temperature Converter

Arcoder07-000001

This is a temperature converter application that allows users to convert between various temperature units such as Celsius, Fahrenheit, Kelvin, and others. Below is the HTML, CSS, and JavaScript code that powers the converter.

HTML 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Temperature Converter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #ff9966, #ff5e62);
        }
        .converter-container {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            width: 100%;
            animation: fadeIn 1s ease-in-out;
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }
        input, select {
            width: calc(100% - 20px);
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s;
        }
        input:focus, select:focus {
            border-color: #007BFF;
        }
        button {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            background: #007BFF;
            color: white;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s;
        }
        button:hover {
            background: #0056b3;
        }
        h2 {
            text-align: center;
            color: #333;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="converter-container">
        <h1>Temperature Converter</h1>
        <div class="form-group">
            <label for="inputValue">Enter Temperature:</label>
            <input type="number" id="inputValue" placeholder="Enter value">
        </div>
        <div class="form-group">
            <label for="inputUnit">From Unit:</label>
            <select id="inputUnit">
                <option value="Celsius">Celsius</option>
                <option value="Fahrenheit">Fahrenheit</option>
                <option value="Kelvin">Kelvin</option>
                <option value="Rankine">Rankine</option>
                <option value="Delisle">Delisle</option>
                <option value="Réaumur">Réaumur</option>
                <option value="Rømer">Rømer</option>
            </select>
        </div>
        <div class="form-group">
            <label for="outputUnit">To Unit:</label>
            <select id="outputUnit">
                <option value="Celsius">Celsius</option>
                <option value="Fahrenheit">Fahrenheit</option>
                <option value="Kelvin">Kelvin</option>
                <option value="Rankine">Rankine</option>
                <option value="Delisle">Delisle</option>
                <option value="Réaumur">Réaumur</option>
                <option value="Rømer">Rømer</option>
            </select>
        </div>
        <button onclick="convertTemperature()">Convert</button>
        <h2 id="result"></h2>
    </div>

    <script>
        function convertTemperature() {
            const inputValue = parseFloat(document.getElementById('inputValue').value);
            const inputUnit = document.getElementById('inputUnit').value;
            const outputUnit = document.getElementById('outputUnit').value;
            
            if (isNaN(inputValue)) {
                alert('Please enter a valid temperature');
                return;
            }
            
            let celsius;
            
            switch(inputUnit) {
                case 'Celsius':
                    celsius = inputValue;
                    break;
                case 'Fahrenheit':
                    celsius = (inputValue - 32) * 5/9;
                    break;
                case 'Kelvin':
                    celsius = inputValue - 273.15;
                    break;
                case 'Rankine':
                    celsius = (inputValue - 491.67) * 5/9;
                    break;
                case 'Delisle':
                    celsius = 100 - inputValue * 2/3;
                    break;
                case 'Réaumur':
                    celsius = inputValue * 5/4;
                    break;
                case 'Rømer':
                    celsius = (inputValue - 7.5) * 40/21;
                    break;
            }
            
            let result;
            
            switch(outputUnit) {
                case 'Celsius':
                    result = celsius;
                    break;
                case 'Fahrenheit':
                    result = celsius * 9/5 + 32;
                    break;
                case 'Kelvin':
                    result = celsius + 273.15;
                    break;
                case 'Rankine':
                    result = (celsius + 273.15) * 9/5;
                    break;
                case 'Delisle':
                    result = (100 - celsius) * 3/2;
                    break;
                case 'Réaumur':
                    result = celsius * 4/5;
                    break;
                case 'Rømer':
                    result = celsius * 21/40 + 7.5;
                    break;
            }
            
            document.getElementById('result').textContent = inputValue + ' ' + inputUnit + ' is equal to ' + result.toFixed(2) + ' ' + outputUnit;
        }
    </script>
</body>
</html>

Comments

Post a Comment