Skip to content
This repository has been archived by the owner on Oct 29, 2023. It is now read-only.

Added Temperature Convertor #588

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added Temperature Convertor #588

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions Temperature Convertor/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<title>Temperature Converter</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Temperature Converter</h1>
</header>

<main>
<div class="container">
<label for="inputUnit">Input Temperature:</label>
<input type="number" id="inputTemperature" placeholder="Enter temperature" />
<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="reaumur">Reaumur</option>
<option value="triple">Triple Point of Water</option>
</select>
</div>

<div class="container">
<label for="outputUnit">Output Temperature:</label>
<input type="text" id="outputTemperature" readonly />
<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="reaumur">Reaumur</option>
<option value="triple">Triple Point of Water</option>
</select>
</div>

<button onclick="convertTemperature()">Convert</button>

<div class="formulas">
<h2>Formulas</h2>
<p>Celsius to Fahrenheit Conversion: °F = °C × 9/5 + 32</p>
<p>Celsius to Kelvin Conversion: K = °C + 273.15</p>
<p>Celsius to Rankine Conversion: °R = °C × 9/5 + 491.67</p>
<p>Fahrenheit to Celsius Conversion: °C = (°F - 32) × 5/9</p>
<p>Fahrenheit to Kelvin Conversion: K = (°F + 459.67) × 5/9</p>
<p>Fahrenheit to Rankine Conversion: °R = °F + 459.67</p>
<p>Kelvin to Celsius Conversion: °C = K - 273.15</p>
<p>Kelvin to Fahrenheit Conversion: °F = K × 9/5 - 459.67</p>
<p>Kelvin to Rankine Conversion: °R = K × 9/5</p>
<p>Rankine to Celsius Conversion: °C = °R × 5/9 - 273.15</p>
<p>Rankine to Fahrenheit Conversion: °F = °R - 459.67</p>
<p>Rankine to Kelvin Conversion: K = °R × 5/9</p>
</div>
</main>

<footer>
<p>&copy; 2023 Temperature Converter. All rights reserved.</p>
</footer>

<script src="script.js"></script>
</body>
</html>
49 changes: 49 additions & 0 deletions Temperature Convertor/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
}

70 changes: 70 additions & 0 deletions Temperature Convertor/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}