Create and manage todo tasks

HTML

<div class="container">
      <h2>Todo List</h2>
      <button class="add-todo">Add Todo</button>

      <form action="#" id="new-todo">
        <h3>Add a new Todo</h3>

        <label for="title">Title</label>
        <input
          type="text"
          name="title"
          id="title"
          placeholder="enter task"
          required
        />

        <label for="des">description</label>
        <input
          type="text"
          name="des"
          id="des"
          placeholder="enter description"
          required
        />

        <label for="due-date">Due Date</label>
        <input type="date" name="due-date" id="due-date" required />

        <label for="priority">Priority</label>
      <select name="priority" id="priority">
        <option value="low">Low</option>
        <option value="medium">Medium</option>
        <option value="high">High</option>

        <div class="form-btn">
          <input type="submit" value="Add Todo" class="b1" />
          <button class="b2">close</button>
        </div>
      </form>

      <!-- todo list -->
      <div class="list"></div>
    </div>

CSS

#new-todo {
  display: none;
}

form {
  display: flex;
  flex-direction: column;

  width: 200px;

  margin: 0.5rem;
}

input#des {
  border: none;
  outline: none;
}

.list {
  width: 300px;
  height: 300px;
  background-color: bisque;
}

JavaScript

const addBtn = document.querySelector('.add-todo')
const todoForm = document.querySelector('#new-todo')




addBtn.addEventListener('click',addTodo)


let myTodoList = []


function Todo(title,des,duedate,priority){
  this.title = title
  this.des = des
  this.duedate = duedate
  this.priority = priority

}


function addTodo(){
  todoForm.style.display = 'flex'
}



function addTask(){
  let title = document.querySelector('#title').value
  let des = document.querySelector('#des').value
  let duedate = document.querySelector('#due-date').value
  let priority = document.querySelector('#priority').value

  let newlist = new Todo(title,des,duedate,priority)

  myTodoList.push(newlist)
  render()
  todoForm.style.display = 'none'
}



function render(){
 let list = document.querySelector('.list')
 list.innerHTML = ''

 for(let i = 0; i < myTodoList.length;i++){
  let task = myTodoList[i]
  
  let todoEl = document.createElement('div')
  // todoEl.classList.add("card");
    todoEl.innerHTML = `<div class="book-grid">
      <h3>${task.title}</h3>
      <p>${task.des}</p>
      <p>${task.duedate}due </p>
      <p>${task.priority} priority</p> 

     
      <div class="f-btn">
      <button class="status" onclick="edit()">edit
      </button>
      <button class="delete" >
        Remove
      </button>
      
      </div>`;

      list.appendChild(todoEl)

 }


}

function edit(){
  let edit = document.querySelectorAll('.status')


  edit.forEach((editbtn)=>{
    editbtn.addEventListener('click',(e)=>{
      e.target.textContent = 'clicked'
      if(e.currentTarget){
        
        addTodo()
       
      }
    })
  })

  

}



todoForm.addEventListener('submit',(e)=>{
  e.preventDefault()
  
  addTask()
  
})