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>
2
Answers
In your javascript.
Replace your InputValue FROM
const inputValue = input.value;
TOconst inputValue = input.value + '<br>';
This<br>
will make a new line.Then, to remove comma change the innerHTML FROM
text.innerHTML = data.toDo;
TOtext.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.
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 youraccepetData
function you canmap
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 youjoin
it up into a (HTML) string once the iteration is complete.I’ve adjusted the CSS a little to accommodate these changes.