0. Today’s featured app:
1. Code challenge
You will work with a partner to create a webpage that incorporates what you’ve learned this week.
Your goal is to make a page that has some kind of coherent and consistent theme.
a. Find a partner
b. Download this code (copy and paste it into a new Notepad++ file)
c. Save the file under a new name
d. Come up with an idea for your page
e. If you include a character like the ghost, you MUST change it to another image and also change the sound! Remember to find sounds on this page, use bing.com to do an image search (make sure you choose “free to share and use” under license), and use pixlr.com to resize your image.
f. You MUST change the background image to something that fits the theme of your webpage. Again, use bing.com to do an image search for a background.
g. If you use the animated character we created, you MUST change him up! Ask Jose if you can see his code for an example of how you can make the character do something different. You can also check out jQuery’s API’s to see if you can incorporate them into your code to change things up.
Example:
Add the following code to the <script> section for your character and see what happens
$( ‘#my-div’ ).click(function() {
$( ‘#my-div img’ ).fadeToggle( ‘fast’, function() {
$( ‘#my-div’ ).html( ‘<img src=”http://i.imgur.com/90Mmdcm.png”>’ );
});
});
h. If you use the animated character, you MUST also change the fireballs he is throwing to something else (remember we did this on Tuesday; you have to find a new image and add it to your code in the right place).
i. If you are using hidden characters like the ghost example, see if you can add more than one character.
j. Anything else you can think of!
We will do a show and tell at the end of class- be ready!