DevBoard - Task Management Application

Overview

DevBoard is a simple yet effective task management web application designed for developers to track their tasks, mark them as completed, and view their activity history. The application features a clean, modern UI built with Tailwind CSS and DaisyUI, providing a responsive and intuitive user experience.

Features

• Task Management: View and manage assigned development tasks
• Task Completion: Mark tasks as completed with a single click
• Activity Logging: Track completed tasks with timestamps
• Dynamic Theme: Change background color with a random theme generator
• Real-time Calendar: Display current date and day
• Task Counter: Track assigned and completed tasks
• Blog Section: Educational content about DOM manipulation

Technologies Used

• HTML5: Structure of the web application
• CSS3: Custom styling with Tailwind CSS framework
• JavaScript: Dynamic functionality and DOM manipulation
• Tailwind CSS: Utility-first CSS framework for styling
• DaisyUI: Component library for Tailwind CSS
• Google Fonts: Poppins font family for typography

Project Structure

├── assets/              # Images and icons
├── scripts/             # JavaScript files
│   └── scripts.js       # Main JavaScript functionality
├── blog.html           # Blog page with DOM-related questions
├── index.html          # Main application page
├── tailwind.config.js  # Tailwind CSS configuration
└── README.md           # Project documentation

How It Works

1. Task Display: The main page displays task cards with project names, task descriptions, and deadlines
2. Task Completion: Clicking the "Completed" button marks a task as done and updates counters
3. Activity Logging: Each completed task is logged with task name and timestamp
4. Theme Customization: The theme button changes the background color randomly
5. Blog Access: The activity board provides access to the blog section

JavaScript Functionality

• Dynamic background color changing
• Real-time date and time display
• Task completion tracking
• Activity logging
• Navigation between pages
• Task counter updates

Blog Content

The blog page contains educational content about DOM manipulation in JavaScript, covering topics such as:

• Different ways to select elements in the DOM
• Differences between innerHTML, innerText, and textContent
• Event delegation in the DOM
• Event bubbling in the DOM
• Creating, adding, and removing elements using JavaScript

Getting Started

1. Clone the repository
2. Open index.html in your browser
3. No build process or dependencies installation required

Browser Compatibility

The application is compatible with all modern browsers including:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge
• Safari

Future Enhancements

• User authentication
• Task creation functionality
• Data persistence using local storage or a backend
• Dark mode toggle
• Task filtering and sorting

License

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

---

Developed as part of a programming assignment to demonstrate HTML, CSS, and JavaScript skills.