Farenheit to Celcius Converter using Javascript
If you are a programmer and want to built your own app with html css js then todays article is for you. Today I will provide you the source code of a temperature converter like this.
SOURCE CODE HERE
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Convert Farenheit to Celcius</title>
<a href= "https://techluminous.blogspot.com/"> techluminous.blogspot.com</a>
<style>
*{
margin: 0; padding: 0; box-sizing: border-box;
font-family: 'Maven Pro', sans-serif;
}
body{
width: 100%;
height: 100vh;
background: #0f8a9d;
background: #0f8a9d;
background: linear-gradient(57deg, #00C6A7 , #1E4D92 );
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
}
div{
width: 100%;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;align-items: center;
}
h1{
text-align: center;
}
input {
border: 5px solid white;
-webkit-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
-moz-box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
box-shadow:
inset 0 0 8px rgba(0,0,0,0.1),
0 0 16px rgba(0,0,0,0.1);
padding: 15px;
background: rgba(255,255,255,0.5);
margin: 0 0 10px 0;
}
/* General Buttons */
button {
width: 150px;
height: 40px;
background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%); /* W3C */
border: none;
border-radius: 5px;
position: relative;
border-bottom: 4px solid #2b8bc6;
color: #fbfbfb;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
text-shadow: 1px 1px 1px rgba(0,0,0,.4);
font-size: 15px;
text-align: left;
text-indent: 5px;
box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2);
cursor: pointer;
/* Just for presentation */
display: block;
margin: 0 auto;
margin-bottom: 20px;
}
button:active {
box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2);
top: 1px;
}
button:after {
content: "";
width: 0;
height: 0;
display: block;
border-top: 20px solid #187dbc;
border-bottom: 20px solid #187dbc;
border-left: 16px solid transparent;
border-right: 20px solid #187dbc;
position: absolute;
opacity: 0.6;
right: 0;
top: 0;
border-radius: 0 5px 5px 0;
}
@media(max-width: 768px){
h1{ font-size: 1.2rem;color:red; }
}
</style>
</head>
<body>
<br><br><br>
<section>
<h1 style="color:black;"><i class="fa fa-thermometer-empty" aria-hidden="true"></i> How to Convert Farenheit to Celcius(°C to °F) <i class="fa fa-thermometer-empty" aria-hidden="true"></i> </h1>
<div>
<br><br><br>
<center> <input type="number" name="" placeholder="Enter Farenheit Degree"
id="fd"> </center> <br>
<button onclick="changeDeg();"> Change to Celcius </button><br>
<center> <input type="text" name="" placeholder="Degree in Celcius"
id="cd" ></center>
</div>
</section>
<script>
const changeDeg = () =>{
const fv = document.getElementById('fd').value;
// T(°C) = (T(°F) - 32) × 5/9
let newcv = (fv - 32) * 5/9;
console.log(newcv);
document.getElementById('cd').value = newcv+ " degree Celcius";
}
</script>
</body>
</html>
){kind=link}
0 Comments