Todo App using HTML, CSS, Sass and Javascript

Community feedback

• 

  Maksim Deviatilov•185

  @maksimcoderPosted over 3 years ago

  Hello, Aayushi, I've looked through your JS code and have some tips for you as I would do if I were you.

  1. When you create a function createtodoElement(val) use Class in order to automate and avoid repeating your code.
  2. When you're adding an eventListener on footer buttons, use cycles or forEach method to automate the process. (activeBtn.classList.remove("active"); completedBtn.classList.remove("active"); => footerBtns.forEach(item => item.classList.remove('active');) I hope this tips will help you in future even if you knew them before. By the way, I'm currently working on this project and that's awesome that you did it!

  0

  ---

  

  aayushi simzia•355

  @iucsimPosted over 3 years ago

  Hi @maksimcoder,

  Thank you so much for your feedback.

  I didn't get how to use class to automate it..It's good for me if you can explain me in brief so I can improve it. And forEach that's awesome idea I'll improve it.

  All the very best to you for this project! Can't wait to see your solution..

  Have a nice day and happy coding : )

  0

  

  Maksim Deviatilov•185

  @maksimcoderPosted over 3 years ago

  @iucsim, Here is my example how to make it via Classes, of course, it's not that awesome but still it's works very well.

  class TodoConstructor {
      constructor(input, parentSelector) {
          this.value = input.value;
          this.parent = document.querySelector(parentSelector);
      }
  
      
      render() {
          if (document.querySelector('.text-container')) {
              document.querySelector('.text-container').remove();
          }
          
          
          const newTodo = document.createElement('div');
          newTodo.classList.add('new-todo-container');
  
          newTodo.innerHTML = `
              <div class="checkbox-wrapper">
                  <input type="checkbox" id="new-todo-${count}"  name="inputs" class="custom-checkbox">
                  <label for="new-todo-${count}">
                  <svg xmlns="http://www.w3.org/2000/svg" width="11" height="9">
                      <path fill="none" stroke="#FFF" stroke-width="2" d="M1 4.304L3.696 7l6-6"/>
                  <svg>
                  </label>
              </div>
              <span class="todo-text">${this.value}</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" class="close close-enable"><path d="M16.97 0l.708.707L9.546 8.84l8.132 8.132-.707.707-8.132-8.132-8.132 8.132L0 16.97l8.132-8.132L0 .707.707 0 8.84 8.132 16.971 0z"/></svg>
          `;
          this.parent.prepend(newTodo);
          if (document.querySelector('.close-enable')) {
              bindTodoDelete();
          }
          count++;
      }
  }
  function createNewTodo() {
      input.addEventListener('keydown', (e) => {
          if (e.code === "Enter" && input.value !== '') { 
              new TodoConstructor(input, '.content-container').render();
              input.value = '';
          }
      });
  }
  

  Here I've a constructor and a render() method which prepends a new block into DOM.

  1

  

  aayushi simzia•355

  @iucsimPosted over 3 years ago

  Hi @maksimcoder,

  It's look too nice using constructor and render() method. I'll definitley improve it in short time.

  Thanks a lot : )

  Have a nice day!

  0