Temperature Converter

Developer
Azizur Rahman
Size
2,117 Kb
Views
6,072
  1. Temperature Converter Previews
  2. Temperature Converter HTML Codes
  3. Temperature Converter CSS Codes
  4. Temperature Converter JS Codes

How do I make an temperature converter?

What is a temperature converter? How do you make a temperature converter? This script and codes were developed by Azizur Rahman on 16 January 2023, Monday.

Temperature Converter Previews
IQ Test

Temperature Converter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Temperature Converter</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div id="container"> <div class="box"> <span>Celsius To Fahrenheit:</span> <input id="CToF" type="text"> <button onclick="ConvertToF()">Convert</button> <div id="output1">0&deg;F</div> </div> <div class="box"> <span>Fahrenheit To Celsius:</span> <input id="FToC" type="text"> <button onclick="ConvertToC()">Convert</button> <div id="output2">0&deg;C</div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Temperature Converter - Script Codes CSS Codes

#container{ width: 800px; height:400px; font-family:'Roboto'; margin:0 auto; padding:10px; margin-top:50px; text-align:center;
}
span{ padding:6px; font-size:1.5rem;
}
input{
padding:8px;
}
#output1, #output2{ font-size:3rem; padding:20px;
}
.box{ height:130px; color:#EEEEEE; padding:20px; background-color:#3F51B5; border-radius:20px; margin:20px;
}
button{ padding:8px; background-color:#03A9F4; border:0px; color:#EEEEEE; border-radius: 0px 10px 10px 0px;
}

Temperature Converter - Script Codes JS Codes

var output1 = document.getElementById('output1');
var output2 = document.getElementById('output2');
var fahrenheit;
var celsius;
//Converts Celsius to Fahrenheit and outputs to page
function ConvertToF(){ var cToF = document.getElementById('CToF').value; fahrenheit = cToF * 9/5 + 32; output1.innerHTML = fahrenheit.toFixed(2) + "&deg;F";
}
//Converts Fahrenheit to Celsius and outputs to page
function ConvertToC(){ var fToC = document.getElementById('FToC').value; celsius = (fToC - 32) * 5/9; output2.innerHTML = celsius.toFixed(2) + "&deg;C";
}
Temperature Converter - Script Codes
Temperature Converter - Script Codes
Home Page Home
Developer Azizur Rahman
Username azizurrahman
Uploaded January 16, 2023
Rating 3
Size 2,117 Kb
Views 6,072
Do you need developer help for Temperature Converter?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Azizur Rahman (azizurrahman) Script Codes
Name
Tribute Page
Working Daily Currency Status
Text Bounce
Special Offer Card
Working Weather Search
JQuery Mobile Keyboard
Working Dial Pad
Spinning Buttons
Product Card
Recipe Card
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!