script.js

/*         
DOMContentLoaded = start the script, Only when all the HTML tags have been rendered 
    script run at right time
        after all HTML tags have been loaded
        but Not wait for Image, CSS, other resources etc. 
*/

/* 
CRUD = Create Read Update Delete
*/

document.addEventListener("DOMContentLoaded", ()=>{
    //1. access elmnt
        const taskInput = document.getElementById("new-task")
        const addTaskButton = document.getElementById("add-task-btn")
        const taskList = document.getElementById("task-list")

        const apiUrl = "https://jsonplaceholder.typicode.com/todos"



    //2. EventListner to add an elmnt
        addTaskButton.addEventListener("click", ()=>{
            let taskText = taskInput.value.trim()                           //rmv space bfr+aftr text
            // console.log(taskText);
            if(taskText != "") {
                addTask(taskText)   
                taskInput.value = ""    
                    // to clear i/p box, after click addBtn    
            }
        })

    //3. func. Defn
        //a) to add Task
            // add data to DB,      fetch updated data from DB
            function addTask(taskText) {
                const newTask = {
                    title: taskText,
                    completed: false
                }
                //id: is auto generated by API

                fetch(apiUrl,       
                    //add data to API URL using POST method,    JSON.stringify() to convert data into JSON format         
                    {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        body: JSON.stringify(newTask),
                    }
                ).then(response => response.json())
                    .then((task) => {
                        console.log(task)
                        displayTask(task.title, task.id)
                    })
                    .catch(error => console.error("Failed during task: \n-----huliiihb-----\n", error))
            }

        //b) to display Task 
            function displayTask(title, id) {
                const li = document.createElement("li")
                li.setAttribute("data-id", id) 

                const span = document.createElement("span")
                span.textContent = title

                let editBtn = document.createElement("btn")
                editBtn.className = "edit-btn btn"
                editBtn.textContent = "Edit"
                editBtn.addEventListener("click", ()=>{
                    editTask(id, span)
                })

                let deleteBtn = document.createElement("btn")
                deleteBtn.className = "delete-btn btn"
                deleteBtn.textContent = "Delete"
                deleteBtn.addEventListener("click", ()=>{
                    deleteTask(id, li)
                })

                li.appendChild(span)
                li.appendChild(editBtn)
                li.appendChild(deleteBtn)

                taskList.appendChild(li)

            }


        //c) to edit task
            function editTask(id, span) {
                const newText = prompt("Edit task", span.textContent)
                if(newText !== "null" && newText !== "") {
                    
                    const updateTask = {title: newText, completed: false}

                    fetch(`${apiUrl}/${id}`, 
                        {
                            method: "PATCH",             //used when editing
                            headers: {
                                "Content-Type": "application/json"
                            },
                            body: JSON.stringify(updateTask),
                        }
                    ).then( (response) => {
                            if(response.ok == false) {
                                throw new Error("Failed to Edit     \n-----huliiihb-----\n")       
                                    // this will give errorObj to catch-block
                            }

                            return response.json()
                        })
                        .then((data) => {
                            // console.log(data)
                            span.textContent = newText
                        })
                        .catch(err => console.error("error in editing task  \n-----huliiihb-----\n"))

                }
            }

        
        //d) to delete task
            function deleteTask(id, li) {
                fetch(`${apiUrl}/${id}`, 
                    {
                        method: "DELETE",
                    }
                ).then(response => {
                    if(response.ok == true) {
                        taskList.removeChild(li)
                    }
                    else {
                        throw new Error("failed to delete task  \n-----huliiihb-----\n")
                    }

                }).catch(err => console.error("Error in deleting task  \n-----huliiihb-----\n", err))
            }
    })