Scribd
Upload
26 views

Class: BESE-10AB: Department of Computing

This document provides instructions for a lab assignment on jQuery. The lab has 4 tasks to help students practice basic and advanced jQuery concepts by implementing dynamic functionality on web pages. Task 1 involves adding date and time displays to list items. Task 2 adds information displays and handles click and mouseover events. Task 3 incorporates scrolling functionality to show and hide a div. Task 4 adds dynamic form functionality to add and remove table rows. Students are to provide jQuery code and screenshots to complete each task.

Uploaded by

Waseem Abbas
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
26 views

Class: BESE-10AB: Department of Computing

This document provides instructions for a lab assignment on jQuery. The lab has 4 tasks to help students practice basic and advanced jQuery concepts by implementing dynamic functionality on web pages. Task 1 involves adding date and time displays to list items. Task 2 adds information displays and handles click and mouseover events. Task 3 incorporates scrolling functionality to show and hide a div. Task 4 adds dynamic form functionality to add and remove table rows. Students are to provide jQuery code and screenshots to complete each task.

Uploaded by

Waseem Abbas
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/ 8

Department of Computing

CS-344: Web Engineering

Class: BESE-10AB
Lab 07: jQuery

Date: 04 November 2021

Instructor: Dr. Qaiser Riaz

CS-344: Web Engineering Page 1


Lab 07: jQuery

Introduction:
jQuery is a widely used and well-known library for JavaScript which helps in rapid web
development. Most of the modern websites use jQuery as a tool to implement and control
client side dynamic behavior of the websites. Students have learned basic and advanced
concepts of jQuery during lectures. This lab will help them to further understand these
concepts by practically using jQuery in given situations.

Lab Objectives:
The objective of this lab is helping students to familiarize themselves with basic and advanced
concepts of jQuery by practically implementing them in given scenarios. The knowledge
students have gained in the lectures will help them to develop and control dynamic behavior of
web pages using jQuery.

Tools:
Notepad, DreamWeaver, browser.

Helping Material:
Lecture slides.

W3Schools: https://www.w3schools.com/js/default.asp

jQuery API: http://api.jquery.com/

jQuery Cheatsheet: https://oscarotero.com/jquery/

Lab Task

Task 1
During lectures, students have seen a basic version of the ‘buy groceries’ example. This basic
version is given in ‘grocery-basic-skeleton.html’ file along with CSS and JavaScript (see ‘lab-7-
supporting-material.zip’). Using jQuery, you have to change the behavior of the list items <li> as
explained below:

1. When you click on any list item <li>, it should display current date and time in the
format shown in the image below.

CS-344: Web Engineering Page 2


2. Hint: A <span> class ‘date’ is already defined in CSS. You can use it to style date and
time.

Task 2
Using the ‘grocery-basic-skeleton.html’ file, you have to change the behavior of the list items
(using jQuery) as explained below:

1. Add a new paragraph after last list item as shown below:

CS-344: Web Engineering Page 3


2. When you click or mouse over on any list item <li>, it should display following
information:
a. Item: Name of list item which is clicked or on which mouse over event occurred
b. Status: Important (for honey and pine nuts), Available (for all other items)
c. Event: Name of event (click, mouseover)

CS-344: Web Engineering Page 4


Task 3
1. Extend the ‘basic-skeleton.html’ file but adding new list items and a footer as shown
below (hint: use MS word’s zooming to clearly see the figure):

CS-344: Web Engineering Page 5


2. When scroll the page down to bottom, a new div appears at the bottom-right side,
showing latest promotions:

3. The promotion div must disappear as soon as the user scrolls the page up to 500px from
the bottom.

Hints:

 Use $window.scrollTop() to get the current vertical position of the scroll bar.
 Use following formula to find if the user is within bottom 500px of the page.
o $('#footer').offset().top - $window.height() – 500
 Use $window.on (‘scroll’, function(){….} to handle onScroll() event of the window.
 jQuery’s animate() function will help you achieving this task.

Task 4
Extend the ‘task-4-skeleton.html’ file and add following two functionalities using jQuery:

1. Add functionality for ‘add row’ button which should add a new row with the data
entered by the user in Name and Email Address text fields. The table should be
extended dynamically and new row should be appended at the end.

CS-344: Web Engineering Page 6


2. Add functionality for ‘delete row’ button which should delete all selected rows.

Note: Upload complete solutions (css, html, js) for each task in in a single zip file along with
adding jQuery and screenshots of your solutions in this word file.

Solution
Task 1 jQuery:

Task 1 screenshot:

Task 2 jQuery:

Task 2 screenshot:

CS-344: Web Engineering Page 7


Task 3 jQuery:

Task 3 screenshot:

Task 4 jQuery:

Task 4 screenshot:

Deliverables
Compile a single word document by filling in the solution part and submit this Word file on LMS.
You must include your name, ID, and class on first page. The lab grading policy is as follows: The
lab is graded between 0 to 10 marks. For some of the labs, students have to present their
solutions in a viva session. In case of any problems with submissions on LMS, you should
contact your lab engineer Ms. Ayesha Asif by email at [email protected].

CS-344: Web Engineering Page 8

You might also like