Answer to Question #210916 in HTML/JavaScript Web Application for Ayushi

Question

Answer to Question #210916 in HTML/JavaScript Web Application for Ayushi

Question #210916

Time Converter:

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

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>Time Converter</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .container>h1 {
            margin-top: 40px;
            font-size: 40px;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
        .time-form {
            margin-top: 40px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            width: 400px;
            height: 200px;
        }
        .time-form label {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }
        .time-form label span {
            font-size: 20px;
            font-weight: bold;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }
        .time-form label input {
            width: 60%;
            padding: 5px;
            font-weight: bold;
            font-size: 20px;
            border-radius: 2.5px;
        }
        .messages-wrapper {
            margin-top: 40px;
            height: 60px;
            font-size: 20px;
            font-weight: bold;
        }
        #timeInSeconds {
            color: rgb(19, 12, 128)
        }
        #errorMsg {
            margin-top: 10px;
            color: red;
        }
        #convertBtn {
            margin-top: 20px;
            border: none;
            background-color: rgb(19, 12, 128);
            color: white;
            font-size: 20px;
            font-weight: bold;
            padding: 5px 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Time Converter</h1>
        <div class="messages-wrapper">
            <p id="timeInSeconds"></p>
            <p id="errorMsg"></p>
        </div>
        <form class="time-form">
            <label>
                <span>Enter hours: </span>
                <input type="number" name="number" id="hoursInput">
            </label>
            <label>
                <span>Enter minutes: </span>
                <input type="number" name="number" id="minutesInput">
            </label>
            <button type="submit" id="convertBtn">Convert</button>
        </form>
    </div>
    <script>
        const form        = document.querySelector('.time-form'),
            hoursInput    = document.querySelector('#hoursInput'),
            minutesInput  = document.querySelector('#minutesInput'),
            timeInSeconds = document.querySelector('#timeInSeconds'),
            errorMsg      = document.querySelector('#errorMsg')


        form.addEventListener('submit', (e) => {
            e.preventDefault()
            let hours = hoursInput.value
            let minutes = minutesInput.value
            if (hours && minutes) {
                timeInSeconds.textContent = `${hours} hours and ${minutes} minutes = ${60 * 60 * Number(hours) + 60 * Number(minutes)} seconds`
                hoursInput.value = null
                minutesInput.value = null
            } else {
                timeInSeconds.textContent = ''
                errorMsg.textContent = 'Please enter time properties!!!'
                setTimeout(() => {
                    errorMsg.textContent = ''
                }, 1500)
            }
        })
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #210916 in HTML/JavaScript Web Application for Ayushi

Comments

Leave a comment

Related Questions