skip to Main Content

I’m building a simple To Do list. And the problem that came out to me during my code is that, I can’t add a new white square (card) with the task that I wrote. The code simply put together in the same square the new input with the old one, that is not what I want. I want a new square everytime I create a new task. In the image below, I have two tasks, the code put them together. That is not what I wanted. I want a new square for the task one and task 2, this wa, they could be separated

//CRUD (Create, Read, Update, Delete) -> allows you to create data, read data, edit it, and delete those data.

// Passo 1: mostrar o MODAL (CREATE)
const overlay = document.querySelector('.overlay'); 

function showModal(){
    overlay.classList.add("in");
}

// Passo 2: Esconder o MODAL
function hideModal(){
    overlay.classList.remove("in");
}

//Passo 3: CHAMAR AS FUNÇÕES QUndo clicamos no botão
const buttons = document.querySelectorAll(".add-card");

buttons.forEach((btn) => {
    btn.onclick = (event) =>{
        showModal();
    }
})

const modalCancel = document.querySelector('.modal-button.cancel');
modalCancel.addEventListener('click', () => {
    hideModal();
})

//Passo 4 - Fazer o botão CONFIRMAR funcionar & pegar o valor do input;
const modalConfirm =  document.querySelector('#confirmButton');
let input = document.getElementById('inputText');
let square = document.querySelector('.adding-task');
let text = document.querySelector('.task-descrip');

const data = {
    toDo: [],
    doing: [],
    done: []
}; //Adicionar MAIS de UM item

const convertToArray = Object.keys(data);
console.log(convertToArray)

//Passo 5 - Adicionar alguma tarefa no conatiner;
function confirmButton(){
    modalConfirm.addEventListener('click', ()=>{
      hideModal();
      
      // Aqui eu pego o valor passado no input
      const inputValue = input.value;
      // Aqui eu dou um push desse valor para dentro do array 'toDo'
      data.toDo.push(inputValue);

  
      let accepetData = () => {
        text.innerHTML =  data.toDo;

      }
      accepetData();
  
      function showSquare(){
        const createSquare = square.classList.remove("hide");  

      }   
      showSquare();
        
    });
  }

  confirmButton();

//Passo 5 - CRIAR VÁRIAS TAREFAS;







   
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    font-family: Arial, Helvetica, sans-serif;
    --red: rgb(247, 14, 14);
    --pink: rgb(218, 13, 133);
    --blue: rgb(55, 136, 243);
}

body{
    background-color: #f1f1f1;
    padding: 2rem 2rem;
}

.cards{
    display: flex;
    gap: 18px;
    padding-top: 1rem;
    height: fit-content;


}

.card{
    border-radius: 4px;
    width: 334px;
    padding: 1rem;
    max-width:100%;
    max-height: 100%;
    box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.24);


}
.card.redd{
    background-color: var(--red);
}
.card.bluee{
    background-color: var(--blue);
}
.card.pinkk{
    background-color: var(--pink);
}

.stats{
    color: white;
    font-size: 22px;
    font-weight: 600;
    margin-right: 22px;  
    margin-bottom: 15px; 
}
.add-card{
    border: none;
    background: none;
    color: white;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    margin-left: 4px;
    margin-top: 32px;
}

.overlay{
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.overlay.in {
    display: flex;
    position: fixed;
}
/*<div class='modal in'></div>*/

.modal{
    background-color: white;
    width: 700px;
    height: 170px;
    padding: 2rem 2rem;
    position: relative;
}


.modal-title{
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 30px;
}
#inputText{
    background: none;
    border: none;
    border-bottom: 2px solid rgb(29, 96, 241);
    width: 100%;
    outline: none;
    font-size: 17px;

}    
.modal-button{
    border: none;
    background: none;
    color: rgb(25, 93, 240);
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    position: absolute;
    right: 18px;
    bottom: 20px;
}
.modal-button.cancel{
    margin-right: 107px;
    
}
.adding-task{
    width:100%;
    height: fit-content;
    background-color: white;
    padding: 21px 15px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
}

#newItem{
    display: flex;
    width: 100%;
    height: 60px;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    box-shadow: 1px 1px 5px var(--secondary-color);
}*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    font-family: Arial, Helvetica, sans-serif;
    --red: rgb(247, 14, 14);
    --pink: rgb(218, 13, 133);
    --blue: rgb(55, 136, 243);
}

body{
    background-color: #f1f1f1;
    padding: 2rem 2rem;
}

.cards{
    display: flex;
    gap: 18px;
    padding-top: 1rem;
    height: fit-content;


}

.card{
    border-radius: 4px;
    width: 334px;
    padding: 1rem;
    max-width:100%;
    max-height: 100%;
    box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.24);


}
.card.redd{
    background-color: var(--red);
}
.card.bluee{
    background-color: var(--blue);
}
.card.pinkk{
    background-color: var(--pink);
}

