Start with this file.

• Go to the Youtube API docs and read through them. Look at the sample output and the example URLs for the API. Find a URL that will give you search results, and test that out in the browser.
• The webpage currently brings in video information using the jQuery $.ajax function to bring in a local videos.json file into the page.
• Change that function so that it instead brings in the results of a Youtube API search from the Youtube servers and displays those results instead. Search for whatever you fancy, but limit the search to 5 results.
• Tips: Remember that the JSON that the Youtube API returns will be different than the JSON format of videos.json. You should console.log inside your callback to see what the data looks like and make sure you’re using it correctly. In particular, check how they store the ID, the author, and the rating.
• Bonus: Create your own playlist on Youtube of your favorite videos, and bring that into the page instead.
• Bonus: Add a search button to the page so that people can search for any query.

Make sure that you use your browser developer tools to make debugging easier while working on this. Check for errors, and use console.log() to figure out how far your code makes it, and what the values of your variables are along the way.

• Find an interesting dataset in some sort of text format (XML, JSON, CSV, etc).
• Store the dataset in your project folder.
• Truncate it to a reasonable length if it’s very long (i.e. 1000 rows). Some possible sources are:
  • explore.data.gov
  • usgovxml.com
  • geocommons.com
• Create an empty webpage and load the dataset into your webpage using an AJAX or JSONP request. (See slides: AJAX/JSONP)
• Display the data as a table with columns for each of the attributes. (See slides: HTML Tables)
• Use the tablesorter jQuery plugin to make the table sortable. (See slides: jQuery)
• Create a form above the table which lets users filter or manipulate the data somehow, i.e. a dropdown box to only show rows matching a particular query, or a way of summing up attributes. Whatever would be useful with the data. (See slides: DOM, Events)
• Use the High Charts JS library to visualize a numerical aspect of the data. Or find a different library here.
• If the data has a geographical aspect (locations), use the Google Maps API to plot it on a map. (See slides: JS APIs)
• Use Twitter Bootstrap on the site to make it prettier, styling the buttons and table.

In this exercise, you’ll make a LOLCat memory game – you can see a screenshot of a sample solution on the right. A memory game consists of an even number of tiles with images on one side and a generic back. Each image appears on precisely two tiles. You start the game with all tiles turned face down, and proceed to flip over two tiles at a time. If the two tiles have the same image, they remain face up. If not, they’re flipped face down again after a short delay. The goal of the game is to get all the tiles flipped face up (i.e., find all the matching image pairs) in the least number of tries.

Example of what we’re building.

We’ll make the game more fun by using random LOLCat images from http://lolcat.com for the tiles. This site works particularly well for our purposes because their images follow a regular naming scheme so we can avoid scraping image URLs from sites by hand. The lolcat.com image URLs follow the pattern http://lolcat.com/images/lolcats/NNNN.jpg, where NNNN is a sequentially assigned number. Some experimentation shows that most of the range between 900 and 1250 works well, though a few of the images are missing. (If you happen to pick a missing one, it’ll appear as a broken image as show in the example – don’t worry about it, or just reload your page to pick another set.)

Here are some suggested steps for building the game:

Write the HTML for the game’s page, displaying a grid of face-down tiles. You can use any image you want for the tiles’ backs, but make sure it’s not easily confused with the LOLCat pictures, so it’s clear whether a tile is face up or face down.

You’ll probably want to use a <table> to lay out the tiles, and set the width and height of each image by hand. You can either write the table by hand into your HTML file, or write code to generate it dynamically using document.createElement and appendChild.

Write code to pick a bunch of random LOLCat image URLs and stick two copies of each URL into an array, then randomize the order of the array (using the code from the previous exercise).

You might also take this opportunity to preload the images so there’ll be no delay when they’re flipped over for the first time. Make the preload images visible for now so you can verify that you’re forming the URLs correctly.

Assign one LOLCat URL from the randomized array to each tile. The easiest way to attach the URLs is to store them in a made-up attribute (e.g. facesrc) right on the DOM image elements.

The browser will ignore any attributes it doesn’t understand, but you’ll be able to retrieve them later in your code when handling click events on the elements. (Note though that Firebug will not show your custom attribute in the DOM pane.)

Attach a click handler to each tile that will turn it face up. Make sure that clicking on tiles that are already face up does nothing.

Add a timeout handler when a tile is turned face up that will flip the tile face down again after a short delay (e.g., 500 milliseconds). Add the game logic that keeps track of the tiles that are face up and reacts appropriately based on whether they match or not.

You should now have a working game! Have fun playing it and tweaking it to really make it your own.

Here’s a few suggestions for extra features you could add: - Add an outline around “active” tiles (flipped up but not yet matched) so it’s clear which tile the player is currently trying to match. Add a timer or move counter to make the game more competitive. (For the timer, window.setInterval() could prove useful.) - When the game is over, allow the player to see the full-size LOLCat pictures from the tiles. - Allow the player to start a new game with a button, rather than by reloading the page. You could also allow them to pick the size of the board to play on. - Manually make a list of “bad” image numbers in the code to avoid picking them, or find a different source of pictures to play with.

