Answer to Question #318668 in HTML/JavaScript Web Application for Jhon

Question

Answer to Question #318668 in HTML/JavaScript Web Application for Jhon

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #318668

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:(final output)

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

Test cases:
when the HTML input element with id name lost the focus, if the value of HTML input element with id name is empty, then the text content in the HTML paragraph element with id name ErrMsg should have the error message otherwise it was an empty string
when the HTML input element with id password lost the focus, if the value of HTML input element with id password empty, then the text content in the HTML paragraph element with id name passwordErrMsg should have the error message otherwise it was an empty string
when the HTML button element with attribute type submit is clicked, if the values of the HTML input elements with ids name and password are not empty then the text content in HTML paragraph element with id resultMsg should be displayer "Login Success"

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 Page</title>
</head>
<body>
   <style>
      .wrraper{
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         min-height: 100vh;
      }
      .form{
         width: 250px;
      }
      .form__block{
         display: flex;
         flex-direction: column;
         margin-bottom: 20px;
      }
      .form__label{
         margin-bottom: 10px;
         font-size: 18px;
      }
      .from__required{
         color: #CB4335;
         margin: 5px 0 0 0;
      }
      .form__btn{
         padding: 10px 15px;
         background: #2E86C1;
         color: #fff;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         transition: all 0.3s ease;
      }
      .form__btn:hover{
         background: #154360;
      }
      .message{
         font-size: 22px;
         margin-top: 20px;
      }
   </style>
   <div class="wrraper">
      <form class="form" id="form">
         <h1>CCBP LOGIN</h1>
         <div class="form__block">
            <label class="form__label" for="login">User name</label>
            <input type="text" id="login" name="login">
            <p class="from__required" style="visibility: hidden;">Required*</p>
         </div>
         <div class="form__block">
            <label class="form__label" for="password">Password</label>
            <input type="password" id="password" name="password">
            <p class="from__required" style="visibility: hidden;">Required*</p>
         </div>
         <button class="form__btn" type="submit" id="submit">Submit</button>
         <div id="resultMsg" class="message"></div>
      </form>
   </div>
   <script>
      const form = document.getElementById('form');
         const loginField = document.getElementById('login');
         const passwordField = document.getElementById('password');
         const message = document.getElementById('resultMsg');


         function login(event) {
            event.preventDefault()
            if (loginField.value.trim().length && passwordField.value.trim().length) {
               message.textContent = 'Login Success'
            } else {
               message.textContent = 'Fill in the required details'
            }
         }
         function isRequired(event) {
            if (event.target.value.trim().length) {
               event.target.nextElementSibling.style = 'visibility: hidden;'
            } else {
               event.target.nextElementSibling.style = 'visibility: visible;'
            }
         }


         form.addEventListener('submit', login);
         passwordField.addEventListener('blur', isRequired)
         loginField.addEventListener('blur', isRequired)
   </script>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #318668 in HTML/JavaScript Web Application for Jhon

Comments

Leave a comment

Related Questions