index.js

let todoText = document.getElementById("todoText");
let addTodo = document.getElementById("addTodo");
let todoList = document.getElementById("displayTodo");

let todos = [];

addTodo.addEventListener("click", ()=>{
    if(todoText.value == ''){
        return
    }
    todos.push(todoText.value);
    todoText.value=''
    todoList.innerHTML=""
    displayTodoList();
})

function handleToggle(index){

}

function displayTodoList(){
    
    todos.map((todo, index)=>{
        let taskName = document.createElement("h3");
        let toggleButton = document.createElement("button");
        let taskdiv = document.createElement("div");
        let toggled = false
        taskdiv.id="taskDiv"
        taskName.textContent = todo;
        toggleButton.textContent ="TOGGLE";
        toggleButton.className = "toggle";
        taskdiv.append(taskName, toggleButton); 
        todoList.append(taskdiv);

        toggleButton.addEventListener("click", ()=>{
            if(toggled){
                toggled = !toggled;
                taskdiv.style.backgroundColor="lightgreen"
            }
            else{
                toggled = !toggled
                taskdiv.style.backgroundColor=""
            }
        })
    })
}