You’ll create a simple word guessing game where the user gets infinite tries to guess the word (like Hangman without the hangman, or like Wheel of Fortune without the wheel and fortune).

• Create two global arrays: one to hold the letters of the word (e.g. 'F', 'O', 'X'), and one to hold the current guessed letters (e.g. it would start with '_', '_', '_' and end with 'F', 'O', 'X').
• Write a function called guessLetter that will:
  • Take one argument, the guessed letter.
  • Iterate through the word letters and see if the guessed letter is in there.
  • If the guessed letter matches a word letter, changed the guessed letters array to reflect that.
  • When it’s done iterating, it should log the current guessed letters ('F__') and congratulate the user if they found a new letter.
  • It should also figure out if there are any more letters that need to be guessed, and if not, it should congratulate the user for winning the game.
• Pretend you don’t know the word, and call guessLetter multiple times with various letters to check that your program works.

Bonus: Make it more like Wheel of Fortune: - Start with a reward amount of $0 - Every time a letter is guessed, generate a random amount and reward the user if they found a letter (multiplying the reward if multiple letters found), otherwise subtract from their reward. - When they guess the word, log their final reward amount.

Bonus: Make it like Hangman: - Keep track of all the guessed letters (right and wrong) and only let the user guess a letter once. If they guess a letter twice, do nothing. - Keep track of the state of the hangman as a number (starting at 0), and subtract or add to that number every time they make a wrong guess. Once the number reaches 6 (a reasonable number of body parts for a hangman), inform the user that they lost and show a hangman on the log.

See Solution

The goal of this exercise to make an awesome interactive animated cat.

You may find these slides helpful.

