css 无法添加新行

dfty9e19  于 2023-04-08  发布在  其他
关注(0)|答案(2)|浏览(89)

我正在构建一个简单的待办事项列表。在编写代码时遇到的问题是，我不能添加一个新的白色方块（卡片）与我写的任务。代码简单地将新输入与旧输入放在同一个方块中，这不是我想要的。每次创建新任务时，我都想要一个新方块。在下面的图像中，我有两个任务，代码把它们放在一起了。这不是我想要的。我想要一个新的任务1和任务2的正方形，这是，他们可以分开

//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>

css

2条答案

按热度按时间
zlhcx6iw

zlhcx6iw1#

在你的javascript中。
替换你的 InputValue FROM const inputValue = input.value; TO**const inputValue = input.value + '<br>';这个<br>将构成一个新行。
然后，要删除 * 逗号 ，请将 innerHTML FROM text.innerHTML = data.toDo; 更改为text.innerHTML = data.toDo.join('');*

  • 这只是为了将数据与输入分开。这也是制作新卡的相同事务。在这个 innerHTML 中，您可以在每次插入数据时为您的任务创建一个html构建，就像创建一个新Div一样。
赞(0）分享  回复(0）举报  2023-04-08
jvidinwx

jvidinwx2#

现在你有一个todo数组，但是你把整个数组（作为一个字符串）赋值给.task-descrip的innerHTML。你应该做的是迭代这个数组，并在.task-descrip中生成一个嵌套的元素，其中包含todo信息。
我建议你将.task-descrip改为一个无序列表（<ul>）。在accepetData函数中，你可以对todos数组执行map，并为todo数组中的每个元素创建一个新的列表项。map返回一个新的数组，所以你需要确保在迭代完成后将它转换为一个（HTML）字符串。
我已经调整了CSS一点，以适应这些变化。

//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>
赞(0）分享  回复(0）举报  2023-04-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com