Answer to Question #316942 in HTML/JavaScript Web Application for siva

Question

Answer to Question #316942 in HTML/JavaScript Web Application for siva

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #316942

CCBPLogin

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

image:

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

It should pass:

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 text content in the HTML paragraph element with id resultMsg should be displayed as "Login Success".

When the HTML btn element with attribute type submit is clicked,if the values of the HTML input elements with ids name and password are empty then text content in the HTML paragraph element with id resultMsg should be displayed as "Fill in the required details".

When the submit is clicked and the value of the HTML input elements with id name is empty and password is not empty then the text content in the HTML paragraph element with id nameErrMsg and resultMsg should have an error message and "Fill in the required details" respectively.

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 #316942 in HTML/JavaScript Web Application for siva

Comments

Leave a comment

Related Questions