Scribd
Upload
8 views4 pages

Fall 2024 - CS202 - 2

Uploaded by

Faizan Ahmad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views4 pages

Fall 2024 - CS202 - 2

Uploaded by

Faizan Ahmad
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Assignment No.

02 Total Marks: 20
Semester: Fall 2024 Lectures: 12 to 29 (Topics:
CS202: Fundamentals of Front-End 47 to 126)
Development Due Date: December 30,
2024
Instructions:
Please read the following instructions carefully before submitting assignment. It should be clear that your
assignment will not get any credit if:

 The assignment is submitted after due date.


 The submitted assignment does not open or file is corrupt.
 Assignment is copied (partial or full) from any source (websites, forums, students, etc.)
Note:
1) You have to just upload .html file which will have the code of HTML, CSS, JavaScript, and jQuery.
Assignment in any other format (extension) i.e., word, pdf, txt, or any other format will not be
accepted and will be awarded with zero marks.
2) Submit your assignment as a single .html file.
3) In case of any issue, if the system does not accept .html file then zip your.html file in a zip folder and
upload it on LMS.

Objectives:
The objectives of this assignment are:
 To learn and practice the HTML and CSS tags.
 Use of JavaScript and jQuery.
 Use HTML for the structure, CSS for styling, JavaScript for functionality, and jQuery for
interactive features

Note:

 This assignment is a Graded Assignment.


 The assignment submitted through email will not be accepted.
 This assignment is covering Lectures 12 – 29 (Topics: 47 to 126).
 For detail of topics in each lecture, see syllabus file given in download section of this course.
The link of file is: https://vulms.vu.edu.pk/Courses/CS202/Downloads/CS202%20Mid%20Term
%20Syllabus.pdf

Guidelines:
 Code should be properly indented.
 You can use the following tools/software:
o Notepad or Adobe Dreamweaver
 You will not use any other software to make .html file.

For any query about the assignment, contact at [email protected].


Assignment Statement:

You have been hired by company XYZ, where the boss has requested you to develop a task management app to
help add tasks for employees. Your task is to create a simple task management app that have the following
functionalities:

 Display the Current Date and Time in Real-Time: The app will update and show the current date and time
dynamically, allowing the boss to track time as tasks are managed.
 Show/Hide Description: The app will provide a brief description of its purpose (e.g., "This app helps you
manage tasks for your employees.") that can be shown or hidden based on user interaction. This feature allows
for a clean, user-friendly interface.
 Add Tasks Dynamically: Users will be able to add tasks to a list with ease. Each task will be added by typing
into a text box and clicking an "Add Task" button. This feature is useful for quickly managing tasks for multiple
employees.
 Hover Effect on Tasks: The background color of each task will change when hovered over. This adds an
interactive element to the app, making it visually engaging and easy to distinguish tasks.

Breakdown of Tasks:

HTML Structure

1. Add a heading at the top of the page with the text "Task Management App".
2. Include a paragraph describing the purpose of the page (e.g., "This app helps you manage your tasks
effectively").
3. Add a <div> to display the current date and time, updating every second.
4. Add a button with the text "Show/Hide Paragraph".

JavaScript Features

1. Write JavaScript to display the current date and time in the <div>. The time must update every second.
2. Add functionality to the "Show/Hide paragraph" button: When clicked, it should toggle the visibility of
the paragraph describing the purpose of the page.

jQuery Features

1. Create an unordered list (<ul>) with at least 5 initial tasks (e.g., "Task 1", "Task 2", etc.).
2. Add a textbox and a button with the text "Add Task".
3. Write a jQuery function that adds a new task to the list when the "Add Task" button is clicked. Clear the
textbox after adding the task. The new task should be added only if the textbox isn't empty.
4. Add a hover effect to all list items using jQuery: Change the background color when hovered, and restore it
when the mouse leaves.

Solution Instructions:

 Use basic HTML and CSS, which you have learnt till Lecture 29 to design your web page as
sample page.
Solution Output:

BEST OF LUCK!

You might also like