Answer to Question #212172 in HTML/JavaScript Web Application for Siva

Question

Answer to Question #212172 in HTML/JavaScript Web Application for Siva

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #212172

Time Converter:

In this assignment, let's build a Time Converter by applying the concepts we learned till now.

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 name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            max-width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url(https://assets.ccbp.in/frontend/dynamic-webapps/time-converter-bg.png) center/cover no-repeat fixed;
        }
        .converter-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .input-wrappers {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }
        input {
            width: 25%;
            padding: 8px;
            outline: none;
            border: 3px solid rgb(0, 0, 0);
            border-radius: 5px;
            background-color: rgb(209, 223, 218);
        }
        label {
            font-size: 20px;
            color: #f5f7fa;
            font-weight: bold;
            letter-spacing: 1.1px;
            font-family: 'Open Sans', sans-serif;
        }
        button {
            width: 30%;
            padding: 8px 0;
            border-radius: 15px;
            font-size: 20px;
            font-family: 'Open Sans', sans-serif;
            background: rgb(18, 49, 92);
            border: none;
            color: white;
            font-weight: bold;
            letter-spacing: 1.2px;
            margin-top: 30px;
        }
        button:hover {
            cursor: pointer;
        }
        button:focus {
            outline: none;
        }
        .seconds {
            color: white;
            font-size: 20px;
            font-family: 'Open Sans', sans-serif;
            font-weight: bold;
        }
        .error {
            color: red;
            font-size: 20px;
            font-family: 'Open Sans', sans-serif;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="converter-wrapper">
        <div class="input-wrappers">
            <label for="hoursInput">Enter the number of hours:</label>
            <input type="number" id="hoursInput">
        </div>
        <div class="input-wrappers">
            <label for="minutesInput">Enter the number of minutes:</label>
            <input type="number" id="minutesInput">
        </div>
        <button id="convertBtn" onclick="getSeconds()">Convert</button>
        <p id="timeInSeconds" class="seconds"></p>
        <p id="errorMsg" class="error"></p>
    </div>
    <script>
        function getSeconds() {
            var hours = parseInt(document.getElementById('hoursInput').value);
            var minutes = parseInt(document.getElementById('minutesInput').value);
            var seconds = (hours * 60 + minutes) * 60;
            console.log(hours);
            var showSeconds = document.getElementById("timeInSeconds");  
            var showError = document.getElementById("errorMsg");
            if (isNaN(hours) || isNaN(minutes)) {
                showError.textContent += "Error!!! Please enter any value"
            }
            else {
                showSeconds.textContent = showSeconds.textContent + "the number in seconds " + seconds;
            }
        }
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #212172 in HTML/JavaScript Web Application for Siva

Comments

Leave a comment

Related Questions