<div class="container">
            <section class="login-container">
                <h1>Log In System</h1>
                
                <form id="form" action="index2.html">
                    <div id="msg"></div>
                    <input type="text" id ="Username" placeholder="Enter Username:" required><br>
                    <input type="password" id="Password" placeholder="Enter Password" required><br>
                    <input type="submit" id="Submit" value="Submit" >
                </form>
                <!--<ul>
                    <li id="list">Value1</li>
                    <li id="list">Value2</li>
                    <li id="list">Value3</li>
                    
                </ul>-->
            </section>
            

        </div>



<script src="main.js"></script>
<script src="exercise1.js"></script>
<script src="DOM.js"></script>

.container{
    width: 100%;
    margin: auto;
    overflow:hidden; 
}
 body{   
    background: rgb(14,101,105);
    background: linear-gradient(90deg, rgba(14,101,105,1) 0%, rgba(219,83,56,1) 53%, rgba(255,42,0,1) 94%);
    font-style: normal;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    line-height: 1.1em;
    
}
.login-container{
    width: 500px;
    padding-top: 70px;
    padding-bottom: 30px;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);/*position on center*/
    text-align: center;
    background-color: rgba(0, 0, 0, 0.486);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.582);
    border-radius: 24px;
    height: auto;
}
.login-container h1{
    text-transform: uppercase;
    padding-bottom: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    text-align: center;
    margin:auto;
    color:white;
    letter-spacing: 0.1em;
}
.login-container input[type="text"] , .login-container input[type="password"]{
    border:0;
    background: 0;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    margin-top: 20px;
    border: yellow solid 2px;
    border-radius: 20px;
    width: 200px;
    color:white;
    outline: none; 

}

.login-container input[type="Submit"]{
    padding:10px;
    margin:20px;
    width:170px;
    border-radius: 240px;
    font-size: 20px;
    font-weight: 600;
    background: none;
    border: white 1px solid;
    color:white
}
.login-container input[type="Submit"]:hover{
    background: linear-gradient(90deg, rgba(14,101,105,1) 0%, rgba(219,83,56,1) 53%, rgba(255,42,0,1) 94%);
    cursor: pointer;
    color: cornsilk;

}
#list{
    list-style: none;
    font-size: 16px;
    text-align: left;
}
#msg{
    font-size: 15px;
    color: red;
}

const DOMcontainer=document.querySelector('.container')

const DOMForm=document.querySelector('#form')
    
const DOMLogin=document.querySelector('.login-container')

const DOMUname=document.querySelector('#Username')

const DOMPassword=document.querySelector('#Password')
const Message=document.querySelector('#msg')

//manipulate
//const DOMul=document.querySelector('ul')
//DOMul.children[1].textContent="haha"
//DOMul.lastElementChild.innerHTML='<h1 style = color: white;>"BIG"</h1>'

//const btn =document.querySelector('#Submit')
//btn.style.background="blue"


//DOM EVents
const btn =document.querySelector('#Submit')
btn.addEventListener("click",function(e){
    e.preventDefault()
    console.log('Button was clicked')

//manipulating again
const DOMLogin1=document.querySelector('.login-container')
const btn1 =document.querySelector('#Submit')
btn.addEventListener("click",function(e1){
    e1.preventDefault()
    DOMLogin1.style.background="black"


})

if (DOMUname.value.length === 0 || DOMPassword.value.length ===0 ){
    console.log("False");
    Message.innerHTML="<p class='error'>Please Complete</p>";
    setTimeout(()=> document.querySelector('.error').remove(), 2000)
    

}else{
    console.log("True")
    DOMForm.submit()
}
})