Tick Task 📝

A clean, modern, and responsive to-do list application built with vanilla HTML, CSS, and JavaScript. Make all your works easier with Tick Task!

✨ Features

• Add Tasks: Quickly add new tasks with a simple input field
• Mark Complete: Check off completed tasks with visual feedback
• Delete Tasks: Remove tasks you no longer need
• Responsive Design: Works seamlessly on desktop and mobile devices
• Dark Theme: Modern dark color scheme with purple accents
• Smooth Animations: Elegant fade-in animations for new tasks
• Empty State: Helpful message when no tasks are present
• Keyboard Support: Press Enter to add tasks quickly

🚀 Demo

🛠️ Technologies Used

• HTML5: Semantic markup structure
• CSS3: Modern styling with CSS variables, flexbox, and animations
• JavaScript (ES6+): Dynamic functionality and DOM manipulation
• Google Fonts: Roboto Mono font family

📁 Project Structure

Tick Task/
├── index.html      # Main HTML structure
├── style.css       # Styling and responsive design
├── script.js       # JavaScript functionality
└── README.md       # Project documentation

🎨 Design Features

• Color Scheme: Dark theme with purple gradient accents
• Typography: Roboto Mono for a clean, modern look
• Responsive: Mobile-first design with media queries
• Custom Scrollbar: Styled scrollbar for task container
• Hover Effects: Interactive feedback on buttons and tasks

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• No additional dependencies required!

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/tick-task.git

2. Navigate to the project directory:

   cd tick-task

3. Open index.html in your web browser:

   # On Windows
   start index.html
   
   # On macOS
   open index.html
   
   # On Linux
   xdg-open index.html

Usage

1. Add a Task: Type your task in the input field and click the "+" button or press Enter
2. Complete a Task: Click the checkbox next to any task to mark it as complete
3. Delete a Task: Click the "×" button to remove a task from your list
4. View Tasks: Scroll through your task list if you have many items

🎯 Key Functionality

Task Management

• Tasks are stored in memory during the session
• Each task has a unique ID, text content, and completion status
• Real-time updates without page refresh

User Interface

• Clean, intuitive design with clear visual hierarchy
• Responsive layout adapts to different screen sizes
• Smooth animations enhance user experience

🔧 Customization

You can easily customize the appearance by modifying the CSS variables in style.css:

:root {
    --bg-color: #1A1A1D;           /* Background color */
    --text-color: rgb(240, 231, 237); /* Text color */
    --primary-color: #3B1C32;      /* Primary container color */
    --secondary-color: #6A1E55;    /* Button accent color */
    --turtiary-color: rgb(146, 84, 115); /* Task background color */
}

📱 Browser Support

• Chrome (recommended)
• Firefox
• Safari
• Edge
• Mobile browsers (iOS Safari, Chrome Mobile)

🤝 Contributing

Contributions are welcome! Here are some ways you can contribute:

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

Ideas for Contributions

• Local storage persistence
• Task categories or tags
• Due dates and reminders
• Task priority levels
• Export/import functionality
• Drag and drop reordering

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Created as part of a beginner web development project series.

🙏 Acknowledgments

• Google Fonts for the Roboto Mono font family
• Inspiration from modern task management applications
• Clean design principles and accessibility best practices

---

Made with ❤️ for productivity enthusiasts