Answer to Question #302838 in HTML/JavaScript Web Application for chethan

Question

Answer to Question #302838 in HTML/JavaScript Web Application for chethan

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #302838

CCBP Login

The goal of this coding exam is to quickly get you off the ground with CCBP Login Page

Use the below reference image

https://assets.ccbp.in/frontend/content/dynamic-webapps/ccbp-login-op.gif

Achieve the given functionality using JS

When the HTML input element with the id name lost the focus,
If its value is empty, the HTML paragraph element with the id nameErrMsg should have the error message as Required* else should have an empty string.
When the HTML input element with the id password lost the focus,
If its value is empty, the HTML paragraph element with the id passwordErrMsg should have the error message as Required* else should have an empty string.
When the HTML button with attribute type submit is clicked
If the value of HTML input elements with ids name and password are not empty then the text content in the HTML paragraph element with id resultMsg should be displayed as Login Success. Otherwise, it should be displayed as Fill in the required details.

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>CCBP Login</title>
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <h1 class="title">CCBP Login</h1>
            <form class="form" onsubmit="formSubmit(this)">
                <div class="form-group">
                    <label for="name">User Name</label>
                    <input type="text" id="name" onblur="blurInput(this)">
                    <p class="hidden error" id="nameErrMsg">Required*</p>
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" id="password" onblur="blurInput(this)">
                    <p class="hidden error" id="passwordErrMsg">Required*</p>
                </div>
                <div class="form-group">
                    <button type="submit">Submit</button>
                    <p class="hidden" id="resultMsg">Fill in the required details</p>
                </div>
            </form>
        </div>
    </div>



    <style>
        .wrapper {
            width: 100%;
            min-height: 100vh;
        }
        .container {
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-flow: column wrap;
            justify-content: center;
        }
        .hidden {
            opacity: 0;
        }
        .error {
            color: red;
        }
        .title {
            text-align: center;
            margin-bottom: 36px;
        }
        .form {
            text-align: center;
            width: 250px;
            margin: 0 auto;
        }
        .form-group {
            display: flex;
            flex-flow: column wrap;
            justify-content: flex-start;
            align-items: flex-start;
        }
        input {
            margin-top: 10px;
        }
        button {
            width: 80px;
            height: 50px;
            background-color: #0073CF;
            color: #fff;
        }
    </style>


    <script>
        function formSubmit(form) {
            event.preventDefault();


            let msg = document.getElementById('resultMsg');


            if (form.name.value != '' && form.password.value != '') {
                msg.innerText = 'Login Success';
                msg.classList.remove('hidden');
            } else {
                msg.innerText = 'Fill in the required details';
                msg.classList.remove('hidden');
            }
        }


        function blurInput(input) {
            let parent = input.closest('.form-group');
            let msg = parent.querySelector('p');


            if (input.value == '') {
                msg.classList.remove('hidden');
            } else {
                msg.classList.add('hidden');
            }
        }
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #302838 in HTML/JavaScript Web Application for chethan

Comments

Leave a comment

Related Questions