Scribd
Upload
3 views2 pages

CSW1 Assignment JQuery

This document outlines Assignment-3 for jQuery, intended for the CSW1 course during the Sep 2024 to Jan 2025 session for CSE students. It includes ten questions that require students to create various jQuery functionalities, such as manipulating webpage elements, handling user interactions, and implementing animations. The assignment aims to assess students' understanding and application of jQuery concepts across different learning levels.

Uploaded by

common.9acc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views2 pages

CSW1 Assignment JQuery

This document outlines Assignment-3 for jQuery, intended for the CSW1 course during the Sep 2024 to Jan 2025 session for CSE students. It includes ten questions that require students to create various jQuery functionalities, such as manipulating webpage elements, handling user interactions, and implementing animations. The assignment aims to assess students' understanding and application of jQuery concepts across different learning levels.

Uploaded by

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

Assignment-3 for jQuery

Subject: CSW1 (CSE 2141)


Session: Sep 2024 to Jan 2025
Branch: CSE
Section: All
Course Outcomes: CO3

Learning Levels: Remembering (L1), Understanding (L2), Application (L3), Analysis (L4)
Evaluation (L5), and Creation (L6)

Q no. Questions Learning


Levels
Q1. Create a webpage using jQuery that contains three buttons to change the background L1, L2
color of the entire page to red, blue, or green, depending on which button is clicked.
Additionally, add a separate button that toggles the visibility of all <div> elements on
the page. When the toggle button is clicked, the <div> elements should either be shown
or hidden based on their current visibility state. Ensure that the background color
change and visibility toggle functionalities work smoothly together.

Q2. Write a jQuery program to perform the following actions on a <div> element: when the L2, L3
user clicks on the <div>, its text should change to 'Clicked!'; when the user double-
clicks, the background color should change to orange; when the user hovers (mouse
enters) over the <div>, the border color should change to green; and when the user
moves the mouse away (mouse leaves), the border color should revert to black. The
<div> should initially have a light blue background, a black border, and centered text.

Q3. Write a jQuery program that starts an animation on a <div> element when a 'Start' L2, L3
button is clicked and stops the animation when a 'Stop' button is clicked. The animation
should increase the width of the <div> from 100px to 400px over 2 seconds. If the
'Stop' button is clicked during the animation, the <div> should immediately stop
resizing at its current width.

Q4. Write a jQuery program with two buttons: one button labeled 'Fetch Text' to retrieve L2, L3
and display the text content of a <p> element using an alert, and another button labeled
'Fetch HTML' to retrieve and display the HTML content of a <div> element using an
alert.

Q5. Write a jQuery program to manipulate an unordered list (<ul>) containing the items L2, L3
'Getting Started with Full Stack,' 'HTML,' and 'CSS.' Use the append() method to add a
new list item 'CSS' at the end of the list, the prepend() method to add 'Introduction to
Full Stack Development' at the beginning, the after() method to insert a paragraph
'Topics updated' immediately after the list, and the before() method to add a heading
'List of Topics Covered' immediately before the list.
Q6. Write a jQuery program that lets a user apply one of two classes ('highlight' and 'dim') L3, L4
to a <div> element by clicking two different buttons. The 'highlight' class should set the
background color of the <div> to yellow, while the 'dim' class should reduce the
opacity of the <div>. Ensure that clicking the 'Add Highlight' button applies the
'highlight' class, and clicking the 'Add Dim' button applies the 'dim' class, with the
previously applied class being removed before the new one is added.

Q7. Create a webpage that contains a table displaying student data and an 'Add Row' L3, L6
button. The 'Add Row' button should add a new row with data from input fields each
time it is clicked. Additionally, include a 'Change Color' button to change the text color
of all table data to red.

Q8. Create a webpage that includes a text box and a button. Write jQuery code that removes L3, L4
the element with an ID matching the text entered in the text box when the button is
clicked. The webpage should initially contain a <div> with paragraphs, each having a
unique ID.

Q9. Write code to display a popup box without using the JavaScript alert() function. L4, L6

Q10. Create a sign-up form with the following requirements: L4, L6


1. Users should be able to see hover states for all interactive elements on the page.
2. An error message should be displayed when the form is submitted if:
o Any input field is empty.
o The email address is not formatted correctly.
Hints:
1. To check if a field is empty, you can use the following code
var a = $("#fieldId").val();
if (a == "") {
// Field is empty
}
2. In HTML5, you can use the type attribute set to email to validate email addresses.

-END-

You might also like