Answer to Question #167100 in HTML/JavaScript Web Application for Chandra sena reddy

Question

Answer to Question #167100 in HTML/JavaScript Web Application for Chandra sena reddy

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #167100

Time Converter:

Instructions:

The HTML input element for entering the number of hours should have the id hoursInput
The HTML input element for entering the number of minutes should have the id minutesInput
Add HTML label elements for HTML input elements with ids hoursInput and minutesInput
The HTML button element should have the id convertBtn
The HTML p element to display the converted time in seconds should have the id timeInSeconds
The HTML p element to display the error message should have the id errorMsg

By following the above instructions, achieve the given functionality.

When values are entered in HTML input elements with ids hoursInput and minutesInput, the HTML button with id convertBtn is clicked
The converted time in seconds should be displayed in the HTML p element with id timeInSeconds
The HTML p element with id errorMsg should be empty
The HTML p element with id errorMsg should display an error message in the following cases
When the HTML input element with id hoursInput is empty and convertBtn is clicked
When the HTML input element with id minutesInput is empty and convertBtn is clicked
When both the HTML input elements hoursInput and minutesInput are empty and convertBtn is clicked

Quick Tip

timeInSeconds = ((hours) *60 + minutes) * 60

Note

The values given for the HTML input elements with ids hoursInput and minutesInput should be positive integers.

Expert's answer

<!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">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <label>
            <span>Hours:</span>
            <input type="text" id="hoursInput">
        </label>
        <label>
            <span>Minutes:</span>
            <input type="text" id="minutesInput">
        </label>
        <button type="button" id="convertBtn">Convert to seconds</button>
        <p id="timeInSeconds"></p>
        <p id="errorMsg"></p>
    </div>


    <script>
        let btnConvert = document.getElementById('convertBtn');

        btnConvert.addEventListener('click', function() {
            let hours = +document.getElementById('hoursInput').value;
            let minutes = +document.getElementById('minutesInput').value;
            let resultBox = document.getElementById('timeInSeconds');
            let errorBox = document.getElementById('errorMsg');
        
            errorBox.innerText = '';
            resultBox.innerText = '';
        
            if (hours && minutes) {
                resultBox.innerText = `Result after convert: ${ Math.floor( (hours * 60 + minutes) * 60 ) } seconds`;
            } else {
                errorBox.innerText = 'Error! Enter positive integer number values hours or minutes';
            }
        });
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #167100 in HTML/JavaScript Web Application for Chandra sena reddy

Comments

Leave a comment

Related Questions