CSE383 Lab #9 JQuery solution




5/5 - (5 votes)

Objective: The objective of this exercise is to:
1. Continue working with JavaScript
2. Learn and implement the JQuery libraries
3. Access DOM from JQuery
4. Access Form variables from JQuery
5. Write and debug JQuery Methods (function)
Submit: screenshots, your html file and a link to your web page
You may discuss this with your fellow students or the instructor.
Part #1: jQuery Tutorial
Estimated time: 20 minutes
Exercise: Slides
 Use new bootstrap template with jquery/ajax
 7-8 General usage
 10-18 Get/Set/Class modifications
Part #2: jQuery Page
Estimated time: 30-60 minutes
 All work will be done in ~/public_html/cse383/lab9
 Create a file call called index.html using the supplied file
 Do the following using JavaScript with jQuery commands
 Note: you may have to update the given CSS (do it all in the internal CSS styles)
1. Update all divs with class square to include the outline class (one command for all
divs – not one command per div)
a. Do this in the javascript code where indicated
2. Toggle Colors:
a. Toggles the color on and off for each square using CSS classes.
Page 1 of 2
CSE383 Lab #9 JQuery
b. Update the button to call your function to do this
3. Toggle Rounded Borders:
a. Toggles the rounded-borders on and off for each square using CSS classes.
b. Update the Button to call your function to do this
4. Add a New Box:
a. Adds one new square to the container – next to the others.
b. Update the Button to call your function to do this
c. Make certain that every new box works with the other buttons
 Screenshot
o Attach a screenshot of your completed web page after you have changed it using
 Showing different colors, borders, and more boxes
 File
o Attach the html file
 Link
o Add the link to the web page in the text area
Page 2 of 2