temperature converter website done

Aitzaz-Hakro · Feb 14, 2025 · c951e41 · c951e41
1 parent b2e708f
commit c951e41
Show file tree

Hide file tree

Showing 2 changed files with 161 additions and 24 deletions.
diff --git a/TemperatureConverter-Task2/index.html b/TemperatureConverter-Task2/index.html
@@ -5,18 +5,101 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Temperature Converter</title>
     <link rel="stylesheet" href="style.css">
+    <style>
+
+    </style>
 </head>
 <body>
-
-    <div class="container" style="margin-top: 100px;">
-        <div>
-            <p class="temp">Temperature Converter</p>
-       </div>
-
-
-
-
+    <div class="container">
+        <h1>Temperature Converter</h1>
+        <div class="converter">
+            <input type="number" id="inputValue" placeholder="Enter temperature...">
+            <div class="unit-selectors">
+                <select id="fromUnit">
+                    <option value="celsius">Celsius (°C)</option>
+                    <option value="fahrenheit">Fahrenheit (°F)</option>
+                    <option value="kelvin">Kelvin (K)</option>
+                </select>
+                <select id="toUnit">
+                    <option value="fahrenheit">Fahrenheit (°F)</option>
+                    <option value="celsius">Celsius (°C)</option>
+                    <option value="kelvin">Kelvin (K)</option>
+                </select>
+            </div>
+            <button onclick="convertTemperature()">Convert</button>
+            <div class="result" id="result"></div>
+        </div>
     </div>
+
+    <script>
+        function convertTemperature() {
 
+            const inputValue = parseFloat(document.getElementById('inputValue').value);
+            const fromUnit = document.getElementById('fromUnit').value;
+            const toUnit = document.getElementById('toUnit').value;
+            const resultElement = document.getElementById('result');
+         if (isNaN(inputValue)) {
+                resultElement.textContent = "Please enter a valid number!";
+                return;
+            }
+
+            let result;
+            let formulaText = "";
+
+
+            if (fromUnit === 'celsius') {
+                if (toUnit === 'fahrenheit') {
+                    result = (inputValue * 9/5) + 32;
+                    formulaText = `${inputValue}°C × 9/5 + 32 = ${result.toFixed(2)}°F`;
+                } else if (toUnit === 'kelvin') {
+                    result = inputValue + 273.15;
+                    formulaText = `${inputValue}°C + 273.15 = ${result.toFixed(2)}K`;
+                } else {
+                    result = inputValue;
+                }
+            }
+
+            else if (fromUnit === 'fahrenheit') {
+                if (toUnit === 'celsius') {
+                    result = (inputValue - 32) * 5/9;
+                    formulaText = `(${inputValue}°F - 32) × 5/9 = ${result.toFixed(2)}°C`;
+                } else if (toUnit === 'kelvin') {
+                    result = (inputValue - 32) * 5/9 + 273.15;
+                    formulaText = `(${inputValue}°F - 32) × 5/9 + 273.15 = ${result.toFixed(2)}K`;
+                } else {
+                    result = inputValue;
+                }
+            }
+
+            else if (fromUnit === 'kelvin') {
+                if (toUnit === 'celsius') {
+                    result = inputValue - 273.15;
+                    formulaText = `${inputValue}K - 273.15 = ${result.toFixed(2)}°C`;
+                } else if (toUnit === 'fahrenheit') {
+                    result = (inputValue - 273.15) * 9/5 + 32;
+                    formulaText = `(${inputValue}K - 273.15) × 9/5 + 32 = ${result.toFixed(2)}°F`;
+                } else {
+                    result = inputValue;
+                }
+            }
+
+
+            resultElement.innerHTML = `
+                <div>${inputValue} ${getUnitSymbol(fromUnit)} =</div>
+                <div style="font-size: 1.5rem; color: #f57c00; margin: 0.5rem 0">
+                    ${result.toFixed(2)} ${getUnitSymbol(toUnit)}
+                </div>
+                <div style="font-size: 0.9rem; color: #666">${formulaText}</div>
+            `;
+        }
+
+        function getUnitSymbol(unit) {
+            return {
+                celsius: '°C',
+                fahrenheit: '°F',
+                kelvin: 'K'
+            }[unit];
+        }
+    </script>
 </body>
 </html>
diff --git a/TemperatureConverter-Task2/style.css b/TemperatureConverter-Task2/style.css
@@ -1,19 +1,73 @@
-body{
-    font-family: 'Roboto', sans-serif;
-    background-color:rgb(255, 166, 0);
-
-    background-size: cover;
-    height: 100vh;
-}
-.container{
-    background-color: wheat;
-    width: 100%;
-    height: 100vh;
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Arial', sans-serif;
+}
+
+body {
+    background-color: #fff3e0;
+    min-height: 100vh;
     display: flex;
     justify-content: center;
-
+    align-items: center;
+}
+
+.container {
+    background-color: white;
+    padding: 2rem;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    width: 90%;
+    max-width: 500px;
+}
+
+h1 {
+    color: #ff9800;
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.converter {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
-.temp{
-    background-color: aqua;
-    font-size: 50px;
+
+input, select, button {
+    padding: 0.8rem;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 1rem;
 }
+
+input:focus, select:focus {
+    outline: 2px solid #ff9800;
+    border-color: transparent;
+}
+
+button {
+    background-color: #ff9800;
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #f57c00;
+}
+
+.result {
+    text-align: center;
+    padding: 1rem;
+    background-color: #fff3e0;
+    border-radius: 5px;
+    margin-top: 1rem;
+    font-weight: bold;
+}
+
+.unit-selectors {
+    display: flex;
+    gap: 1rem;
+}