From 7a93649e8f602883e070387e7a010c6a91512f1a Mon Sep 17 00:00:00 2001 From: anmolranjan1 Date: Sat, 28 Oct 2023 21:48:13 +0530 Subject: [PATCH] Added Temperature Convertor Responsive website --- Temperature Convertor/index.html | 64 +++++++++++++++++++++++++++++ Temperature Convertor/script.js | 49 ++++++++++++++++++++++ Temperature Convertor/style.css | 70 ++++++++++++++++++++++++++++++++ 3 files changed, 183 insertions(+) create mode 100644 Temperature Convertor/index.html create mode 100644 Temperature Convertor/script.js create mode 100644 Temperature Convertor/style.css diff --git a/Temperature Convertor/index.html b/Temperature Convertor/index.html new file mode 100644 index 00000000..6a17e3ca --- /dev/null +++ b/Temperature Convertor/index.html @@ -0,0 +1,64 @@ + + + + Temperature Converter + + + +
+

Temperature Converter

+
+ +
+
+ + + +
+ +
+ + + +
+ + + +
+

Formulas

+

Celsius to Fahrenheit Conversion: °F = °C × 9/5 + 32

+

Celsius to Kelvin Conversion: K = °C + 273.15

+

Celsius to Rankine Conversion: °R = °C × 9/5 + 491.67

+

Fahrenheit to Celsius Conversion: °C = (°F - 32) × 5/9

+

Fahrenheit to Kelvin Conversion: K = (°F + 459.67) × 5/9

+

Fahrenheit to Rankine Conversion: °R = °F + 459.67

+

Kelvin to Celsius Conversion: °C = K - 273.15

+

Kelvin to Fahrenheit Conversion: °F = K × 9/5 - 459.67

+

Kelvin to Rankine Conversion: °R = K × 9/5

+

Rankine to Celsius Conversion: °C = °R × 5/9 - 273.15

+

Rankine to Fahrenheit Conversion: °F = °R - 459.67

+

Rankine to Kelvin Conversion: K = °R × 5/9

+
+
+ + + + + + \ No newline at end of file diff --git a/Temperature Convertor/script.js b/Temperature Convertor/script.js new file mode 100644 index 00000000..8b8061fb --- /dev/null +++ b/Temperature Convertor/script.js @@ -0,0 +1,49 @@ +// Function to convert temperature based on user input +function convertTemperature() { + var inputTemperature = parseFloat(document.getElementById("inputTemperature").value); + var inputUnit = document.getElementById("inputUnit").value; + var outputUnit = document.getElementById("outputUnit").value; + var outputTemperature = document.getElementById("outputTemperature"); + + if (inputUnit === outputUnit) { + // If input and output units are the same, display the input temperature as the output + outputTemperature.value = inputTemperature.toFixed(2); + } else if (inputUnit === "celsius" && outputUnit === "fahrenheit") { + // Convert Celsius to Fahrenheit + outputTemperature.value = (inputTemperature * 9/5 + 32).toFixed(2); + } else if (inputUnit === "fahrenheit" && outputUnit === "celsius") { + // Convert Fahrenheit to Celsius + outputTemperature.value = ((inputTemperature - 32) * 5/9).toFixed(2); + } else if (inputUnit === "celsius" && outputUnit === "kelvin") { + // Convert Celsius to Kelvin + outputTemperature.value = (inputTemperature + 273.15).toFixed(2); + } else if (inputUnit === "kelvin" && outputUnit === "celsius") { + // Convert Kelvin to Celsius + outputTemperature.value = (inputTemperature - 273.15).toFixed(2); + } else if (inputUnit === "fahrenheit" && outputUnit === "kelvin") { + // Convert Fahrenheit to Kelvin + outputTemperature.value = ((inputTemperature + 459.67) * 5/9).toFixed(2); + } else if (inputUnit === "kelvin" && outputUnit === "fahrenheit") { + // Convert Kelvin to Fahrenheit + outputTemperature.value = (inputTemperature * 9/5 - 459.67).toFixed(2); + } else if (inputUnit === "celsius" && outputUnit === "rankine") { + // Convert Celsius to Rankine + outputTemperature.value = ((inputTemperature * 9/5) + 491.67).toFixed(2); + } else if (inputUnit === "rankine" && outputUnit === "celsius") { + // Convert Rankine to Celsius + outputTemperature.value = ((inputTemperature - 491.67) * 5/9).toFixed(2); + } else if (inputUnit === "fahrenheit" && outputUnit === "rankine") { + // Convert Fahrenheit to Rankine + outputTemperature.value = (inputTemperature + 459.67).toFixed(2); + } else if (inputUnit === "rankine" && outputUnit === "fahrenheit") { + // Convert Rankine to Fahrenheit + outputTemperature.value = (inputTemperature - 459.67).toFixed(2); + } else if (inputUnit === "kelvin" && outputUnit === "rankine") { + // Convert Kelvin to Rankine + outputTemperature.value = (inputTemperature * 9/5).toFixed(2); + } else if (inputUnit === "rankine" && outputUnit === "kelvin") { + // Convert Rankine to Kelvin + outputTemperature.value = (inputTemperature * 5/9).toFixed(2); + } + } + \ No newline at end of file diff --git a/Temperature Convertor/style.css b/Temperature Convertor/style.css new file mode 100644 index 00000000..b271c481 --- /dev/null +++ b/Temperature Convertor/style.css @@ -0,0 +1,70 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; + background-color: #f2f2f2; + } + + .container { + margin-top: 20px; + background-color: #fff; + padding: 10px; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + } + + label { + display: block; + margin-bottom: 5px; + font-weight: bold; + } + + input[type="number"], + input[type="text"], + select { + width: 200px; + padding: 5px; + border: 1px solid #ccc; + border-radius: 3px; + } + + button { + padding: 10px 20px; + margin-top: 20px; + background-color: #4CAF50; + color: #fff; + border: none; + border-radius: 3px; + cursor: pointer; + } + + button:hover { + background-color: #45a049; + } + + .formulas { + margin-top: 30px; + } + + .formulas h2 { + margin-bottom: 10px; + color: #333; + } + + .formulas p { + margin: 5px 0; + font-size: 14px; + color: #666; + } + + footer { + margin-top: 20px; + text-align: center; + color: #888; + } + \ No newline at end of file