Scribd
Upload
238 views5 pages

CS202 Assignment No 2 Spring 2023

This document outlines an assignment for a CS202 Fundamentals of Front-End Development course. Students are tasked with creating a simple webpage using HTML and jQuery to dynamically modify elements based on button clicks. The assignment involves 3 tasks - developing an initial webpage, adding content and modifying styles when a "Read Introduction" button is clicked, and adding new list items and disabling a button with another click. Guidelines are provided on file formats, tools that can be used, and objectives of learning jQuery events and effects.

Uploaded by

Qasim Khan
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
238 views5 pages

CS202 Assignment No 2 Spring 2023

This document outlines an assignment for a CS202 Fundamentals of Front-End Development course. Students are tasked with creating a simple webpage using HTML and jQuery to dynamically modify elements based on button clicks. The assignment involves 3 tasks - developing an initial webpage, adding content and modifying styles when a "Read Introduction" button is clicked, and adding new list items and disabling a button with another click. Guidelines are provided on file formats, tools that can be used, and objectives of learning jQuery events and effects.

Uploaded by

Qasim Khan
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/ 5

Assignment No.

02 Total Marks: 20
Semester: Spring 2023 Lectures: 23 to 28 (Topics:
CS202: Fundamentals of Front-End 99 to 122)
Development Due Date: 14-July-2023

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: You have to just upload .html file which will have code of HTML. Assignment in any other format
(extension) will not be accepted and will be awarded with zero marks.

Objectives:

The objectives of this assignment are:

 To learn how to use JQuery with HTML.


 Use of different JQuery events.
 Use of JQuery Effects
Note:

 This assignment is a Graded Assignment.


 The assignment submitted through email will not be accepted.
 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
 For JavaScript libraries you will use the below given link:
https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js

Guidelines:

 Code should be properly indented.


 You can use the following tools/software:
o Sublime, Adobe Dreamweaver, Notepad
 You will not use any other software to make .html file

For any query about the assignment, contact at cs202@vu.edu.pk.


Assignment Statement:

Suppose you have been hired as a Front End developer in XYZ university. You have been assigned a task
to add dynamic behavior to a webpage with the help of JQuery. Your web page should look like the
sample web page given below.

Sample Web Page:

Screenshot no. 01
Screenshot no. 02

Task 1:

You will develop a simple web page with the help of basic HTML tags, <h2>, <input>, <head>, <body>,
<button>etc.

Task 2:

When you click on the READ INTRODUCTION button, the background color of the BUTTON should
change to green, and the text "Please click on the below button to read introduction to Front End
Development" which is above the button, should disappear, as shown in screenshot no. 2. Moreover, the
following Introduction to Front End Development paragraph should appear on the webpage.

"This course starts with describing front-end development on the web. Build foundations on HTML, CSS, and
JavaScript and cover advanced topics based on current trends in HTML5, CSS3, Responsive Design, and some
of its frameworks like Bootstrap. 

The focus is to learn while solving different problems and doing many real-life case studies."

Furthermore, the list of different tools that are used in front-end development should appear on the
webpage, as shown in screenshot no. 2.
Task 3:

When you click on the "Add List Item" button, it will add two more list items (Ajax and JQuery) to the
list, as shown in Screenshot No. 3.

Furthermore, the "Add List Item" button will be deactivated, and the text, "Click on the 'Add List Item'
button to view JavaScript libraries.", will disappear from the webpage.

Sample Web Page after performing the tasks.


Solution Instructions:

 Use javaScript library: https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js to design


your web page as sample page.

 You also have to use HTML basic tags and JQuery to design above sample web page (for performing
task1, task2, and task3 respectively.

 Default Background color (aqua) should be used in Task 1.

BEST OF LUCK!

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy