0

I am assigned to create this to do list using eventlisteners and using JavaScript. My HTML and CSS are given to me however I believe I may be confusing my Id's with each other. The expectation is that a new item is added to the list, can be deleted from the list when clicked on the trashcan, and the input is cleared. Any advice on what I am missing would be helpful... I've been staring at this for 7hrs now.

const todoObjectList = [];

class toDo_Class {
    constructor(item) {
        this.ulElement = item;
    }

    add() {
        const todoInput = document.querySelector("#todo-input").value;
        if (todoInput == "") {
            alert("Nothing was entered!");
        } else {
            const todoObject = {
                id: todoObjectList.length,
                todoText: todoInput,
                isDone: false,
            };

            todoObjectList.unshift(todoObject);
            this.display();
            document.querySelector("#todo-input").value = '';

        }
    }

    done_undone(x) {
        const selectedTodoIndex = todoObjectList.findIndex((item) => item.id == x);
        console.log(todoObjectList[selectedTodoIndex].isDone);
        todoObjectList[selectedTodoIndex].isDone == false ? todoObjectList[selectedTodoIndex].isDone == true : todoObjectList[selectedTodoIndex].isDone = false;
        this.display();
    }

    deleteElement(z) {
        const selectedDelIndex = todoObjectList.findIndex((item) => item.id == z);
        todoObjectList.splice(selectedDelIndex, 1);
        this.display();
    }


    display() {
        this.ulElement.innerHTML = "";
        todoObjectList.forEach((object_item) => {

            const liElement = document.createElement("li");
            const delBtn = document.createElement("i");

            liElement.innerText = object_item.todoText;
            liElement.setAttribute("data-id", object_item.id);

            delBtn.setAttribute("data-id", object_item.id);
            delBtn.classList.add("fas fa-trash-alt");

            liElement.appendChild(delBtn);

            delBtn.addEventListener("click", function(e) {
                const deleteId = e.target.getAttribute("data-id");
                toDoList.deleteElement(deleteId);
            });

            liElement.addEventListener("click", function(e) {
                const selectedId = e.target.getAttribute("data-id");
                toDoList.done_undone(selectedId);
            });

            if (object_item.isDone) {
                liElement.classList.add("checked");
            }

            this.ulElement.appendChild(liElement);
        });
    }
}

const listSection = document.querySelector("#todo-ul");

toDoList = new toDo_Class(listSection);

document.querySelector("#todo-btn").addEventListener("click", function() {
    toDoList.add();
});

document.querySelector("#todo-input").addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
        toDoList.add();
    }
});
body {
  background-color: #34495e;
  font-family: "Lato", sans-serif;
}

button {
  margin: 0 auto;
  float: right;
}

.centered {
  margin: 0 auto;
  width: 80%;
}

.card {
  margin: 50px auto;
  width: 18rem;
}
i {
  float: right;
  padding-top: 5px;
}
<html lang="en">
  <body>
    <div class="card">
      <div class="card-body">
        <h3 class="card-title">Today's To Do List</h3>
        <form id="todo-form">
          <div class="form-group">
            <input type="text" class="form-control" id="todo-input" placeholder="What else do you need to do?">
          </div>
          <div class="form-group">
            <input type="submit" id="todo-btn" class="btn btn-secondary btn-block" value="Add Item To List">
          </div>
        </form>
      </div>
      <ul class="list-group list-group-flush" id="todo-ul">
        <li class="list-group-item">Pick up groceries <i class="fas fa-trash-alt"></i>
        </li>
      </ul>
    </div>
  </body>
</html>
Travis Loiselle
  • 1
  • clicking on the submit button submits the form and reloads the page. You need to disable that. – Barmar Jun 18 '22 at 21:19
  • [`classList.add()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#examples) expects multiple single token strings so `delBtn.classList.add("fas fa-trash-alt");` should be `delBtn.classList.add("fas","fa-trash-alt");` – pilchard Jun 18 '22 at 21:23
  • @Barmar the second error was a mistake with `classList.add()` perhaps add [Is there a way to add/remove several classes in one single instruction with classList?](https://stackoverflow.com/questions/11115998/is-there-a-way-to-add-remove-several-classes-in-one-single-instruction-with-clas) to the list of dupes – pilchard Jun 18 '22 at 21:28
  • Okay I've included var form = document.getElementById("todo-form"); function handleForm(event) { event.preventDefault(); } form.addEventListener('submit', handleForm); which has prevented the page from refreshing each time. However I've looked into elem.classList.add("first","second","third"); though I'm not sure what I should remove and replace with this code. Any suggestions? – Travis Loiselle Jun 19 '22 at 00:52

0 Answers0