Micro Project Report

On
DAILY ACTIVITY TASK

Branch Diploma in Computer Engineering

Group Members
Sr. No. Enrollment Number Name
1 236020307163 Pipaliya Dharmik DevrajBhai
2 236020307172 Ramanuj Jay BhagirathBhai
3 236020307173 Ramavat Milan BharatBhai
4 236020307191 Sarodia Ansh BhaveshBhai
5 236020307216 Vadher Sumit VikramBhai
Index
Sr. No. Topic Name

1 Introduction to Project Functionalities

2 Abstract

3 Coding

4 Output Screenshots
Introduction To Daily Activites Task
In today’s fast-paced world, effective time management and organization are
crucial for both personal and professional success. To address this need, our
project presents a Daily Activities Task Management application that enables users
to manage their everyday tasks with ease. The core features of the application
include the ability to add new tasks with specific dates, update existing tasks as
plans change, and delete tasks that are no longer relevant. This digital to-do list is
designed to simplify daily planning, reduce forgetfulness, and enhance
productivity. Whether for students, professionals, or anyone looking to better
organize their day, this application serves as a practical and efficient tool for
managing daily responsibilities.

Abstract
This project focuses on the development of a Daily Activities Task Management
System, designed to help users efficiently manage their day-to-day activities. The
application allows users to add, update, and delete tasks based on specific dates,
making daily planning and productivity tracking more organized and effective. The
system provides a simple, user-friendly interface to ensure seamless task
management, whether for personal routines, work schedules, or academic
assignments. By maintaining a clear and editable list of daily tasks, users are
empowered to stay on top of their responsibilities and boost their time
management skills.
CODE:
 app.component.ts
import { Component } from '@angular/core';

import { CommonModule } from '@angular/common';

import { FormsModule } from '@angular/forms';

interface Task {

title: string;

completed: boolean;

@Component({

selector: 'app-root',

standalone: true,

imports: [CommonModule, FormsModule],

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

selectedDate: string = this.getToday();

newTask: string = '';

editIndex: number | null = null;

tasksByDate: { [date: string]: Task[] } = {

[this.getToday()]: [{ title: 'Sample daily task', completed: false }]

};

get tasks(): Task[] {

return this.tasksByDate[this.selectedDate] || [];

getToday(): string {

return new Date().toISOString().split('T')[0]; // YYYY-MM-DD format

addTask() {

const title = this.newTask.trim();

if (title) {

if (!this.tasksByDate[this.selectedDate]) {

this.tasksByDate[this.selectedDate] = [];

if (this.editIndex !== null) {

this.tasksByDate[this.selectedDate][this.editIndex].title = title;

this.editIndex = null;

} else {

this.tasksByDate[this.selectedDate].push({ title, completed: false });

this.newTask = '';

toggleTask(index: number) {

this.tasks[index].completed = !this.tasks[index].completed;

deleteTask(index: number) {

this.tasks.splice(index, 1);

if (this.editIndex === index) {

this.newTask = '';

editTask(index: number) {

this.newTask = this.tasks[index].title;

this.editIndex = index;

cancelEdit() {

this.newTask = '';

this.editIndex = null;

onDateChange(event: Event) {

const input = event.target as HTMLInputElement;

this.selectedDate = input.value;

this.newTask = '';

this.editIndex = null;

} }

 App.component.html
<div class="container">

<h1>📅 Daily Task List</h1>

<div class="date-picker">

<label for="date">Select Date:</label>

<input type="date" id="date" [value]="selectedDate" (change)="onDateChange($event)" />

</div>
<div class="input-group">

<input type="text" [(ngModel)]="newTask" placeholder="Enter task..." />

<button (click)="addTask()">

{{ editIndex !== null ? 'Update' : 'Add' }}

</button>

<button *ngIf="editIndex !== null" class="cancel-btn" (click)="cancelEdit()">

Cancel

</button>

</div>

<ul>

<li *ngFor="let task of tasks; let i = index">

<div class="task-item">

<input type="checkbox" [(ngModel)]="task.completed" (change)="toggleTask(i)" />

<span [class.completed]="task.completed">{{ task.title }}</span>

</div>

<div class="actions">

<button (click)="editTask(i)">✏ Edit</button>

<button class="delete-btn" (click)="deleteTask(i)">🗑 Delete</button>

</div>

</li>

</ul>

</div>
 app.component.css
.container {

max-width: 500px;

margin: 50px auto;

padding: 30px;

background: #ffffff;

border-radius: 10px;

box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);

font-family: 'Segoe UI', sans-serif;

text-align: center;

h1 {

color: #343a40;

margin-bottom: 20px;

.date-picker {

display: flex;

justify-content: center;

align-items: center;

gap: 10px;

margin-bottom: 20px;

.input-group {

display: flex;

gap: 10px;
margin-bottom: 20px;

justify-content: center;

input[type="text"],

input[type="date"] {

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

font-size: 16px;

input[type="text"] {

width: 60%;

button {

padding: 10px 14px;

border: none;

border-radius: 5px;

background-color: #0d6efd;

color: white;

font-size: 14px;

cursor: pointer;

button:hover {

background-color: #084298;

}
.cancel-btn {

background-color: #6c757d;

ul {

list-style: none;

padding: 0;

li {

display: flex;

justify-content: space-between;

align-items: center;

padding: 10px 0;

border-bottom: 1px solid #e9ecef;

.task-item {

display: flex;

align-items: center;

gap: 10px;

flex: 1;

.completed {

text-decoration: line-through;

color: #6c757d;

.actions button {
margin-left: 5px;

background-color: #198754;

.actions .delete-btn {

background-color: #dc3545;

.actions button:hover {

opacity: 0.85;

 app.module.ts
import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms'; // ✅ Needed for ngModel

import { CommonModule } from '@angular/common'; // ✅ Needed for ngFor, etc.

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent,

],

imports: [

BrowserModule,

FormsModule,

CommonModule // ✅ Add this

],
providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

THANK YOU 😊