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-
