Just Todos

This is a minimalistic Todo app that allows users to manage their tasks efficiently. It features task addition, removal, and storage using Firebase Realtime Database, providing users with a seamless experience. The app has a responsive user interface and is styled with CSS for a clean and organized look.

Table of Contents

• Features
• Technologies Used
• Setup and Installation
• Usage
• Project Structure
• Contributing
• Contact

Features

• Add Tasks: Enter a task in the input field and click the add button to store the task.
• Remove Tasks: Click on a task in the list to remove it.
• Real-time Data Sync: Tasks are stored and synchronized with Firebase Realtime Database, ensuring data persistence.
• Responsive Design: The app adjusts to different screen sizes for a smooth user experience.

Technologies Used

• Frontend: HTML, CSS (flexbox layout)
• JavaScript: DOM manipulation, Firebase SDK
• Backend: Firebase Realtime Database for task storage and retrieval

Setup and Installation

Prerequisites

• You need a Firebase account. If you don’t have one, create it here.
• A modern web browser (Google Chrome, Firefox, etc.).

Installation Steps

1. Clone the repository:

   git clone https://github.com/your-username/just-todos.git
   cd just-todos
   

2. Create a Firebase project:

   • Go to the Firebase Console and create a new project.
   • Select "Realtime Database" from the Firebase menu and get your Firebase database URL.

3. Open index.js and replace the databaseURL in the appSettings with your Firebase project's database URL:

   const appSettings = { databaseURL: "https://your-firebase-app.firebaseio.com/" };
   

4. Open index.html in your browser or serve the project using a simple web server like Live Server in VSCode.

Usage

1. Enter a task in the input field and click the "btn" button to add it to the list.
2. The tasks will appear below the input box.
3. Click on any task to remove it from the list and the Firebase database.

Project Structure

The project consists of three main files:

• index.html: The main HTML file containing the structure of the webpage.
• style.css: The CSS file used for styling the webpage.
• index.js: The JavaScript file that handles interactions with the Firebase database and DOM manipulation.

📦just-todos
 ┣ 📜index.html     # Main HTML file
 ┣ 📜index.js       # JavaScript for Firebase integration and task logic
 ┣ 📜style.css      # Styling for the UI
 ┗ 📜assets/        # Foler containing assets
    ┗ favicon.png

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/new-feature).
3. Commit your changes (git commit -m "Add some feature").
4. Push to the branch (git push origin feature/new-feature).
5. Create a new Pull Request.

Contact

If you have any questions or suggestions, feel free to open an issue on GitHub or contact me directly via GitHub Issues.