Estoy intentando crear una especie de trello minimalista para aprender un poco mas de javascript, llevo un par de horas intentando hacer esto, pero no consigo forma de crear una nueva lista, a que me refiero, al tocar el + de abajo a la derecha te da la opcion de crear una lista, el tema es que no se como hacerlo, llevo buscando hace un buen rato y no encuentro nada, quiero que en el elemento 'contenedor' se añada una lista nueva copiando el codigo ya escrito adentro de el, gracias de antemano!
var addListButton;
onload = function(){
addListButton = false;
if (addListButton == false){
document.getElementById('add-list').innerHTML="+";
}
}
function addList(){
if (addListButton == false){
addListButton = true;
document.getElementById('add-list-form').style.display = "block";
} else {
addListButton = false;
document.getElementById('add-list-form').style.display = "none";
}
if (addListButton == false){
document.getElementById('add-list').innerHTML="+";
} else {
document.getElementById('add-list').innerHTML="x";
}
}
function addElement(){
if (addListButton == false){
addListButton = true;
document.getElementById('add-list-form').style.display = "block";
} else {
addListButton = false;
document.getElementById('add-list-form').style.display = "none";
}
if (addListButton == false){
document.getElementById('add-list').innerHTML="+";
} else {
document.getElementById('add-list').innerHTML="x";
}
}
* {
margin: 0;
padding:0;
font-family: poppins;
}
.contenedor{
padding:2%;
}
.lista {
display: inline-block;
border: 1px solid #000;
border-radius: 15px;
padding: 2%;
margin: 1%;
}
.lista-head{
margin-bottom: 5%;
}
.elemento {
border: 1px solid #000;
padding: 5%;
margin-bottom: 3%;
}
.botones {
padding:1%;
}
.add{
border: 1px solid #000;
display: flex;
height: 70px;
width:70px;
margin-left: auto;
transition: ease-in-out .2s ;
transition-delay: 0ms;
}
.add > p{
margin: auto;
font-size: 2em;
}
.add:hover {
box-shadow: rgba(0,0,0,0.7) 0px 0px 10px;
}
.add-element {
width:50px;
margin-left:auto ;
height: 50px;
background: #000000;
color: #fff;
font-weight: 600;
font-size: 2em;
display: flex;
border: 1px solid #000;
border-radius:30px;
transition: ease-in-out .2s;
}
.add-element > p{
margin:auto;
}
.add-element:hover {
color:#000;
background:#fff;
box-shadow: rgba(0,0,0,0.5) 0px 0px 10px;
}
.add-list {
background:#000;
height:15vh;
padding:5%;
display: none;
transition: ease-in-out .2s;
}
.minimal-input {
background:#000;
border: 1px solid #fff;
padding:1%;
border-radius: 17px;
width:100%;
color: #fff;
margin-bottom: 1.5%;
}
.minimal-input::placeholder {
color:#fff;
}
.add-list > button {
color: #fff;
background:#000;
border:1px solid #fff;
padding:1% 4%;
border-radius: 35px;
transition: ease-in-out .2s;
}
.add-list > button:hover {
color: #000;
background:#fff;
}
.add-element-modal {
background:#000;
height:15vh;
padding:5%;
display:none;
transition: ease-in-out .2s;
}
<div class="contenedor" id="contenedor">
<div class="lista">
<div class="lista-head">
<h2>Titulo</h2>
</div>
<div class="lista-body">
<div class="elemento">
<div class="elemento-titulo">
<h3>Lorem, ipsum.</h3>
</div>
<div class="elemento-desc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, ullam.</p>
</div>
</div>
<div class="elemento">
<div class="elemento-titulo">
<h3>Lorem, ipsum.</h3>
</div>
<div class="elemento-desc">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, ullam.</p>
</div>
</div>
</div>
<div class="lista-footer">
<div class="add-element">
<p>+</p>
</div>
</div>
</div>
</div>
<div class="botones">
<div class="add" onclick="addList()"><p id="add-list"></p></div>
</div>
<div class="add-list" id="add-list-form">
<input class="minimal-input" type="text" placeholder="Nombre de la lista" name="" id="new-list-name">
<button onclick="newList()">Añadir</button>
</div>
<div class="add-element-modal">
<input class="minimal-input" type="text" placeholder="Nombre del elemento" name="" id="new-list-name">
<input class="minimal-input" type="text" placeholder="Descripción del elemento" name="" id="new-list-name">
</div>