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

Question

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

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #166651

Time Converter

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

Refer to the below image.

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.

Resources

Use this Background image:

https://assets.ccbp.in/frontend/dynamic-webapps/time-converter-bg.png

CSS Colors used:

Text colors Hex code values used:

#f5f7fa

#000000

#ffffff

CSS Font families used:

Open Sans

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 #166651 in HTML/JavaScript Web Application for Chandra sena reddy

Resources

Comments

Leave a comment

Related Questions