script.js

const leftSide = document.querySelector('#left-side');
const rightSide = document.querySelector('#right-side');
const inputTask = document.querySelector('#taskInput');
const addBtn = document.querySelector('#add-button');
const taskContainer = document.querySelector('#task-container');
const noTaskLogo = document.querySelector('#no-task-screen');
const initial = document.querySelector('#initial');
const completed = document.querySelector('#completed');
const slash = document.querySelector('#slash');
const total = document.querySelector('#total');

// sounds
const delSound = new Audio('Assets/deleteSound.mp3');
const comSound = new Audio('Assets/completeSound.wav');

// adding event listener to add button
addBtn.addEventListener('click', Add);
 
// adding event listener to enter key
document.addEventListener('keydown', (value) => {
    if(value.key == 'Enter' && inputTask.value.trim() != '')
    {
        Add();
    }
})
function Add() {
    if(inputTask.value.trim() != '')
    {
        const task = inputTask.value;
        inputTask.value = '';
        addBtn.blur();
        addTask(task);
    }
}

function addTask(task) {
    noTaskLogo.style.display = 'none';
    const newTask = document.createElement('li');
    newTask.className = 'task';
    newTask.innerHTML = 
        `
            <input class="check" type="checkbox">
            <span><img class="check-icon" src="Assets/tickIcon.svg" alt=""></span>
            <p class="task-txt">${task}</p>
            <button class="delete-btn"><img class="delete-icon" src="Assets/deleteIcon.svg" alt=""></button>
        `;

    taskContainer.appendChild(newTask);
    updateRightSide();
    updateProgressSection();
    updateCheeringLine();

    // Check the number of remaining tasks after deletion
    const remainingTasks = taskContainer.querySelectorAll('.task').length;

    if(remainingTasks != 0) {
        saveTasks();  // jb koi task ho tabhi save karo faltu me html mat store karo
    }

    // accessing delete and check button 
    const delBtn = document.querySelector('.task:last-child .delete-btn');
    const checkBtn = document.querySelector('.task:last-child .check');

    // adding event listener to delete button
    delBtn.addEventListener('click', (event) => {
        const taskElement = event.target.closest('.task');
        delSound.currentTime = 0;  // Reset playback to the start
        delSound.play();
        taskElement.remove();
        updateRightSide();
        updateProgressSection();
        updateCheeringLine();

        // Show noTaskLogo if there are no tasks left
        if (remainingTasks === 0) {
            noTaskLogo.style.display = 'flex'; // Show the no task screen again
        } 
        saveTasks();
    })
    
    // adding event listener to check button
    checkBtn.addEventListener('click', (event) => {
        if (event.target.checked) {
            comSound.currentTime = 0;
            comSound.play();
            const taskTextElement = event.target.closest('.task').querySelector('.task-txt');
            taskTextElement.classList.add('strikethrough');
        }

        else {
            console.log("Checkbox is unchecked");
            const taskTextElement = event.target.closest('.task').querySelector('.task-txt');
            taskTextElement.classList.remove('strikethrough');
        }
        updateRightSide();
        updateCheeringLine();
        saveTasks();
    })
}

function updateProgressSection() {
    const totalTasks = document.querySelectorAll('.task').length;  // this will give the no. of elements having class name 'task'
    if(totalTasks > 0) {
        rightSide.style.cssText = 'width: 175px; height: 175px; backdrop-filter: blur(9000px); border: solid rgba(255, 255, 255, 0.203) 1px; border-radius: 50%; top: 50%; left: 80%; transform: translate(-50%, -50%)'; 
        leftSide.style.cssText = 'display: flex; opacity: 1';
    }

    else {
        leftSide.style.cssText = 'display: none; opacity: 0';
        rightSide.style.cssText = 'width: 360px; height: 160px; top: 50%; left: 50%; transform: translate(-50%, -50%)';
    }
}

function updateRightSide() {
    const totalTasks = document.querySelectorAll('.task').length;  // this will give the no. of elements having class name 'task'
    const completedTasks = document.querySelectorAll('.task .check:checked').length;  // this gives the number of elements with class 'check' inside class 'task' that are checked

    if(totalTasks != 0)
    {
        // hide 0
        initial.style.display = 'none';
        
        // set the values
        completed.textContent = completedTasks;
        total.textContent = totalTasks;

        // display them
        completed.style.display = 'block';
        slash.style.display = 'block';
        total.style.display = 'block';
    }

    else
    {
        completed.style.display = 'none';
        slash.style.display = 'none';
        total.style.display = 'none';

        initial.style.display = 'block';
    }
}

