Scribd
Upload
6 views

MPT Micro Project Report Format[1]

The document is a micro project report on a To-Do application named TaskMaster, designed to enhance productivity through task management and collaboration features. It includes coding details, functionalities, and screenshots of the application. The project is developed by a group of diploma students in Computer Engineering as part of their coursework in Modern Practical Tools.

Uploaded by

munnabhaimorbi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

MPT Micro Project Report Format[1]

The document is a micro project report on a To-Do application named TaskMaster, designed to enhance productivity through task management and collaboration features. It includes coding details, functionalities, and screenshots of the application. The project is developed by a group of diploma students in Computer Engineering as part of their coursework in Modern Practical Tools.

Uploaded by

munnabhaimorbi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

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

You might also like