ICP 5 - puji1826/Web GitHub Wiki
Web Mobile Programming ICP5
Name: Pujitha Talluri
Task 1
To-do application
Implementation:
The first step was to create a new project with the command in the terminal: ng new ICP5new After entering this command, I was asked to specify if routing should be added, which I chose "yes", and the styling, which I chose CSS. Next, I created Timer components respectively. Then I added the following code to the routing module to provide page routing for the timer and app module
Source Code: app.component.html
The the page contains is input group of a textbox and button using Bootstrap to enter a task and pass it to the typescript variable submission and run the Onsubmitfunction when the button is clicked:
!.png)
step2: The Onsubmit function takes the submission entry variable and adds it to the items list as a list of the task and a boolean of whether the task has been completed. After the user clicks the add list button, the task is added to the list and another items can be added by entering a new task in the textbox and pressing submit again
.png)
Task 2
Countdown Timer
Implementation: Input group to accept user input for a target date including a textbox and a submit button. When the submit button is clicked, the function setTime is called The styling for this first section is mostly Bootstrap, but the header has styling specified to change the font color to white and center it:
.png)
step 2: The countdown function is called every second to display the countdown as long as the countdown is not negative. The display is updated by using the days, hours, minutes and seconds variables that are set in this function by taking the difference between the target time and current time and determining the amount of each unit in the time:
.png)
step 3: provide styles in timer.ccomponent.html
.png)
output
.png)
.png)
.png)