function updateCheeringLine() {
    const totalTasks = document.querySelectorAll('.task').length;  
    const completedTasks = document.querySelectorAll('.task .check:checked').length; 
    const cheeringLine = document.querySelector('#cheering-line');
    
    const percentageTaskCompletion = (completedTasks/totalTasks)*100;
    updateProgressBar(percentageTaskCompletion);

    if(percentageTaskCompletion == 100)
    {
        cheeringLine.textContent = `CHAMPION!`;
    }
    
    else if(percentageTaskCompletion >= 85)
    {
        cheeringLine.textContent = `Almost there!`;
    }
    
    else if(percentageTaskCompletion >= 50)
    {
        cheeringLine.textContent = `Halfway there!`;
    }
    
    else if(percentageTaskCompletion >= 30)
    {
        cheeringLine.textContent = `You can do it!`;
    }
    
    else if(percentageTaskCompletion >= 20)
    {
        cheeringLine.textContent = `Good Start!`;
    }
    
    else if(percentageTaskCompletion >= 0)
    {
        cheeringLine.textContent = `Let's start the journey!`;
    }
}

function updateProgressBar(percentage) {
    const bar = document.querySelector('#progress');

    bar.style.cssText = `width: ${percentage}%`;
}

// save tasks to local storage
function saveTasks() {
    const allTasks = Array.from(document.querySelectorAll('.task')).map(task => {
        const Checked = task.querySelector('.check').checked;  // get the checkbox if it is checked
        return {
            taskHTML: task.outerHTML,
            checkState: Checked  // save that it is checked 
        }
    });  
    localStorage.setItem('allTasks', JSON.stringify(allTasks));  // save all tasks to the local storage
    console.log("saved")
}


// load tasks from local storage
function loadTasks() {
    console.log("loaded");
    const tasks = JSON.parse(localStorage.getItem('allTasks')) || [];  // Get tasks from localStorage or an empty array if it was empty
    tasks.forEach(taskData => {
        addSavedTasks(taskData)
    });
}

function addSavedTasks(taskData) {
    console.log('adding')
    console.log(taskData);

    noTaskLogo.style.display = 'none';
    
    // Instead of creating a new task, we are using the passed taskHTML
    taskContainer.insertAdjacentHTML('beforeend', taskData.taskHTML);  // Set the inner HTML to the saved task
    
    updateRightSide();
    updateProgressSection();
    updateCheeringLine();

    // accessing delete and check button 
    const delBtn = document.querySelector('.task:last-child .delete-btn');
    const checkBtn = document.querySelector('.task:last-child .check');

    // Restore the checked state from taskHTML
    checkBtn.checked = taskData.checkState;
    
    // adding event listener to delete button
    delBtn.addEventListener('click', (event) => {
        const taskElement = event.target.closest('.task');
        delSound.currentTime = 0;  // Reset playback to the start
        delSound.play();
        taskElement.remove();
        updateRightSide();
        updateProgressSection();
        updateCheeringLine();
        saveTasks();

        // Check the number of remaining tasks after deletion
        const remainingTasks = taskContainer.querySelectorAll('.task').length;
        
        // Show noTaskLogo if there are no tasks left
        if (remainingTasks === 0) {
            noTaskLogo.style.display = 'flex'; // Show the no task screen again
        } 
    })
    
    // adding event listener to check button
    checkBtn.addEventListener('click', (event) => {
        if (event.target.checked) {
            comSound.currentTime = 0;
            comSound.play();
            const taskTextElement = event.target.closest('.task').querySelector('.task-txt');
            taskTextElement.classList.add('strikethrough');
        }
        
        else {
            console.log("Checkbox is unchecked");
            const taskTextElement = event.target.closest('.task').querySelector('.task-txt');
            taskTextElement.classList.remove('strikethrough');
        }

        updateRightSide();
        updateCheeringLine();
        saveTasks();
    })
}

// Call loadTasks when the page loads
window.onload = loadTasks; 

// localStorage.clear();