Designing with jQuery

https://jsfiddle.net/dwendling18/xtnea3kh/

Click on the link below. On this link, write a loop that will print all of the items in the array to the document (use JavaScript to do this)

Do Now:

1

Do Now:

Write the code that will turn the following HTML elements to jQuery objects

<h3> </h3>

Problem 1

<h2 id="row3"> </h2>

Problem 2

Problem 3

Problem 4

<div class="text_box"> </div>

<p id="first_paragraph"> </p>

2

Objective for today:

Use jQuery to insert data into our website and make our websites look pretty

3

Watch the video at the link:

https://youtu.be/LdWPr7oZ74Q 

You can use the slides in this slide show to follow along with the video. 

4

5

<div id = "pets"> </div>

1. Copy and paste the following code into the HTML box of your fiddle

2. Copy and paste the following code into the JavaScript box of your fiddle

var pets_array = [
   'hamster',
   'dog',
   'cat',
   'snake',
   'lizard'
];

3. Create an empty loop that will run the same number of times as the length of the array

4. Add jQuery, inside of the loop, so that all of the items in the array are printed inside of the <div> you added to your HTML. 

5. Make the data look pretty using CSS. You may also add more information to the page, pictures, links, etc. 

6

Now it's your turn.

Challenge 1: Go through the steps on the previous pages and create the program I created. Make the CSS your own and make the information look good on the webpage. Use http://www.w3schools.com/ if you need help with CSS. 

Challenge 2: Add another array and display this data in a different div below the first div. Use jQuery to display the data. Make this information look good using CSS. 

Challenge 3: Open a new fiddle and create a webpage using HTML, jQuery, and CSS. The code should have an array in it but the webpage can be about anything appropriate.

7