0

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>

2 respuestas 2

0

En tu pregunta no incluiste la función newList(). Funciona así:

  1. Obtienes el campo de texto de la ventana modal, después se va usar el valor nombre.value para asignar el título a la lista.
  2. Creas un nuevo elemento div
  3. Asignas la clase lista
  4. Creas el contenido HTML usando plantilla de texto para evitar concatenaciones y facilitar la lectura
  5. Finalmente agregas la nueva lista al contenedor con appendChild()

let addListButton;
// Crear variable del contenedor donde se van a agregar las listas nuevas
let contenedor;
    window.onload = function(){
        contenedor = document.getElementById('contenedor');
        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";
        }
    }
    // Función newList que no incluiste en tu pregunta
    function newList() {
        // Obtener campo de texto del modal
        let nombre = document.getElementById('new-list-name');
        // Crear nuevo elemento div
        let lista = document.createElement('div');
        // Asignar clase
        lista.className = 'lista';
        // Contenido de la lista
        lista.innerHTML = `
            <div class="lista-head">
                <h2>${nombre.value}</h2>
            </div>
            <div class="lista-body">
            </div>
            <div class="lista-footer">
                <div class="add-element"><p>+</p></div>
            </div>
        `;
        // Agregar lista al contenedor
        contenedor.appendChild(lista);
    }
* {
        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>

Con este ejemplo ya te será fácil agregar elementos a cada lista, lo único que deberás hacer es averiguar en cuál lista se encuentra el botón al que se hizo clic para buscar el lista-body correspondiente.

-1

Creo que esto puede ayudarte a encontrar como añadir un objeto en html

https://stackoverflow.com/questions/17650776/add-remove-html-inside-div-using-javascript

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.