Scribd
Upload
42 views

Assignment JQuery New

The document outlines 10 questions for a jQuery assignment. The questions cover topics like counting child elements, attaching events, form validation, filtering data, and building games. Students are asked to create interactive pages using jQuery methods like slideDown(), animate(), and attr(). Validation is required for forms and error messages should be shown for empty or invalid fields. Responsive design is also mentioned, asking students to optimize layouts for different screen sizes.

Uploaded by

Buxar Students Life
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

Assignment JQuery New

The document outlines 10 questions for a jQuery assignment. The questions cover topics like counting child elements, attaching events, form validation, filtering data, and building games. Students are asked to create interactive pages using jQuery methods like slideDown(), animate(), and attr(). Validation is required for forms and error messages should be shown for empty or invalid fields. Responsive design is also mentioned, asking students to optimize layouts for different screen sizes.

Uploaded by

Buxar Students Life
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Assignment

(JQuery)

Subject: CSW1 (CSE2141)


Session: Sep 2021 to Jan 2022
Branch: CSE&CSIT
Section : All
Question 1. Count child elements using jQuery. Note: Count number of "p" elements
from the following:

<body>
<div id="selected">
<p>Red</p>
<p>White</p>
<p>Green</p>
<p>Black</p>
<p>Blue</p>
<p>Orange</p>
</div>
</body>

Question 2. Attach a click and double-click event to the <p> element.


<body>
<p>Click me!</p>
</body>

Question 3. Attach a function to the blur event. The blur event occurs when the
following <input> Field1 loses focus.
<body> <form>
<input id="field1" type="text" value="Field 1">
<input id="field2" type="text" value="Field 2">
</form>
</body>

Question 4. Show a popup box without using JavaScript alert.

Question 5. Create an HTML page which uses the following methods, (i)
slideDown(), (ii) animate(), (iii) fadeIn(), (iv) hide(), (v) show(), (vi) mouseenter(),
(vii) dblclick(), (viii) mouseleave(), (ix) attr(), and (x) html().

Question 6. Create a page which contains a table and add button which will add
rows to this table. Change color of a text on button click. Add a text box and a
button. Write code to remove all the elements which ID matches with the text
entered in the text box upon clicking on the button.
Question 7. Create a sign up form. Your users should be able to:
(i) View the optimal layout for the site depending on their device's screen size
(ii) See hover states for all interactive elements on the page
(iii) Receive an error message when the form is submitted if:
(a) Any input field is empty
(b) The email address is not formatted correctly
Hints: Use {var a = document.forms["FormName"]["FieldName"].value; if (a == null) it is empty}
to check the field is empty or not;
In HTML5 you can do like this to check valid email address
<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>
One of the new values to the type attribute is email. Using this type of field instead of the
regular text field the browser uses a regular expression to check that the user has in fact typed
in an email address.
Question 8. Create a front end page which performs Job listings with filtering. Include data of
at least 20 Job categories, 100 jobs.
In this challenge, you will need to filter the job listings by the categories selected. You can use
HTML, CSS, Java Script (JQuery).

Hint: Use JavaScript to filter items in the DOM. This is a key skill when building client-side
applications.

Question 9. Build a game, namely Rock, Paper, Scissors. This Rock, Paper, Scissors game will
require the advance skill of both your CSS skills and Java Script.

Your users should be able to:


(i) View the optimal layout for the game depending on their device's screen size
(ii) Play Rock, Paper, Scissors against the computer
(iii) Maintain the state of the score after refreshing the browser (optional)

Question 10: Create a multi-page website which uses the optimal layout for each page
depending on their device's screen size. The website performs the following.
(a) See hover states for all interactive elements throughout the site
(b) See the correct content for each team member on the About page when the + icon is
clicked
(c) Receive an error message when the contact form is submitted if:
(i) The Name, Email Address or Message fields are empty should show "This
field is required"
(ii) The Email Address is not formatted correctly should show "Please use a
valid email address".

You might also like