Description
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.
Name:
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
Exercise:
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
SUBMIT:
Screenshot
o Attach a screenshot of your completed web page after you have changed it using
jQuery
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
