Ccbp login in javascript assignment expert

        User Name

        Password

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

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

//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.

    
    
    
    CCBP Login


    

        

            
CCBP Login
            
                

                    User Name
                    
                    
Required*
                
                

                    Password
                    
                    
Required*
                
                

                    Submit
                    
Fill in the required details
                
            
        
    



    
        .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;
        }
    


    
        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'];
            }
        }