>HTML/CSS/JS Beginner-1

Lesson 1 Simple html form

HTML

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>HTML/CSS/JS Beginner-1</title>
   </head>
   <body>

     <!-- Insert html here -->
     <h1>Lesson 1</h1>
     <h2>Simple html form</h2>
     <form name="login-form">
       <span>Login:</span><input type="text" name="login"><div class="clear"></div>
       <span>Password:</span> <input type="password" name="password"><div class="clear"></div>
       <button type="button" name="button" id="submit">Ok</button><div class="clear"></div>
       <div id="result"></div>
     </form>


     
     <style type="text/css">
       <!-- Insert CSS here -->
     </style>

     
     <script type="text/javascript">
       <!-- Insert Javascript(js) here -->
     </script>

   </body>
</html>

CSS

body{
         padding: 40px;
         font-family: Arial;
       }
       h1{
         color: red;
       }
       h2{
         color: blue;
       }
       form span{
         width: 100px;
         display:block;
         float: left;
       }
       .clear{
         clear: both;
         height: 10px;
       }
       .error{
         color: red;
       }
       .success{
         color: green;
       }

JavaScript

submit.onclick = function() {
         let login = document.getElementsByName("login")[0].value,
             password = document.getElementsByName("password")[0].value,
             result = '',
             resultEl = document.getElementById("result");
         if(login == 'max' && password == '123'){
           result = 'Access is allowed';
           resultEl.classList.remove("error");
           resultEl.classList.add("success");
         } else {
           result = 'Access is denied';
           resultEl.classList.remove("success");
           resultEl.classList.add("error");
         }
         resultEl.innerHTML  = result;
       };