Answer to Question #320339 in HTML/JavaScript Web Application for ujoo

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 + ' &#8451;';
        }
    </script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #320339 in HTML/JavaScript Web Application for ujoo

Comments

Leave a comment

Related Questions