Question 178696 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Styling issues. DOM

I was trying to code a simple To Do list with DOM and CSS concepts, starting with a function that appends new tasks to the html. And worked, but even that new tasks appended having the same class as the template one. They have a different detail, the template task have white spaces between the buttons, i don’t understand why this happens, even applying to the class " white space: break-spaces; " only the template take this style.

Maybe this is simple to fix, but i can’t figure out how.

Here is a image, only the template have white spaces

I would like to know, how disable this white spaces, or even add to all elements with the class .taskElement . I’m a lawful begginer counting on you guys 😀 . (my english is poor cuz i’m brazilian).

i’m leaving all the used code below.

/* Elements */
const mainContainer = document.getElementById('mainContainer');
const newTaskInput = document.getElementById('newTask');
const addTaskBtn = document.getElementById('addTaskBtn');

/* Functions */
const addNewTask = () => {
  const divTaskElement = document.createElement('div');
  divTaskElement.classList.add('taskElement');

  const divTaskElementName = document.createElement('div');
  divTaskElementName.classList.add('taskElementName')

  const taskName = document.createElement('p');
  taskName.classList.add('taskName');

  const taskElementButtons = document.createElement('div');
  taskElementButtons.classList.add('taskElementButtons');

  const form = document.createElement('form');
  form.classList.add('taskElementForm')

  const buttonDone = document.createElement('button');
  buttonDone.classList.add('doneTask');
  buttonDone.type = 'button'
  buttonDone.innerHTML = '<i class="fa fa-check mark-done" aria-hidden="true"></i>'

  /* const iDone = document.createElement('i');
      iDone.classList.add("fa", "fa-check", "mark-done", 'aria-hidden');
      iDone.ariaHidden = "true" */

  const buttonEdit = document.createElement('button');
  buttonEdit.classList.add('editTask');
  buttonEdit.type = 'button'
  buttonEdit.innerHTML = '<i class="fa fa-pencil mark-edit" aria-hidden="true"></i>'

  /* const iEdit = document.createElement('i');
      iEdit.classList.add("fa", "fa-pencil", "mark-edit", 'aria-hidden');
      iEdit.ariaHidden = "true"; */

  const buttonDelete = document.createElement('button');
  buttonDelete.classList.add('deleteTask');
  buttonDelete.type = 'button';
  buttonDelete.innerHTML = '<i class="fa fa-trash mark-delete" aria-hidden="true"></i>'

  /*const iDelete = document.createElement('i');
  iDelete.classList.add('fa', 'fa-trash', 'mark-delete', 'aria-hidden');
  iDelete.ariaHidden = "true";*/

  taskName.innerText = newTaskInput.value

  divTaskElementName.appendChild(taskName)

  /* buttonDone.appendChild(iDone);
      buttonEdit.appendChild(iEdit);
      buttonDelete.appendChild(iDelete); */

  form.appendChild(buttonDone);
  form.appendChild(buttonEdit);
  form.appendChild(buttonDelete);
  taskElementButtons.appendChild(form)

  divTaskElement.append(divTaskElementName, taskElementButtons)

  mainContainer.appendChild(divTaskElement)

  newTaskInput.value = "";

}

/* Event Listeners */

addTaskBtn.addEventListener('click', (ev) => {
  ev.preventDefault()
  addNewTask();
})
* {
  margin: 0;
  padding: 0;
  color: black;
  font-family: Roboto;
}

body {
  background-image: url("https://img.freepik.com/fotos-gratis/bela-foto-aerea-das-montanhas-de-fronalpstock-na-suica-sob-o-lindo-ceu-rosa-e-azul_181624-9315.jpg?w=740&t=st=1685292487~exp=1685293087~hmac=a3a9c4c05b295ac531b062fdc84cfe06319c97efd666aae1e6951555472f026f");
}

#mainContainer {
  justify-content: center;
  text-align: center;
  width: 48%;
  margin: 13% auto 0 auto;
  background-color: white;
  border: 2px white solid;
  border-radius: 11px;
}

#mainContainerTitle {
  margin-top: 1.4%;
  font-size: 28px;
}

.hr {
  width: 98%;
  margin: 0 auto 0 auto;
}

#newTaskContainer {
  font-size: 20px;
  margin: 2% 0 1% 0;
}

.fa-plus {
  padding: 1px 3px 1px 3.5px;
}

#searchingContainer {
  font-size: 20px;
  margin: 1.6% 1.5% 2% 1%;
  display: flex;
  justify-content: space-between;
}

.fa-delete-left {
  padding: 1px 2.5px 1px 2.5px;
}

#filterContainer {
  display: flex;
}

#filterSelect {
  padding: 1% 1% 1% 0;
  margin-left: 2%;
}

.taskElement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: break-spaces;
  margin-top: 1%;
  width: 99%;
}

.taskElementName {
  margin-left: 1%;
}
<!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" />
  <link href="style/styles.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet" />
  <script src="scripts/index.js" defer></script>
  <title>To do list</title>
</head>

<body>
  <div id="mainContainer">
    <div id="newTaskContainer">
      <h1 id="mainContainerTitle">To do list</h1>
      <form>
        <label for="newTask">Task:</label>
        <input type="text" id="newTask" />
        <button type="submit" id="addTaskBtn">
                        <i class="fa-sharp fa-light fa-plus"></i>
                    </button>
      </form>
    </div>
    <hr class="hr" />
    <div id="searchingContainer">
      <div id="searchContainer">
        <form>
          <label for="searchInput">Search:</label>
          <input type="text" id="searchInput" />
          <button type="button">
            <i class="fa-solid fa-delete-left"></i>
          </button>
        </form>
      </div>
      <div id="filterContainer">
        <label for="filterSelect" id="filterSelectLabel">Filtrar:</label>
        <select id="filterSelect">
          <option value="all">All</option>
          <option value="pendent">Pendent</option>
          <option value="done">Done</option>
        </select>
      </div>
    </div>
    <hr class="hr" />

    <div class="taskElement">
      <div class="taskElementName">
        <p class="taskName">Template task</p>
      </div>
      <div class="taskElementButtons">
        <form class="taskElementForm">
          <button type="button" class="doneTask">
            <i class="fa fa-check mark-done" aria-hidden="true"></i>
          </button>
<button type="button" class="editTask">
            <i class="fa fa-pencil mark-edit" aria-hidden="true"></i>
          </button>
          <button type="button" class="deleteTask">
            <i class="fa fa-trash mark-delete" aria-hidden="true"></i>
          </button>
        </form>
      </div>
    </div>
  </div>
</body>

</html>
Tags:

2

Answers


  1. 0

    You just have to remove the white-space: break-spaces; property of your taskElement CSS class.

    .taskElement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* white-space: break-spaces; */
    margin-top: 1%;
    width: 99%;
}

    The problem was your HTML containing white-space, because you indented your HTML and told your CSS that it should not ignore the white-space (which it does by default).

    As described in the MDN CSS documentation:

    break-spaces

    The behavior is identical to that of pre-wrap, except that…

    And

    pre-wrap

    Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

    This did not happen when you were generating new tasks, because it was done programmatically by your JavaScript, without any white-space to parse.

    Login or Signup to reply.
  2. 0

    I think that the solution if i understand you probleme is you need to set to the .taskElement {
    justify-content:center;

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search