Can't add a NEW ROW - Html

olamundo97
April 5, 2023
143 views
0 votes
2 Answers

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>

Answers

- Newbee
- April 5, 2023 at 8:21 pm
- 0 votes
0
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.

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Can't add a NEW ROW – Html

Answers