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

Todo App with Firebase backend for CS_Internship
https://github.com/ali-sdg90/todo-app-firebase

css firebase firebase-database javascript todo-app

Last synced: about 11 hours ago
JSON representation

Todo App with Firebase backend for CS_Internship

• Host: GitHub
• URL: https://github.com/ali-sdg90/todo-app-firebase
• Owner: Ali-Sdg90
• License: mit
• Created: 2023-08-26T16:30:50.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-18T14:46:05.000Z (about 1 year ago)
• Last Synced: 2023-10-18T22:22:47.125Z (about 1 year ago)
• Topics: css, firebase, firebase-database, javascript, todo-app
• Language: JavaScript
• Homepage: https://ali-sdg9093-todo-app.web.app/
• Size: 205 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Todo-App-Firebase🗂



Introduction



    Welcome to the Todo App with Firebase repository! In this project, I've

    created a JavaScript-based Todo app that showcases the integration of

    Firebase for backend services. This app allows users to manage their todos,

    leveraging Firebase to store and retrieve data.





    The code in this repository has been developed professionally and is

    organized into two main sections within the public folder:





    


        Todo Files: Contains the core files for the Todo app.

    

    


        Work-w-firebase: Includes base files that demonstrate

        how to interact with Firebase to send and retrieve data using both the

        traditional and snapshot methods.

    



Getting Started

To run the code locally on your machine, follow these steps:



    
Clone or download this repository to your local system.

    


        


            Open a terminal in the repository's folder and run the following

            command:

        

        
firebase serve

    

    


        


            Open your web browser and navigate to

            http://localhost:5000/

            to access the running code.

        

    





    Alternatively, you can also experience the live demo of the app at

    https://ali-sdg9093-todo-app.web.app/.



Features

This Todo app offers the following features:



    


        


            Add Tasks: You can add tasks by typing into the

            input field and clicking the "Add" button.

        

    

    


        


            Filter Tasks: Tasks can be filtered by clicking the

            "All," "Active," or "Completed" buttons.

        

    

    


        


            Clear Tasks: Easily clear all tasks by clicking the

            "Clear" button.

        

    

    


        


            Persistence: Tasks are saved to Firebase, ensuring

            they persist even after the browser is closed or refreshed.

        

    



Code Structure



    The code is well-organized and utilizes various variables to interact with

    the HTML elements and Firebase:





    


        


            addBtn, todoCounter,

            pendingFilter,

            clearAll, todoInput,

            todoList are used to select

            different parts of the HTML for manipulation.

        

    

    


        


            An array named todoSaves is employed to store tasks,

            while another array, filteredTodoSaves, is used to

            store filtered tasks. The

            filterTodoSavesFunc() function filters tasks based on

            the filter mode (all, active, or

            completed). The

            updateHTML(addNewTodo) function refreshes the DOM to

            display 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❤️