Natarov
/
HomeWork


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="green">congratulations</div>
        <!-- <form> -->
            <input type="text" placeholder="Login" id="login-name">
            <input type="text" placeholder="Password" id="login-password">
            <button>
                submit
            </button>
            
        <!-- </form> -->
        <div class="red">failed</div>
        
    </div>
    
    
    <script>
        
        let login = {};
            login.name = "admin"
            login.password = "qwerty"       
        let loginNameIn = document.querySelector("#login-name");
        let loginPasswordIn = document.querySelector('#login-password');
        let button = document.querySelector('button');
        let greenBlock = document.querySelector('.green');
        let redBlock = document.querySelector('.red');
         function showGreenBlock() {
             greenBlock.classList.toggle('active');
         }
         function showRedBlock() {
             redBlock.classList.toggle('active');
         }
        
        button.onclick = function() {
            let loginNameOut = loginNameIn.value;
            let loginPasswordOut = loginPasswordIn.value;
            
            if((login.name == loginNameOut) && (login.password == loginPasswordOut)) {
                showGreenBlock();
            }else {
                showRedBlock();
            }
        }
        
        
      
    
    </script>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
</body>
</html>