https://github.com/ali-sdg90/todo-app

Todo app for CS_Internship
https://github.com/ali-sdg90/todo-app

css javascript knockoutjs scss todo-app

Last synced: about 1 month ago
JSON representation

Todo app for CS_Internship

• Host: GitHub
• URL: https://github.com/ali-sdg90/todo-app
• Owner: Ali-Sdg90
• Created: 2022-11-25T11:23:46.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-09-08T13:25:12.000Z (over 1 year ago)
• Last Synced: 2023-09-08T13:38:48.304Z (over 1 year ago)
• Topics: css, javascript, knockoutjs, scss, todo-app
• Language: JavaScript
• Homepage: https://ali-sdg90.github.io/Todo-App/
• Size: 224 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: History

Awesome Lists containing this project

README

        
Todo App🗂



    This is a simple JavaScript based Todo app that allows users to add, filter,

    and clear tasks. The app uses the DOM to manipulate the HTML and

    localStorage to save the tasks.





Getting Started



    To get started, simply clone or download the repository and open the

    index.html file in your browser. You should be able to see the

    Todo app interface.



Features



    


        Add tasks by typing into the input field and clicking the "Add" button

    

    


        Filter tasks by clicking the "All", "Active", or "Completed" buttons

    

    
Clear all tasks by clicking the "Clear" button

    


        Tasks are saved to localStorage, so they will persist even after the

        browser is closed or refreshed

    



Code Structure



    The app uses several variables such as addBtn,

    todoCounter, taskTasks,

    pendingFilter, clearAll, todoInput,

    todoList, and localTodo to select different parts

    of the HTML and manipulate them.





    The app uses an array todoSaves to store the tasks and another

    array filteredTodoSaves to store the filtered tasks. The

    filterTodoSavesFunc() function is used to filter the tasks

    based on the filter mode (all, active, or

    completed) and the updateHTML(addNewTodo) function

    is used to update the DOM and refresh the list of tasks.



Steps


    

        

            Steps

            Github

            JSFiddle

            Live Demo

            Showcase Video

        

    

    

        

            Step 3 (base file)

            Link

            Link

            ---

            Coming soon...

        

        

            Step 4 (todo btns + SCSS)

            Link

            Link

            ---

            Coming soon...

        

        

            Step 5 (knockout.js)

            Link

            Link

            Link

            Coming soon...

        

        

            Step 6 (localStorage)

            Link

            Link

            Link

            Coming soon...

        

        

            Step 6 (Firebase)

            Link

            Link

            Link

            Coming soon...

        

    

Enjoy using the app❤️