Micro Project Report
On
To-Do Application
Branch Diploma in Computer Engineering
Semester 4th
Subject Name Modern Practical Tools
Subject Code 4340705
Group Members
Sr. Enrollment Number Name
No.
1 226020307005 Bakraniya Aastha
2 226020307015 Bhatt Diya
3 226020307022 Bhut Vanee
4 226020307047 Davda Dharmi
5 226020307069 Gohel Dhanvi
Index
Sr. No. Topic Name
1 Abstract
2 Introduction to Project Functionalities
3 Coding
4 Output Screenshots
Abstract
Our to-do list application, TaskMaster, revolutionizes productivity
with its intuitive design and comprehensive features. Designed for
individuals and teams, TaskMaster seamlessly integrates task
management, scheduling, and collaboration. Its user-friendly
interface ensures easy navigation across devices, allowing users to
stay organized and focused anytime, anywhere. With TaskMaster,
efficiency is at your fingertips.
Introduction to Project Functionalities
the ultimate solution for mastering your daily tasks and optimizing
productivity. In the hustle and bustle of modern life, keeping track
of everything can be overwhelming. That's where TaskEase comes
in. Our user-friendly application offers a seamless way to organize
your tasks, prioritize your responsibilities, and achieve your goals
with ease. Whether you're a busy professional, a student juggling
multiple projects, or a parent managing a hectic household,
TaskEase empowers you to stay on top of your to-do list and make
the most out of every day. Say hello to efficiency and goodbye to
chaos with TaskEase.
Coding
Todolist.component.html
<div class="container">
<h1>To-Do Application</h1>
<hr>
<form id="submitForm" (ngSubmit)="onSubmit(taskForm)"
#taskForm="ngForm">
<div class="form-group">
<input type="text" class="form-control" id="task"
placeholder="Enter task" ngModel name="task" required>
<small *ngIf="taskForm.invalid && taskForm.dirty"
id="errorMessage" class="form-text text-danger">Required
field</small>
</div>
<button [disabled]="taskForm.invalid" id="submitButton"
type="submit" class="btn btn-primary">Submit</button>
</form>
<hr>
<table class="table">
<thead>
<tr>
<th scope="col">Task</th>
<th scope="col">Completed</th>
<th scope="col">Delete</th>
<th scope="col">Edit</th>
<th scope="col">Save</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let t of taskArray; index as i">
<td>
<input [ngClass]="{'edit': t.isEditable, 'not-edit':
!t.isEditable, 'crossed': t.isCompleted}"
#taskinput type="text" class="form-control"
id="taskInTable" value="{{t.taskName}}"
[readOnly]="!t.isEditable">
</td>
<td><input (change)="onCheck(i)" id="myCheckbox"
type="checkbox"></td>
<td><button id="delete" class="btn btn-danger btn-sm"
(click)="onDelete(i)">Delete</button></td>
<td><button id="edit" class="btn btn-primary btn-sm"
(click)="onEdit(i)"
[disabled]="t.isEditable">Edit</button></td>
<td><button id="save" class="btn btn-warning btn-sm"
(click)="onSave(i, taskinput.value)"
[disabled]="!t.isEditable">Save</button></td>
</tr>
</tbody>
</table>
</div>
todolist.component.ts
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-todolist',
templateUrl: './todolist.component.html',
styleUrls: ['./todolist.component.css']
})
export class TodolistComponent implements OnInit {
taskArray = [{ taskName: 'Brush teeth', isCompleted: false,
isEditable: false }];
constructor() { }
ngOnInit(): void {
}
onSubmit(form: NgForm) {
console.log(form);
this.taskArray.push({
taskName: form.controls['task'].value,
isCompleted: false,
isEditable: false
})
form.reset();
}
onDelete(index: number) {
console.log(index);
this.taskArray.splice(index, 1);
}
onCheck(index: number) {
console.log(this.taskArray);
this.taskArray[index].isCompleted = !
this.taskArray[index].isCompleted;
}
onEdit(index: number) {
this.taskArray[index].isEditable = true;
}
onSave(index: number, newtask: string) {
this.taskArray[index].taskName = newtask;
this.taskArray[index].isEditable = false;
}
}
App.component.html
<app-todolist></app-todolist>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'todo';
}
app.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TodolistComponent } from './todolist/todolist.component';
@NgModule({
declarations: [
AppComponent,
TodolistComponent
],
imports: [
FormsModule,
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
enviroments
environment.ts
export const environment = {
production: false
};
environment.prod.ts
export const environment = {
production: true
};
Output Screenshots