Start with this webpage, which has an img of a cat walking, and JavaScript functions that animate the cat across the screen. (For all of these, you shouldn’t need to touch the original code - just add code below.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE html>
  <html>
   <head>
    <meta charset="utf-8" />
    <title>Cat Walk</title>
   </head>
   <body>
    
    <button id="start-button">Start</button>
    <button id="speed-button">Go Faster!</button>
    <button id="stop-button">Stop</button>
    <div id="info"></div>
    
    <img style="position:absolute; left: 0px; top: 80px;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif">

    <script>
      var movePixels = 10;
      var delayMs = 50;
      var catTimer = null;
      function catWalk() {
        var img = document.getElementsByTagName('img')[0];
        var currentLeft = parseInt(img.style.left);
        img.style.left = (currentLeft + movePixels) + 'px';
        if (currentLeft > (window.innerWidth-img.width)) {
          img.style.left = '0px';
        }
      }
      function startCatWalk() {
        catTimer = window.setInterval(catWalk, delayMs);
      }
    </script>

   </body>
  </html>

• Add an event listener to the start button, so that the cat starts moving across the screen when its clicked.
• Add an event listener to the stop button, so that the cat stops moving when clicked.
• Add an event listener to the speed button, so that the cat moves faster when it’s clicked.
• Bonus: Disable the start/stop/faster buttons at the appropriate times (e.g. the user shouldn’t be able to click “stop” if the cat isn’t currently moving.)

See Solutions

The second half of these slides may be useful.

Start with this webpage, which has several input elements and a button:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <h1>Mad Libs</h1>
    <ul>
      <li>Noun: <input type="text" id="noun">
      <li>Adjective: <input type="text" id="adjective">
      <li>Someone's Name: <input type="text" id="name">
    </ul>
    <button id="lib-button">Lib it!</button>
    <div id="story"></div>
  </body>
  </html>

• Add a script tag to the bottom of the page for your code.
• Add an event listener to the button so that it calls a makeMadLib function when clicked.
• In the makeMadLib function, retrieve the current values of the form input elements, make a story from them, and output that in the story div (like “Pamela really likes pink cucumbers.”)

Show Solution

You can use something like repl.it to code this so that you don’t need to worry about making a webpage, or you can create a whole webpage for it, with inputs and buttons. You may want to start off with just JS and then add the UI later, but it’s up to you.

You may find these slides useful.

• Write a function called squareNumber that will take one argument (a number), square that number, and return the result. It should also log a string like "The result of squaring the number 3 is 9."
• Write a function called halfNumber that will take one argument (a number), divide it by 2, and return the result. It should also log a string like "Half of 5 is 2.5."
• Write a function called percentOf that will take two numbers, figure out what percent the first number represents of the second number, and return the result. It should also log a string like “2 is 50% of 4.”
• Write a function called areaOfCircle that will take one argument (the radius), calculate the area based on that, and return the result. It should also log a string like "The area for a circle with radius 2 is 12.566370614359172"
• Bonus: Round the result so there are only two digits after the decimal.
• Write a function that will take one argument (a number) and perform the following operations, using the functions you wrote earlier:
  • Take half of the number and store the result.
  • Square the result of #1 and store that result.
  • Calculate the area of a circle with the result of #2 as the radius.
  • Calculate what percentage that area is of the squared result (#3).

See Solution

What’s one of your favorite websites to visit? Imitation is the highest form of flattery, so why don’t you try to imitate it?

• Open up the webpage and keep it open as reference
• Create a basic webpage wih that webpage’s content (or atleast a small subset of it, like one blog post if its a blog).
• Set up the layout for the webpage using a framework like Twitter Bootstrap.
• Change the text and background color to match.
• Figure out if you need a custom font to match their font.
• Keep going until it looks close!

Inspiring Website Resources

• CSS Zen Garden
• Web Design Inspiration
• Design Bombs
• Dribbble

What’s an upcoming event that you’re organizing or that you’re attending and want others to come to? Create a webpage for that event!

Steps

• Create a basic webpage with the event name, logistical information (in a table), and an embedded Google Map of where it is.
• Create a Google form and embed it on the page.
• Come up with a color scheme, using Color Scheme Designer or ColourLovers, and apply that using CSS to parts of your page.
• Find a Google Web Font that suits your event theme, and use that for the headers of your page.

The goal of this exercise is to use the various elements of the Twitter Bootstrap framework to make a webpage.

• Start with this webpage.

• Use the Bootstrap grids classes to create this webpage with a sidebar and main content:

• Use the Bootstrap base CSS classes to add a quote, table, and search form to the page:

• Use the Bootstrap alert component to add a danger alert. Use the thumbnails classes to give the images borders.

View Solution in New Window

All done? (Or close enough?) Share what you made with everyone!

The goal of this exercise is to use CSS media queries to make a webpage appeardifferent for printing and for different window sizes.

Start with this webpage, which already has HTML and CSS for a header, navigation, content, sidebar, and footer. This is what it looks like:

Print Media Queries

Add a CSS media query and appropriate styles so that the webpage looks like the screenshot below when printed.

Specifically:

The header, navigation, and footer should be hidden.
The sidebar should display under the main content.

Size Media Queries

Add a CSS media query and appropriate styles so that the webpage looks like the screenshots below when resized to smaller widths.

Specifically:

• The sidebar should be hidden.
• The body should have no padding.
• The images shouldn’t exceed the width of the window.
• The navigation items should each be on their own line.
• The header should be fixed, so that it stays at the top after scrolling.

Examples:

You may want to consult these slides.

The goal is to use the CSS position property to create a webpage that looks like the one below.

Use Google Images search to find clipart like the images in the example.

Here’s what it looks like with a window width of 800x530:

Here’s what it looks like when the window is 400x475 - notice how elements resize:

Here are recommended steps for making this happen:

1. Create a blank web page with just html, head, body, and a style tag.
2. Change the background of the page to be a sky blue and have a background image of clouds.
3. Create a div for the grass - position it at the bottom and give it an appropriate height.
4. Create a div for the “Farm Party!” banner - position it near the top center area, and style the text so that it’s red. For a bonus, use a fun custom font (like from Google Web Fonts) and give it the appearance of a black stroke.
5. For each of the images shown, search for an appropriate image on Google Image search - it doesn’t have to be the exact same. Try searches like “sheep animated gif” and if you need to, restrict the results to just “clip art”. When you find the image, create a img for it on the page.
6. Position each of the img elements appropriately. The sheep should be around the bottom left, the cow should be on the horizon, the dude should be dancing in the middle, the tree should be on the front right, and the sun should be around the upper right.
7. As a bonus, position a picture of your face on top of the dude, and watch yourself have a farm party!

In this exercise, you’ll create a webpage of many embedded elements. For some of these, you may have to google to figure out how to get embed codes - some sites make it easier/more obvious than others.

You may also want to consult these slides.

1. Create a new blank page with just a header (“All About Dogs”).
2. Take a look at the Network tab in Chrome Developer Tools and write down the loading stats on the page - number of requests, KB transferred, onload ms, DOMContentLoaded ms.
3. Add an embedded Google Map that shows dog parks in San Francisco.
4. Add Facebook comments to your page.
5. Add a Twitter button to the page.
6. Create a Google custom search engine that searches across multiple dog sites and embed the search box on the page.
7. For each of the embeds, add comments around them to show where they start and end, and add an h2 to split the page up into sections.
8. Take a look at the Network tab again and write down the new stats on the page.

An example of the Network Tab in Chrome Developer Tools.

Steps

• Create a webpage that looks like the screenshot below. You can copy the logo, text, and hyperlink URLs from girldevelopit.com.
• Bonus: If you have time after, send it through the W3C validator and fix any issues it reports.
• You may want to consult these slides.

Part 2: HTML Tables Exercise

Steps

• Starting with the webpage from the first exercise, add tags to the webpage so that it looks like the screenshot below.
• Bonus: If you have time after, send it through the W3C validator and fix any issues it reports.
• You may want to consult these slides.

Part 3: HTML Forms Exercise

Steps

• Starting with the webpage from the previous exercise, add tags to the webpage so that it looks like the screenshot below.
• Bonus: If you have time, try using new HTML5 form types in the form as well.
• Bonus: If you have time after, send it through the W3C validator and fix any issues it reports.
• You may want to consult these slides.

All done? (Or close enough?) Share what you made with everyone!