index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="temp.css">
<title>Temprature Counter</title>
</head>
<body>
<div class="container">
<div class="box">
<h3> Convert <strong>Farenheight</strong> to <strong>Celcius</strong></h3>
<div class="box1">
<form id="tempCalc" onsubmit="calTemp(); return false" action="process.php">
<input type="number" id="number">
<select name="temp" id="temp">
<option class="temp_option" value="select">Select</option>
<option class="temp_option" value="c">Celcius</option>
<option class="temp_option" value="f">Farenheight</option>
</select>
<input id="btn" type="submit">Submit</input>
<br>
<span id="final"></span>
</form>
</div>
<script src="temp.js"></script>
</body>
</html>
index.js
const calTemp = () => {
const number = document.getElementById("number").value
let ele = document.getElementById("temp")
let selectedValue = ele.options[ele.selectedIndex].value
console.log(selectedValue);
if (selectedValue == 'c') {
let result = Math.round(number * 9 / 5 + 32)
console.log("converted to farehit ", result)
document.getElementById("final").innerHTML = `${result} Farenheit`;
}
else if (selectedValue == 'f') {
let result = Math.round(5 / 9 * (number - 32))
console.log("converted to celcius ", result)
document.getElementById("final").innerHTML = `${result} Celcius`
}
else {
console.log("choose any option");
}
}
index.css
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.container{
height: 100vh;
display: flex;
flex-direction: column;
background-color: rgb(209, 128, 128);
display: flex;
}
.box{
margin: auto;
width: 500px;
height: 300px;
border: 2px solid rgb(255, 255, 255);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
background-color: black;
}
h3{
color: antiquewhite;
}
.box1 {
display: flex;
flex-direction: column;
margin: auto;
padding: 30px;
}
#number{
font-size: 24px;
}
input,select {
font-size: 10px;
padding: 15px;
margin: 5px;
}
button{
display: flexbox;
padding: 6px;
margin: 20px;
}
#final{
display: inline-block;
padding: 10px;
margin: 5px;
color: white;
font-size: 15px;
;
}
0 Comments