ICP5 - VINEETHREDDYSHERI/WebMobile-2021Fall GitHub Wiki

Welcome to In-class Programming Assignment-5

Objective: Getting to know about the Angular framework and also elements of the Angular like components, string interpolation, property binding, event, and two-way data binding, NgModules, and directives

Implementation:

1. To-do application:

Source Code: https://github.com/UMKC-APL-WebMobileProgramming/ICP5-VINEETHREDDYSHERI/tree/main/Source/TodoList

Developed the Todo List UI as per the given mockup design. An input TextField to provide the Todo taskName and on click of button the task will be added with status as pending. The tasks can be deleted and also can be moved from completed to pending or pending to completed status.

HTML File Task1-1

TypeScript File Task1-2

Task1-3

CSS File Task1-4

Task1-5

Task1-6

Output

Task1-7

Added New Todo Task Task1-8

Deleted one of the task Task1-9

2. Countdown Timer:

Source Code: https://github.com/UMKC-APL-WebMobileProgramming/ICP5-VINEETHREDDYSHERI/tree/main/Source/CountdownTimer

Developed the Countdown Timer UI as per the given mockup design. An input TextField and dataTimeField to provide the eventName and dateTime respectively and on click of button the event will be added. The countdown Timer for each event is displaying on the UI.

HTML File Task2-1

Task2-2

TypeScript File Task2-3

Task2-4

CSS File Task2-5

Task2-6

Task2-7

Output

Task2-8

Added Event Task2-9

Added second Event Task2-10

VideoLink: https://youtu.be/h14D0zc_OvM

Conclusion:

In these ICP5, I learned about the Angular framework which helps in developing the single page application. The SPA will reload only part of the screen that is affected due to new data, instead of default mode of reloading the entire page.