html.agile

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>agile</title>
        <link rel="stylesheet" href="css.css">
    </head>
    <body>
            <div class="wrapper">
              <header class="main-header">
                <h2>Welcome</h2>
              </header>
              <main class="container">
                <header class="secondary-header">
                  <h1>JIT Agile</h1>
                  <small>To help teams work together</small>
                </header>
                <form>
                  <div class="inputs">
                    <label>
                      <img src="email.svg" />
                      <input type="email" placeholder="example@email.com" required />
                    </label>
                    <label>
                      <img src="padlock.svg" />
                      <input type="password" placeholder="password" id="pass" required/>
                      <img class="pointer passbtn" src="eye.svg" />
                    </label>
                  </div>
                  <div class="buttons">
                    <button type="submit">Log in</button>
                    <a href="/register.html">Register</a>
                  </div>
                </form>
              </main>
            </div>
<script>
function pass(){
    var a=document.getElementById("pass").getAttribute("type");
    if(a==="password"){
        document.getElementById("pass").setAttribute("type","text");
    }else{
        document.getElementById("pass").setAttribute("type","password");
    }
}
const passbtn=document.querySelector('.passbtn')
passbtn.addEventListener('click',pass);
</script>

          </body>


</html>