.stats{
    color: white;
    font-size: 22px;
    font-weight: 600;
    margin-right: 22px;  
    margin-bottom: 15px; 
}
.add-card{
    border: none;
    background: none;
    color: white;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    margin-left: 4px;
    margin-top: 32px;
}

.overlay{
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.overlay.in {
    display: flex;
    position: fixed;
}
/*<div class='modal in'></div>*/

.modal{
    background-color: white;
    width: 700px;
    height: 170px;
    padding: 2rem 2rem;
    position: relative;
}


.modal-title{
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 30px;
}
#inputText{
    background: none;
    border: none;
    border-bottom: 2px solid rgb(29, 96, 241);
    width: 100%;
    outline: none;
    font-size: 17px;

}    
.modal-button{
    border: none;
    background: none;
    color: rgb(25, 93, 240);
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    position: absolute;
    right: 18px;
    bottom: 20px;
}
.modal-button.cancel{
    margin-right: 107px;
    
}
.adding-task{
    width:100%;
    height: fit-content;
    background-color: white;
    padding: 21px 15px;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    
}
.adding-task.hide{
    display: none;
}

.task-descrip{
    font-weight: bold;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    word-wrap: break-word;
    word-break: break-all;
}
.options{
    cursor: pointer;
}


.task-descrip{
    font-weight: bold;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
    word-wrap: break-word;
    word-break: break-all;
}
.options{
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To do list- Projeto de alto escalão</title>
    <link rel="stylesheet" href="ToDoProject.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
    


</head>
<body>
        
    <h1>To do list</h1>

    <div class="cards">

        <div class="card redd">
            <p class="stats">🙂 To do</p>

            <div class="adding-task hide">
                <p class="task-descrip"></p>
                <span class="options">
                    <i class="fas fa-edit" style="margin-right: 2px;"></i>
                    <i class="fas fa-trash-alt"></i>
                  </span>
            </div>

            <button class="add-card" id="addcard-one">
                + ADICIONAR TAREFAS
            </button>
        </div>

        <div class="card bluee">
            <p class="stats">😀 Doing</p>
            
            <div class="adding-task hide">
                <p class="task-descrip"></p>
                <span class="options">
                    <i class="fas fa-edit" style="margin-right: 2px;"></i>
                    <i class="fas fa-trash-alt"></i>
                  </span>
            </div>
            
            <button class="add-card" id="addcard-two">
                + ADICIONAR TAREFAS
            </button>
        </div>

        <div class="card pinkk">
            <p class="stats">😎 Done</p>
            <p class="task-descrip">Nenhuma tarefa adicionada</p>
            <button class="add-card" id="addcard-three">
                + ADICIONAR TAREFAS
            </button>
        </div>
    </div>

    <div class="overlay in" id="overlay"> <!--TRANSPARENT-->
        <div class="modal">
            <div class="modal-title">
                <p>Texto da nota</p>
            </div>
            <div class="input-text">
                <input type="text" id="inputText">
            </div>

            <button class="modal-button cancel" id="cancelButton">CANCELAR</button>
            <button class="modal-button" id="confirmButton">CONFIRMAR</button>

        </div>
    </div>

    <script src="ToDoProject.js"></script>

</body>
</html>

enter image description here

2

Answers


  1. In your javascript.

    Replace your InputValue FROM const inputValue = input.value; TO const inputValue = input.value + '<br>'; This <br> will make a new line.

    Then, to remove comma change the innerHTML FROM text.innerHTML = data.toDo; TO text.innerHTML = data.toDo.join('');

    *This is just to separate the data from input. It’s also the same transaction in making a new card. In this innerHTML you can make a html build like creating a new Div’s for your task everytime you insert data.

    Login or Signup to reply.
  2. At the moment you have an array of todos but you’re assigning that whole array (as a string) to the innerHTML of .task-descrip. What you should be doing is iterating over the array and producing a nested element within .task-descrip with that todo information.

    I suggest you change .task-descrip to a unordered list (<ul>). Within your accepetData function you can map over the todos array and, for each element in the todo array, create a new list item. map returns a new array so you need to make sure you join it up into a (HTML) string once the iteration is complete.

    I’ve adjusted the CSS a little to accommodate these changes.

    //CRUD (Create, Read, Update, Delete) -> allows you to create data, read data, edit it, and delete those data.
    
    // Passo 1: mostrar o MODAL (CREATE)
    const overlay = document.querySelector('.overlay');
    
    function showModal() {
      overlay.classList.add("in");
    }
    
    // Passo 2: Esconder o MODAL
    function hideModal() {
      overlay.classList.remove("in");
    }
    
    //Passo 3: CHAMAR AS FUNÇÕES QUndo clicamos no botão
    const buttons = document.querySelectorAll(".add-card");
    
    buttons.forEach((btn) => {
      btn.onclick = (event) => {
        showModal();
      }
    })
    
    const modalCancel = document.querySelector('.modal-button.cancel');
    modalCancel.addEventListener('click', () => {
      hideModal();
    })
    
    //Passo 4 - Fazer o botão CONFIRMAR funcionar & pegar o valor do input;
    const modalConfirm = document.querySelector('#confirmButton');
    let input = document.getElementById('inputText');
    let square = document.querySelector('.adding-task');
    let text = document.querySelector('.task-descrip');
    
    const data = {
      toDo: [],
      doing: [],
      done: []
    }; //Adicionar MAIS de UM item
    
    const convertToArray = Object.keys(data);
    // console.log(convertToArray)
    
    //Passo 5 - Adicionar alguma tarefa no conatiner;
    function confirmButton() {
      modalConfirm.addEventListener('click', () => {
        hideModal();
    
        // Aqui eu pego o valor passado no input
        const inputValue = input.value;
        // Aqui eu dou um push desse valor para dentro do array 'toDo'
        data.toDo.push(inputValue);
    
        // `map` over the todos array and return a template string
        // describing an HTML list element with the todo text as text content
        // `join` up the array into a string upon completion
        let accepetData = () => {
          text.innerHTML = data.toDo.map(todo => {
            return `<li>${todo}</li>`;
          }).join('');
        }
    
        accepetData();
    
        function showSquare() {
          const createSquare = square.classList.remove("hide");
    
        }
        showSquare();
    
      });
    }
    
    confirmButton();
    
    //Passo 5 - CRIAR VÁRIAS TAREFAS;
    .add-card,.modal-button,.options{cursor:pointer}#newItem{display:flex;width:100%;height:60px;justify-content:space-between;align-items:center;padding:5px;box-shadow:1px 1px 5px var(--secondary-color)}*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Arial,Helvetica,sans-serif;--red:rgb(247, 14, 14);--pink:rgb(218, 13, 133);--blue:rgb(55, 136, 243)}body{background-color:#f1f1f1;padding:2rem}.cards{display:flex;gap:18px;padding-top:1rem;height:fit-content}.card{border-radius:4px;width:334px;padding:1rem;max-width:100%;max-height:100%;box-shadow:3px 4px 10px rgba(0,0,0,.24)}.card.redd{background-color:var(--red)}.card.bluee{background-color:var(--blue)}.card.pinkk{background-color:var(--pink)}.stats{color:#fff;font-size:22px;font-weight:600;margin-right:22px;margin-bottom:15px}.add-card{border:none;background:0 0;color:#fff;font-weight:700;font-size:15px;margin-left:4px;margin-top:32px}.overlay{background-color:rgba(0,0,0,.5);top:0;bottom:0;left:0;right:0;justify-content:center;align-items:center;display:none}.overlay.in{display:flex;position:fixed}.modal{background-color:#fff;width:700px;height:170px;padding:2rem;position:relative}#inputText,.modal-button{border:none;background:0 0}.modal-title{font-weight:700;font-size:20px;margin-bottom:30px}#inputText{border-bottom:2px solid #1d60f1;width:100%;outline:0;font-size:17px}.modal-button{color:#195df0;font-weight:700;font-size:15px;position:absolute;right:18px;bottom:20px}.modal-button.cancel{margin-right:107px}.adding-task.hide{display:none}
    
    .adding-task {
      width: 100%;
    }
    
    .task-descrip {
        list-style: none;
        margin-left: 0;
        padding: 0;
    }
    
    .task-descrip li { 
      margin-top: 0.5em;
      background-color: white;
      border-radius: 5px;
      padding: 0.25em;
    }
    <h1>To do list</h1>
    <div class="cards">
      <div class="card redd">
        <p class="stats">🙂 To do</p>
        <div class="adding-task hide">
          <ul class="task-descrip"></ul>
          <span class="options">
            <i class="fas fa-edit" style="margin-right: 2px;"></i>
            <i class="fas fa-trash-alt"></i>
          </span>
        </div>
        <button class="add-card" id="addcard-one">
            + ADICIONAR TAREFAS
        </button>
      </div>
      <div class="card bluee">
        <p class="stats">😀 Doing</p>
        <div class="adding-task hide">
          <p class="task-descrip"></p>
          <span class="options">
            <i class="fas fa-edit" style="margin-right: 2px;"></i>
            <i class="fas fa-trash-alt"></i>
          </span>
        </div>
        <button class="add-card" id="addcard-two">
          + ADICIONAR TAREFAS
        </button>
      </div>
      <div class="card pinkk">
        <p class="stats">😎 Done</p>
        <p class="task-descrip">Nenhuma tarefa adicionada</p>
        <button class="add-card" id="addcard-three">
          + ADICIONAR TAREFAS
        </button>
      </div>
    </div>
    <div class="overlay in" id="overlay">
      <!--TRANSPARENT-->
      <div class="modal">
        <div class="modal-title">
          <p>Texto da nota</p>
        </div>
        <div class="input-text">
          <input type="text" id="inputText">
        </div>
        <button class="modal-button cancel" id="cancelButton">CANCELAR</button>
        <button class="modal-button" id="confirmButton">CONFIRMAR</button>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search