index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="index.css" />
<script>
function performOperation(temp, from, to) {
var result;
if (from === "Celsius" && to === "Fahrenheit") {
result = (parseFloat(temp) * 9) / 5 + 32;
return result + "°F";
} else if (from === "Celsius" && to === "Kelvin") {
result = parseFloat(temp) + 273.15;
return result + "K";
} else if (from === "Fahrenheit" && to === "Celsius") {
result = ((parseFloat(temp) - 32) * 5) / 9;
return result + "°C";
} else if (from === "Fahrenheit" && to === "Kelvin") {
result = ((parseFloat(temp) + 459.67) * 5) / 9;
return result + "K";
} else if (from === "Kelvin" && to === "Celsius") {
result = parseFloat(temp) - 273.15;
return result + "°C";
} else if (from === "Kelvin" && to === "Fahrenheit") {
result = (parseFloat(temp) * 9) / 5 - 459.67;
} else {
// Same temp type handling
if (from === "Fahrenheit") {
return temp + "F";
} else if (from === "Kelvin") {
return temp + "K";
} else {
return temp + "\u00B0C";
}
}
}
function myFunction() {
var temp = document.getElementById("input").value;
var from = document.getElementById("from-temp-type").value;
var to = document.getElementById("to-temp-type").value;
if (isNaN(temp) || temp === "") {
alert("Enter a valid temperature number");
} else {
var res = performOperation(temp, from, to);
document.getElementById("demo").innerHTML = res;
}
}
</script>
</head>
<body>
<h2>TEMPERATURE CONVERTER</h2>
<div class="container">
<div class="temp-box">
<label for="">Temperature</label>
<input type="text" id="input" />
</div>
<div class="from-to-box">
<div class="box-one">
<label for="">from</label>
<select name="temp-type" id="from-temp-type">
<option value="Fahrenheit">Fahrenheit</option>
<option value="Kelvin">Kelvin</option>
<option value="Celsius">Celsius</option>
</select>
</div>
<div class="box-one">
<label for="">to</label>
<select name="temp-type" id="to-temp-type">
<option value="Fahrenheit">Fahrenheit</option>
<option value="Kelvin">Kelvin</option>
<option value="Celsius">Celsius</option>
</select>
</div>
</div>
<div class="button-box">
<button onclick="myFunction()">CONVERT</button>
</div>
<div class="result-box">
<label for="">Result</label>
<p id="demo"></p>
</div>
</div>
</body>
</html>
index.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #000;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
gap: 1rem;
}
body h2{
color: #fff;
}
.container{
background: #fff;
width: 500px;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 3rem;
text-align: center;
filter: drop-shadow(0 0 10px rgb(2, 78, 154));
animation: glow 2s alternate infinite;
}
@keyframes glow {
0% {
filter: drop-shadow(0 0 5px rgb(255, 255, 255));
}
100% {
filter: drop-shadow(0 0 30px rgb(255, 255, 255));
}
}
input, select{
border-style: none;
border-bottom: 1px solid grey;
height: 2rem;
font-size: medium;
text-align: center;
}
.from-to-box{
display: flex;
justify-content: space-around;
align-items: center;
}
.button-box{
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
align-items: center;
}
.button-box button{
width: 300px;
padding: 1rem;
border-radius: 2rem;
border-style: none;
background: #000;
color:aliceblue;
font-size: medium;
}
.button-box button:hover{
padding: 1rem;
border-radius: 2rem;
border-style: none;
background: #ffffff;
color:rgb(0, 0, 0);
font-size: medium;
border: 1px solid grey;
}
Thank you for visiting.
Make sure to leave a comment
Comments
Post a Comment