I am trying to create a container that contains two forms.I want to show only one form at a time. Each form can be accessed when clicking on their respective tab and hide the other form. But when i tried doing this i ended up in a situation where when i am clicking on the other tab to access the 2nd form then both of my form disappeared and only tabs remains their on the screen.
The desired output will be i should be able to toggle between the form.
I Had tried to debug but didn't got where i am going wrong.
Here is my javascript, HTML and CSS code:
const tabs = document.querySelectorAll(".tab");
const forms = document.querySelectorAll(".form-div");
const removeActiveTab = () =>{
tabs.forEach(tab => tab.classList.remove("active"));
};
const removeActiveForm = () => {
forms.forEach(form => form.classList.remove("current"));
};
function setActiveForm(tab){
removeActiveForm();
forms.forEach(form => {
if (tab.classList.contains(form.dataset['form'])){
form.classList.add('current')
}
});
}
function setActiveTab(tab){
if(!tab.classList.contains("active")){
removeActiveTab();
tab.classList.add("active");
}
}
tabs.forEach(tab => {
tab.addEventListener("click", () =>{
setActiveTab(tab);
setActiveForm(tab);
});
});*{
margin : 0;
padding: 0;
box-sizing: border-box;
}
html,
body{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #e6eeff;
}
.main-div{
background-color:#1a2a4d;
padding: 3rem;
width: 700px;
}
.tabs{
display: flex;
}
.tab{
flex: 1;
text-align: center;
color: #fff;
cursor: pointer;
border: 2px solid #02a1fd;
transition: background 300ms;
}
.tab:hover{
background-color: #02a1fd;
}
.tab:nth-child(1){
border-radius: 25px 0 0 25px;
}
.tab:nth-child(2){
border-radius: 0 25px 25px 0;
}
.tab h2{
padding: .5rem 1rem;
}
.active{
background-color: #02a1fd;
}
.form-div{
display: none;
opacity: 0;
}
.current{
display: block;
animation: fadeIn 500ms ease-in forwards;
}
.form-div h1{
text-align: center;
color: #fff;
padding: 1rem 0;
}
.input{
padding: .5rem 1rem;
}
.input label{
padding: 0.3rem 0.6rem;
font-size: 1.3rem;
color: #fff;
}
.req{
color: #02a1fd;
}
.input input{
width: 100%;
padding: .3rem;
font-size: 1.3rem;
background-color: transparent;
color: #fff;
border: 1px solid #fff;
outline: 0;
}
.input input:focus{
border: 1px solid #02a1fd;
}
.form-submit{
padding: .5rem 1rem;
}
.form-submit input{
padding: 1rem;
width: 100%;
font-size: 1.5rem;
background-color: #02a1fd;
border: 0;
color: #fff;
}
.form-submit input:hover{
background-color: #02886d;
}
@keyframes fadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}<!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="style.css">
<title>Document</title>
</head>
<body>
<div class="main-div">
<div class="tabs">
<div class="tab encryption active"><h2>Encryption</h2></div>
<div class="tab decryption"><h2>Decryption</h2></div>
</div>
<div class="form-div current" data-form="Encryption">
<h1>Encryption</h1>
<form action="#">
<div class="input">
<label for="plaintext">Enter Plain text </label>
<input type="text" id="plaintext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="form-submit">
<input type="submit" value="encryption">
</div>
</form>
</div>
<div class="form-div" data-form="Decryption">
<h1>Decryption</h1>
<form action="#">
<div class="input">
<label for="decryptiontext">Enter Encrypted text </label>
<input type="text" id="decryptiontext">
</div>
<div class="input">
<label for="password">Enter password </label>
<input type="password" id="password">
</div>
<div class="input">
<label for="key">Enter key </label>
<input type="number" id="key">
</div>
<div class="form-submit">
<input type="submit" value="decryption">
</div>
</form>
</div>
</div>
<script src="main.js"></script>
</body>
</html>Thanks in advance
Aucun commentaire:
Enregistrer un commentaire