Web_ICP5 - Ggr9d/Web-and-Mobile-Programming GitHub Wiki

In this lesson, I have learnt the importance of Angular and elements of Angular like components, string interpolation, property binding, event, and two-way data binding, NgModules, and directives and have also learnt how to use typescript.

Task_1

ToDo Application:

The task given is to design the ToDo application with add and delete functionality. As part of this task, I have implemented adding of items, deleting items.

HTML file for ToDo task:

This shows the formcontrol and the buttons created for the to do task.

CSS for ToDo task:

CSS file targets the table elements to customize them and here I have used bootstrap to make the website responsive.

Below images shows the stylings applied for the table elements.

Typescript spec file for ToDo task:

The .spec.ts files are used for unit tests of the individual components.

Typescript file for ToDo task:

In the todo typescript file data i.e todolist items are added to the list called employees by calling the function addEmployee() and similarly list items are deleted by calling another function deleteEmployee().

Task_2

CountDown Timer

The task is to develop a basic CountDown timer application using angular elements. The objective is to provide a continuously decrementing display of the months, days, hours, minutes, and seconds to a user-entered event.

HTML for Timer task:

Below displays the countdown html file where it consists divs within form and labels inside divs.

SCSS file for Timer task:

Here I have used scss(This is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets) in which I have targeted all the classes and made changes to them. Like for the class card all the text in it center aligned and card has a background color with some border-radius. I have also used the button element and applied styles to it like the border-radius and the text colors to it.

Below are the styles for countdown text.

Typescript spec for Timer:

Typescript file for Timer:

The main part of the countdown is the timer function where days, hours, minutes, seconds are set initially and the function onClickSubmit() takes data as parameter and months is an array consisting all the months which on user input of number month name is fetched from the array and variable countdowndate is initially set to a default value and later updated when data is obtained from the user.

Output:

Below displays the initial output page.

Below screenshot displays the countdown timer and an option for new event.

Below screenshot displays the output for the Todo task inputs like Task number, task name, tast status, task deadline.

Below screenshot displays the tasks added and the options to delete them once it gets finished.