Micro Project Report
On
To-do list app
Branch Diploma in Computer Engineering
Semester 4th
Subject Name Modern Practical Tools
Subject Code 4340705
Group Members
Sr. No. Enrollment Number Name
1
2
3
4
5
Index
Sr. No. Topic Name
1 Abstract
2 Introduction to Project Functionalities
3 Coding
4 Output Screenshots
Abstract
This To-Do List App is designed to help users manage their tasks
and stay organized. The app allows users to create, edit, and
prioritize tasks, set reminders and deadlines, and track progress.
Introduction to Project Functionalities
1. Task Creation
- Users can create new tasks with titles, descriptions, and due dates.
- Tasks can be added quickly and easily using a simple input field.
2. Task Management
- Users can edit and update existing tasks.
- Tasks can be marked as completed or deleted.
3. Prioritization
- Users can prioritize tasks based on importance or urgency.
- Tasks can be categorized using labels or tags.
4. Reminders and Notifications
- Users can set reminders and notifications for upcoming deadlines.
- Notifications can be sent via email or in-app alerts.
5. Progress Tracking
- Users can track their progress and view completed tasks.
- The app provides statistics and insights on task completion rates.
6. User Authentication
- Users can create an account and log in to access their tasks.
- User authentication ensures that tasks are secure and private.
Coding
[Link]
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, FormsModule],
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class AppComponent {
newTask = '';
editIndex: number | null = null;
tasks = [
{ title: 'Sample task', completed: false }
];
addTask() {
const title = [Link]();
if (title) {
if ([Link] !== null) {
[Link][[Link]].title = title;
[Link] = null;
} else {
[Link]({ title, completed: false });
}
[Link] = '';
}
}
deleteTask(index: number) {
[Link](index, 1);
if ([Link] === index) {
[Link] = null;
[Link] = '';
}
}
editTask(index: number) {
[Link] = [Link][index].title;
[Link] = index;
}
cancelEdit() {
[Link] = '';
[Link] = null;
}
}
[Link]
<div class="container">
<h1>📝 To-Do List</h1>
<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)]="[Link]"
/>
<span
[[Link]]="[Link]">{{ [Link] }}</span>
</div>
<div class="actions">
<button (click)="editTask(i)">✏️ Edit</button>
<button class="delete-btn" (click)="deleteTask(i)">
Delete</button>
</div>
</li>
</ul>
</div>
[Link]
.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;
}
.input-group {
display: flex;
gap: 10px;
margin-bottom: 20px;
justify-content: center;
}
input[type="text"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 60%;
font-size: 16px;
}
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;
}
[Link]
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 './[Link]';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
CommonModule // ✅ Add this
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Output
