Micro Project Report

On
To-do list app

Branch Diploma in Computer Engineering

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

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

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
 app.component.ts
 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: './app.component.html',
 styleUrls: ['./app.component.css']
 })
 export class AppComponent {
 newTask = '';
 editIndex: number | null = null;

 tasks = [
 { title: 'Sample task', completed: false }
 ];

 addTask() {
 const title = this.newTask.trim();
 if (title) {
 if (this.editIndex !== null) {
 this.tasks[this.editIndex].title = title;
 this.editIndex = null;
 } else {
 this.tasks.push({ title, completed: false });
 }
 this.newTask = '';
 }
 }

 deleteTask(index: number) {
 this.tasks.splice(index, 1);
 if (this.editIndex === index) {
 this.editIndex = null;
 this.newTask = '';
 }
 }

 editTask(index: number) {
 this.newTask = this.tasks[index].title;
 this.editIndex = index;
 }

 cancelEdit() {
 this.newTask = '';
 this.editIndex = null;
 }
 }
 app.component.html
 <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)]="task.completed"
/>
 <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;
 }

 .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;
 }
 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 { }

Output