I would like to ask how can I remove the 'active' class from 'todo_input_container' if I click outside from 'todo_input-field'? And also I would like to ask why this transation scale is not working properly when I click on the 'add_btns'? I tried to solve it with javascript, but didn't work eiter

const add_btns = document.querySelectorAll('.todo-container .add_btn');
const todo_input_container = document.querySelector('.todo_input-container');

add_btns.forEach(e => {
    e.addEventListener('click', () => {
        todo_input_container.classList.add('active');        
    })
})

.todo_input-container {
  display: none;
  transform: scale(0);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  transition: .4s ease;
}

.todo_input-container.active {
  display: block;
  transform: scale(1);
}

<div >
  <button >
    <i ></i>
  </button>
</div> 

<div >
  <div >
    <form>
      <input  type="text">
      <textarea id="todo_text" name="message"  rows="1" maxlength="30000"></textarea>
      <div >
        <button type="submit" id="submit_btn" >
          Add 
        </button>
      </div>
    </form>
  </div>
</div>

CodePudding user response：

If your target element is an input you can try to listen to blur event.

todo_input_container.addEventListener('blur', () => {
  todo_input_container.classList.remove('active');
})

Also you can try to do it all with css:

.todo_input-container:focus {
  display: block;
  transform: scale(1);
}

EDIT

Since the main problem is listening the "click outside" event, you could listen to a click event on the document, or another div that contains your element. Then when you get a click, you check if its target is not the element you want:

const todoInputContainer = document.querySelector('.todo_input-container');

document.addEventListener('click', event => {
  if (event.target != todoInputContainer) {
    todoInputContainer.classList.remove('active');
  }
});