HTML:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="estilo.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<section id="box">
<form id="form1">
<h1>Login</h1>
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<div>
<button id="btns">Signup</button>
<input type="submit" value="Login"/>
</div>
</form>
<form id="form2">
<h1>Signup</h1>
<input type="text" placeholder="Name"/>
<input type="email" placeholder="Email"/>
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<input type="password" placeholder="Confirm Password"/>
<div>
<button id="btnl">Back</button>
<input type="submit" value="Signup"/>
</div>
</form>
</section>
</body>
</html>
CSS:
@import url('https://fonts.google...amily=Roboto');
html, body{
font-family: 'Roboto', sans-serif;
width:100%;
background-image:-webkit-linear-gradient(#5b82c1,#74a6f7);
margin:0;
padding:0;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
#box{
display:flex;
align-items: center;
flex-flow: column wrap;
width: 30%;
background-color:#fff;
padding:18px;
}
h1{
color:#5b82c1;
font-size:2em;
;
}
form{
width:90%;
}
form input{
border:none;
}
form input[type="text"],
form input[type="email"],
form input[type="password"]{
width:100%;
height:35px;
font-size:20px;
margin-bottom:8%;
}
form input[type="submit"]{
background-color:#5b82c1;
width:95px;
height:45px;
font-size:1.5em;
color:#fff;
margin-left:46%;
}
button{
border:none;
background-color:#5b82c1;
width:95px;
height:45px;
font-size:1.5em;
color:#fff;
}
.hiddenclass{
display:none;
}
.showclass{
display:block;
}
The code in javascript that I tried:
var form1, form2, btns, btnl;
window.onload = function () {
form1 = document.getElementById("form1");
form2 = document.getElementById("form2");
btns = document.getElementById("btns");
btnl = document.getElementById("btnl");
form2.className = "hiddenclass";
btns.addEventListener("click", function(){
form1.className = "hiddenclass";
form2.className = "shownclass";
});
btnl.addEventListener("click", function(){
form1.className = "shownclass";
form2.className = "hiddenclass";
});
};