Name: Mehmet Acikgoz

Student Id: 01

Lesson Overview:

Angular

In this lesson, we are going to discuss the importance of Angular and elements of Angular (components, string interpolation, property binding, event, and two-way data binding, NgModules, and directives)

ICP Plan

• To build a web page which shows the To-do application

• Develop a basic countdown timer application using Angular elements. It continuously decrements display of the months, days, hours, minutes, and seconds to a user-entered event.

Programming elements : Angular, HTML

More info

In Class Programming (ICP)

Task 1. ToDo List:

Please find the source code in here

The following HTML code shows the layout of the ToDo List web application. We see that there is a form for data entry and there are 2 tables, each of which is used for the display of either results or entries. The form has 2 input fields and 2 buttons. The button "Add To List" is used for adding to-do list in the table. The second button is used to display the timer.

The functions to handle the operations the user does with each task is in the typescript file below. Each new task is added into the list, finished task is pushed to completed list and tasks can be deleted from both the tables at any time.

Below we see the web application , initial stage

Tasks are added with specified deadline, they are seen on the table

If the task is marked as completed, is is striked-through in the table.

If it is unchecked, it will be available without striked-out on the screen.

The tasks can be deleted from both table.

Task2 : CountDown timer

The following screenshots show the details of countdown timer. The countdown timer's logic is that it subtracts the specified date and time from present time and displays the remaining time in terms of days hours minutes and seconds

The HTML layout where the timer is displayed is also shown

The function of countdown timer is

When we click on the "Show Timer" it shows the count down timer. When you click again, it disappears.