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

Question

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

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #310236

CCBP Login

Reference image:

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

<!DOCTYPE html>

<html>

<body>

<h1 class="form-heading">CCBP Login</h1>

</div>

<label for="password" class="password-heading">Password</label>

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div class="wrapper">
        <div class="container">
            <h1 class="form-heading title">CCBP Login</h1>
            <form class="form" id="myForm" onsubmit="formSubmit(this)">
                <div class="form-group username">
                    <label for="name" class="username-heading">User Name</label>
                    <input autocomplete="off" type="text" id="name" class="input" onblur="blurInput(this)">
                    <p class="hidden error error-message" id="nameErrMsg">Required*</p>
                </div>
                <div class="form-group password">
                    <label for="password" class="password-heading">Password</label>
                    <input type="password"  id="password" class="input" 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 #310236 in HTML/JavaScript Web Application for chethan

Comments

Leave a comment

Related Questions