Answer to Question #320299 in HTML/JavaScript Web Application for Mike

Question

Answer to Question #320299 in HTML/JavaScript Web Application for Mike

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #320299

Use the below reference image:

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

JAVASCRIPT Code

let myFormEl = document.getElementById("myForm");

let nameEl = document.getElementById("name");

let nameErrMsgEl = document.getElementById("nameErrMsg");

let passwordEl = document.getElementById("password");

let passwordErrMsgEl = document.getElementById("passwordErrMsg");

let resultErrMsgEl = document.getElementById("resultMsg");

nameEl.addEventListener("blur", function(event) {

if (event.target.value === "") {

nameErrMsgEl.textContent = "Required*";

} else {

nameErrMsgEl.textContent = "";

}

});

passwordEl.addEventListener("blur", function(event) {

if (event.target.value === "") {

passwordErrMsgEl.textContent = "Required*";

} else {

passwordErrMsgEl.textContent = "";

}

});

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">
                <div class="form-group username">
                    <label for="name" class="username-heading">User Name</label>
                    <input autocomplete="off" type="text" id="name" class="input">
                    <p class="error" id="nameErrMsg"></p>
                </div>
                <div class="form-group password">
                    <label for="password" class="password-heading">Password</label>
                    <input type="password"  id="password" class="input">
                    <p class="error" id="passwordErrMsg"></p>
                </div>
                <div class="form-group">
                    <button type="submit">Submit</button>
                    <p id="resultMsg"></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;
        }
        .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>
        let myFormEl = document.getElementById("myForm");
        let nameEl = document.getElementById("name");
        let nameErrMsgEl = document.getElementById("nameErrMsg");
        let passwordEl = document.getElementById("password");
        let passwordErrMsgEl = document.getElementById("passwordErrMsg");
        let resultErrMsgEl = document.getElementById("resultMsg");


        nameEl.addEventListener("blur", function(event) {
            if (event.target.value === "") {
                nameErrMsgEl.textContent = "Required*";
            } else {
                nameErrMsgEl.textContent = "";
            }
        });


        passwordEl.addEventListener("blur", function(event) {
            if (event.target.value === "") {
                passwordErrMsgEl.textContent = "Required*";
            } else {
                passwordErrMsgEl.textContent = "";
            }
        });


        myFormEl.addEventListener("submit", function() {
            event.preventDefault();


            if (nameEl.value != '' && passwordEl.value != '') {
                resultErrMsgEl.innerText = 'Login Success';
            } else {
                resultErrMsgEl.innerText = 'Fill in the required details';
            }
        });
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #320299 in HTML/JavaScript Web Application for Mike

Comments

Leave a comment

Related Questions