Type_List

A minimalist, feature-rich todo list application that helps you stay organized and productive.

📖 Overview

Type_List is a powerful yet simple todo list application built with vanilla JavaScript, HTML, and CSS. It offers a clean interface and powerful features while maintaining simplicity, making it perfect for anyone looking to stay organized and boost productivity.

Type_List Todo App

🚀 Features

  • Smart Tagging System: Organize tasks with hashtags (e.g., #work, #personal, #shopping)
  • Dark/Light Mode: Toggle between themes for comfortable viewing in any environment
  • Local Storage: Your tasks persist even after closing the browser
  • URL Detection: Automatically converts URLs into clickable links
  • Search Integration: Use @ for Google search and ? for auto-complete
  • Future You Messages: Get encouraging messages when completing tasks
  • Progressive Web App: Install and use offline
  • Responsive Design: Works seamlessly on all devices

🛠️ Technologies Used

  • Frontend: Vanilla JavaScript, HTML5, CSS3
  • Storage: Local Storage API
  • PWA Features: Service Worker, Web App Manifest
  • Icons: Font Awesome

📂 Project Structure

The project follows a clean, organized structure that's easy to understand and modify.

Type_List/
├── index.html          # Main HTML file
├── styles.css          # CSS styles
├── script.js           # JavaScript functionality
├── manifest.json       # PWA manifest
├── service-worker.js   # Service worker for offline support
├── favicon.ico         # App icon
└── Typecode/          # Assets directory
    └── 1.png          # App icon

🔧 Installation & Setup

Getting started with Type_List is incredibly simple.

Clone the repository:

git clone https://github.com/EriRJorge/Type_List.git

Navigate to the project directory:

cd Type_List

Open index.html in your browser or use a local server.

💻 Usage

Adding Tasks

  • Type your task in the input field
  • Press Enter or click the + button
  • Add hashtags to categorize tasks (e.g., "Buy groceries #shopping")

Task Management

  • Click the checkbox to mark a task as complete
  • Click the × button to delete a task
  • Use the filter buttons to view different task states
  • Click on tags to filter tasks by category

Special Commands

  • Start with @ to create a Google search link
  • Start with ? to create an auto-complete search link
  • Add URLs directly to create clickable links

Theme Toggle

  • Click the moon/sun icon to switch between dark and light modes

📱 Progressive Web App

Type_List can be installed as a Progressive Web App (PWA) for offline use:

  1. Visit the website
  2. Click the download icon in the header
  3. Follow your browser's installation prompt

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
View on GitHub Try Type_List Live