Mini Project:Task Tracker Application

Objective:

create a simple Task Tracker application using vanilla javascript,HTML,and CSS to perform basic CRUD operations on task.

Instructions:

setup project environment

create a new directory for your project
set up basic HTML,CSS,and Javascript files.

Design the UI

create a simple and user-friendly interface with the following elements:

An input field to add new tasks.
A button to add the tasks.
A list to display all tasks.
Button to edit and delete tasks.

Implement CRUD operation

Implement the following function functionalities:

Add Task:Add a new task to the list.
Display Task:Diaplay all task in the list.
Update Task:Edit an existing task
Delete Task:Remove a task from the list.

Test Application

Test the application to ensure all CRUD operations work as expected.

Document Application

Provide brief documentation of the application,including setup intructions and a description of the functionalities.

Deliverables:

Source code of the project.

Documentation of the application.

Screenshots or a vedio demonstration of the application.

Task1

Single Page Application(SPA) are web pages where the server transmits only a single HTML outline.Content is then dynamically filled through the use of server calls and div sections.

For the first task of this lab you will create a basic framework to support this style osf web page.Part B of the lab will involve utilizing Angular to add dynamic operation.

Setup

Web development strongly benefits from consistent and clean directory structure.This lab will take the previous structure,one folder per checkpoint,and expand upon it.For each checkpoint in this lab image,scripts and stylesheets should be in their own directories.This basic structure has been provided within the web_dev directory.

All HTML content for these pages should be in an index.html page:

Floder structure

            
                -->image
                -->scripts
                -->Styles
                index.html

As with pervious checkpoints the html pages should contains relevant link,author and meta Tags should include:

Content
Author
Keywords
charset(UTF-8)
viewport

Task Description

Using html tags and CSS create a close replica of the provided page:

Task2:

Create the HTML and CSS code needed to display an ordered list with a specific set of CSS effects.you must uste the sameinformation and styling as shown below.

Introduction to web technology
Networks and Communications
Object Oriented Design and Programming
Data Management and Security
System Analysis
Problem Solving
Programming Fundamentals

Inputs & Outputs

Programming Control Structures

Working with Method

Working with Classes

Instantiating & Messaging Objects

Design Requirements:

The type of symbol used for the nestedlist must be specified inlinewith the correct CSS declaration.
The italic styling used for the nestedlist should be specified inlinewith the correct CSS declaration.
HTML character entilies must be used where appropriate.

Please Note:

The list should be placed within the divelement already provided by the submission template.
Use indentation within your code to improve its overall readability.

List of Vegetables

Carrot
Radish
Sweet corn

Fruits list

Pomegrante
Bananas
Pears

Fruits

Mango
Orange

Vegetables

Cabbage
Capsicum

Green Capsicum
Yellow Capsicum
Red Capsicum