Question #320339
Create a simple Temperature calculator that will convert the temperature in Fahrenheit to Celcius Kelvin. Your calculator must include:
- A field for the user to enter the temperature;
- A button that when clicked, makes the converted answer appear.
- You must include index.html, style.css, and index.js files.
- Comments throughout every file.
- Buttons should include hover effects, and fields should clearly "focus" when in use.
- Clean and professional creative styling.
Expert's answer
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div class="wrapper">
<div class="container">
<input type="text" id="temp">
<button type="button" onclick="calculateToCelsius()">Calculate</button>
<div class="res"></div>
</div>
</div>
<style>
input {
outline: none;
}
button {
outline: none;
border: 1px solid #252525;
border-radius: 2px;
}
button:hover {
background-color: #ccc;
cursor: pointer;
}
</style>
<script>
function calculateToCelsius() {
let temp = document.getElementById('temp').value;
let res = document.querySelector('.res');
let r = 0;
r = Math.round((temp - 32) / 1.8);
res.innerHTML = r + ' ℃';
}
</script>
</body>
</html>
Learn more about our help with Assignments: Programming & Computer Science
Comments