script.js

let userTaskInput = document.querySelector(".user-task-input")
let userDateInput = document.querySelector(".user-date-input")
let userCategorySelect = document.querySelector(".category")
let displayError = document.querySelector(".display-error")
let addTaskBtn = document.querySelector(".add-task-btn")
let clearFieldBtn = document.querySelector(".clear-field-btn")
let displayTotalTask = document.querySelectorAll(".total-task h2")[1]
let displayCompletedTask = document.querySelectorAll(".completed-task h2")[1]
let displayPendingTask = document.querySelectorAll(".pending-task h2")[1]
let clearTaskbtn = document.querySelector(".clear-task-btn")
let searchByName = document.querySelector(".search-by-name")
let filterCategory = document.querySelector(".filter-category")
let sortBy = document.querySelector(".sort-by")
let displayTask = document.querySelector(".display-task")
let csvDownloadBtn = document.querySelector(".download-csv")

let taskArr = JSON.parse(localStorage.getItem("task")) ?? []


        // Handle Add Task Btn
addTaskBtn.addEventListener("click" , ()=>{
    let taskInputValue = userTaskInput.value.trim().toLowerCase().split(" ")
    let sentenceCaseValue = taskInputValue.map((sentenceCase)=>{ return sentenceCase.charAt(0).toUpperCase() + sentenceCase.slice(1) }).join(" ")
    let shortTaskValue = sentenceCaseValue.slice(0,10)
    let finalTaskValue = sentenceCaseValue.length > 10 ? shortTaskValue +  "....." : shortTaskValue
    let dateInputValue = userDateInput.value.split("-").reverse().join("-");
    let categorySelectValue = userCategorySelect.value
    conditionHandler(finalTaskValue , dateInputValue , categorySelectValue)
})

                      // Display Error Msg
function errorTiming(value){
    displayError.textContent = value
    setTimeout(() => {
        displayError.textContent = ""
    }, 2500);
}

         // Condition Handle
function conditionHandler( taskvalue , date , category ){
    if(taskvalue === "" || date === ""){
        errorTiming("Input Field Is REQUIRED!")
        return
    }
    else if(!isNaN(taskvalue)){
        errorTiming("Title Must be STRING!")
        return
    }
    else if(date.length !== 10){
        errorTiming("Date Must Me MM-DD-YYYY")
        return
    }
    else if(category === "selectCategory"){
        errorTiming("Choose Another CATEGORY!")
        return
    }
    saveTask(taskvalue , date , category)
}

         // Save Task To Local Storage
function saveTask(taskvalue , date , category){
    taskArr.push({
        taskTitle : taskvalue,
        taskDate : date,
        taskCategory : category,
        isChecked : false
    })
    localStorage.setItem("task", JSON.stringify(taskArr))
    renderList()
}

// Render Task
function renderList(customArr){
    if(taskArr.length === 0){
        displayTask.innerHTML = "<h3>NO Task Added</h3>"
    }
    else{
        let taskArr = customArr ?? JSON.parse(localStorage.getItem("task")) ?? []
        displayTask.innerHTML = ""
        taskArr.forEach((value,index)=>{
            let taskRow = 
            `
                <div class="display-list">
                    <input type="checkbox" onChange= changeCheckedValue(${index})  ${value.isChecked ?  "checked" : ""} >
                    <h3 class="${value.isChecked ? "completed" : ""}">${value.taskTitle}</h3>
                    <h3 class="${value.isChecked ? "completed" : ""}">${value.taskDate}</h3>
                    <span class="${value.isChecked ? "completed" : ""}">${value.taskCategory}</span>
                    <button class="delete-btn" onClick="removeTask(${index})">Delete</button>
                    </div>
            `
            displayTask.innerHTML += taskRow
        })
        totalTaskCount()
    }
}

                // Check Box Handler
function changeCheckedValue(idx){
    taskArr[idx].isChecked = !taskArr[idx].isChecked
    localStorage.setItem("task" , JSON.stringify(taskArr))
    renderList()
}

          // Remove Task Handler
function removeTask(idx){
    taskArr.splice(idx,1)
    localStorage.setItem("task" , JSON.stringify(taskArr))
    renderList()
    totalTaskCount()
}


              // Task Count Handler
function totalTaskCount(){
    let pending = 0
    let completed = 0
    taskArr.forEach((value)=>{
        displayTotalTask.textContent = taskArr.length
        if(value.isChecked){
            completed++
        }
        else{
            pending++
        }
    })
    displayPendingTask.textContent = pending
    displayCompletedTask.textContent = completed
}


          // Task FIltering
function filterByCategory(){
    let filterCategoryValue = filterCategory.value
   if(filterCategoryValue === "allCategories"){
    renderList()
   }
   else{
    let filterArr = taskArr.filter((task)=>{ return task.taskCategory === filterCategoryValue })
    renderList(filterArr)
   }
    
}
filterCategory.addEventListener("change" , filterByCategory)


    // Task Sorting
function sortTask() {
    let sortByValue = sortBy.value
    let sortedArr = [...taskArr] 

    if(sortByValue === "newest-to-oldest"){
        sortedArr.sort((a, b) => new Date(b.taskDate) - new Date(a.taskDate))
    } 
else if(sortByValue === "oldest-to-newest"){
        sortedArr.sort((a, b) => new Date(a.taskDate) - new Date(b.taskDate))
    } 
    else if(sortByValue === "asc-to-Dsc"){
        sortedArr.sort((a, b) => a.taskTitle.localeCompare(b.taskTitle))
    } 
    else if(sortByValue === "dsc-to-Asc"){
        sortedArr.sort((a, b) => b.taskTitle.localeCompare(a.taskTitle))
    }
    renderList(sortedArr)
}

sortBy.addEventListener("change", sortTask)


                // Task Search Handle
searchByName.addEventListener("input" , ()=>{
    let searchByNameValue = searchByName.value.trim().toLowerCase()
    let taskList = document.querySelectorAll(".display-list")
    taskList.forEach((txt)=>{
        let findingTitle = txt.querySelector("h3").textContent.toLowerCase()
        txt.style.display = findingTitle.includes(searchByNameValue) ? "" : "none"
    })
})


        // Handler Task Download
csvDownloadBtn.addEventListener("click" , ()=>{
    if(taskArr.length === 0){
        alert("NO Task to Download!")
        return
    }
    else{
        let header = ["Title" , "Date" , "Category" , "Completed"]
        let rows = taskArr.map(task => ` ${task.taskTitle} , ${task.taskDate} , ${task.taskCategory} , ${task.isChecked ? "Yes" : "No"} `)
        let csvContent = [header , ...rows].join("\n")

        let newBlob = new Blob([csvContent] , {type : "text/csv"})
       let link = document.createElement("a")
       link.href = URL.createObjectURL(newBlob)
       link.download = "Task.csv"
       document.body.appendChild(link)
       link.click()
       document.body.removeChild(link)
       URL.revokeObjectURL(link.href)
    }
})

                // Handler Clear Field
clearFieldBtn.addEventListener("click" , ()=>{
    userTaskInput.value = ""
    userDateInput.value = ""
    userCategorySelect.value = "selectCategory"
})


    // Handle Clear Save Task
clearTaskbtn.addEventListener("click" , ()=>{
    localStorage.clear()
    taskArr = []
    displayTotalTask.textContent = 0
    totalTaskCount()
    renderList()
})

renderList()