Class Tuesday, March 19, 2015

0. Today’s featured app:

Drake Shake (it will change your life!)

https://itunes.apple.com/us/app/drake-shake/id765748888?ls=1&mt=8

1.  Continued Fun with jQuery

We are going to continue the following tutorial together.  Please make sure you’re in Chrome!

http://www.thinkful.com/learn/intro-to-jquery

Click on the tutorial and then hit Ctrl Shift J at the same time to bring up Chrome’s console.

Of interest- check out jQuery’s other API’s (basically things you can do with jQuery).

Going further:

Add your animated character to his own web page

Want to add all of the jQuery you just created to a separate webpage in Notepad?

Begin with a simple webpage.  Copy and paste the following into Notepad.

<html>

<head>

<title>My first jQuery test</title>

</head>

<body>

<p>My character is going here soon.</p>

<div id=”my-div”>
</div>

<script>

// My jQuery code will go here

</script>

</body>

</html>

Save this is jQuerytest1.html

a. Add the following code to your <head> section below the <title>.  This will install jQuery for you.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>

(Don’t forget to delete the quotation marks and add them again)

b. You need a style sheet for some basic CSS.  Remember the div and class used in the tutorial?  You need to create these.  Copy and paste the following code into your <head> section below the <script> tag and above the <body> tag:

<style type=”text/css”>

.container {
margin: 50px auto 0 auto;
width: 850px;
}

#my-div {
display: inline-block;
float: left;
}

.demo-hadouken {
vertical-align: top;
margin-top: 55px;
margin-left: -55px;
}

</style>

c. Finally, finish by copying and pasting the jQuery code from the tutorial into the <script> tags at the end of the <body> section (get rid of “My jQuery code will go here).  You can grab the code from where it says “full code” at the end of the tutorial page.

d.  Delete the demo-hadouken class and see what happens.  What does it affect and why?

Changing the images

Let’s try changing the character and the flame images.

a. Go to bing.com and search “animated gifs”.  Find 2 images to use.  Remember to choose “free to share and use” under license in the image search.

b. You only need the links to these animated gifs; you do not need to download them.  To get the link, click on view image and copy the link to it from that page.

c. Go back to Notepad.  Change the image link on line 29 to a link to one of the animated gifs you just found.  What happens?  Why?

d. Change the image link on line 41 to another link to a different animated gif.  What happens and why?

e. What else do you need to do to change the other images and how could you do it?