2
\$\begingroup\$

I made todo app in vanilla JS with functionalities like add todo, delete todo, edit todo, complete todo.. so, I think my code is not really good and I want to hear any suggestions on how to improve code and similar..

Here is the link: http://dash.vision-themes.com/

HTML:

<section id="todo">
    <!---- Todo navigation ---->
    <div class="todo-nav">
        <div class="nav__logo">
            <img src="images/K.png" alt="">
        </div>
        <div class="nav__form-container">
            <h1>Make your first task!</h1>
            <a href="#" class="nav__button">New task <span><i class="fas fa-plus"></i></span></a>
            <form onsubmit = "event.preventDefault();" class="nav__form">
                <i class="fas fa-times"></i>
                <input type="text" class="form__title" placeholder="Todo Title">
                <textarea name="" class="form__details" cols="35" rows="10" placeholder="Todo detailes"></textarea>
                <label for="select" class="priority">Priority:</label>
                <select class="styled-select">
                    <option value="High">High</option>
                    <option value="Low">Low</option>
                </select>
                <input type="submit" class="form__button" value="Create todo">
            </form>
        </div>
    </div> 
    <!----- Todo Content ------>
    <div id="scrollbar" class="todo-content">
        <div class="content__header">

            <h2 class="content__title"> <span><i class="fas fa-tasks fa-title"></i></span>Your active tasks:</h2>
            <ul class="content__todo"></ul>
        </div>
        <div class="content__modal-succes">
            <span><i class="fas fa-check"></i></span><p>Todo task will be shown in section bellow.</p>
        </div>
        <div class="content__modal-warning">
            <span><i class="fas fa-exclamation-triangle"></i></span><p>You cannot leave that empty!</p>
        </div>
    </div>
</section>

JavaScript:

(function() {
  const showFormButton = document.querySelector(".nav__button");
  var form = document.querySelector(".nav__form");
  const createTodoButton = document.querySelector(".form__button");
  var todos = document.querySelector(".content__todo");
  var modalWarning = document.querySelector(".content__modal-warning");
  var modalSucces = document.querySelector(".content__modal-succes");
  var closeformIcon = document.querySelector(".fa-times");

  // Create todo task
  function createTodoTask() {
    // Store todo title
    var todoTitle = document.querySelector(".form__title");

    // Store todo details
    var todoDetailes = document.querySelector(".form__details");

    // Store todo priority level
    var todoPriority = document.querySelector(".styled-select")
      .selectedOptions[0].value;

    // Create li with class
    var todoTask = document.createElement("li");
    todoTask.classList.add("todo__task");

    // Create h6 with class and append title value
    var todoTaskTitle = document.createElement("h6");
    todoTaskTitle.classList.add("todo__title");
    todoTaskTitle.innerHTML = todoTitle.value;

    // Create priority icon
    var completedIcon = document.createElement("i");
    completedIcon.classList.add(
      "fas",
      "fa-check-circle",
      "fa-pulse",
      "fa-completed"
    );

    // Create delete icon
    var deleteIcon = document.createElement("i");
    deleteIcon.classList.add("fas", "fa-ban", "fa-delete");

    // Create span
    var paragraphTitle = document.createElement("span");
    paragraphTitle.innerHTML = "Details:";

    // Create paragraph and append value
    var todoTaskDetails = document.createElement("p");
    todoTaskDetails.innerHTML = todoDetailes.value;

    // Create priority level and append value
    if (todoPriority === "High") {
      var priorityLeverHigh = document.createElement("span");
      priorityLeverHigh.classList.add("priority-title");
      priorityLeverHigh.innerHTML = "Priority:" + " " + todoPriority;
      todoTask.appendChild(priorityLeverHigh);
    } else if (todoPriority === "Low") {
      var priorityLeverLow = document.createElement("span");
      priorityLeverLow.classList.add("priority-title");
      priorityLeverLow.innerHTML = "Priority:" + " " + todoPriority;
      todoTask.appendChild(priorityLeverLow);
    }

    // Append h6 to li
    todoTask.appendChild(todoTaskTitle);
    // Append priority icon to li
    todoTask.appendChild(completedIcon);
    // Append delete icon to li
    todoTask.appendChild(deleteIcon);
    // Append span to li
    todoTask.appendChild(paragraphTitle);
    // Append p to li
    todoTask.appendChild(todoTaskDetails);
    // Append li to ul
    todos.appendChild(todoTask);

    // Clear title and details fields
    todoTitle.value = "";
    todoDetailes.value = "";
  }

  // Edit todo
  function editTodo() {
    var todoTitle = document.querySelectorAll(".todo__title");
    for (let i = 0; i < todoTitle.length; i++) {
      todoTitle[i].addEventListener("click", () => {
        todoTitle[i].contentEditable = true;
      });
    }
  }

  // Delete todo
  function deleteTodo() {
    var deleteTodoIcon = document.querySelectorAll(".fa-delete");
    for (let i = 0; i < deleteTodoIcon.length; i++) {
      deleteTodoIcon[i].addEventListener("click", e => {
        // Delete parent element from DOM
        e.currentTarget.parentNode.remove();
      });
    }
  }

  // Complete todo
  function checkComplete() {
    var todoTaskItem = document.querySelectorAll(".fa-completed");
    for (let i = 0; i < todoTaskItem.length; i++) {
      todoTaskItem[i].addEventListener("click", e => {
        // Change class of parent
        e.currentTarget.parentNode.classList.add("completed");
      });
    }
  }

  // Display todo task
  createTodoButton.addEventListener("click", () => {
    var todoTitle = document.querySelector(".form__title");
    if (todoTitle.value === "") {
      showModalWarning();
    } else {
      showModalSucces();
      hideTodoForm();
      createTodoTask();
      editTodo();
      deleteTodo();
      checkComplete();
    }
  });

  // Show todo task form on click
  showFormButton.addEventListener("click", () => {
    showTodoForm();
  });

  // Close todo task form on click on x icon
  closeformIcon.addEventListener("click", () => {
    hideTodoForm();
  });

  // Show modal warning
  function showModalWarning() {
    modalWarning.querySelector(".content__modal-warning");
    modalWarning.classList.add("show");
    // Hide modal after 1 second
    setTimeout(() => {
      modalWarning.classList.remove("show");
    }, 1000);
  }

  // Show modal succes
  function showModalSucces() {
    modalSucces.querySelector(".content__modal-succes");
    modalSucces.classList.add("show");
    // Hide modal after 1 second
    setTimeout(() => {
      modalSucces.classList.remove("show");
    }, 1000);
  }

  // Show
  function showTodoForm() {
    form.style.display = "inline-block";
  }
  // Hide
  function hideTodoForm() {
    form.style.display = "none";
  }

})();
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.