Today’s goal:

• Create a “haunted” webpage by using JavaScript to hide and reveal a screaming ghost

 Today’s featured website:

• http://js1k.com/2013-spring/demo/1457– Check out this fun, light-weight JavaScript demo

 Haunted webpage tutorial

• You are following this tutorial with some modifications. Follow the steps below carefully! Some code will be different.
  1. Open Notepad++ and start a new webpage (opening and closing html, head, title, and body tags). Save it as ghost.html
  2. Below the opening body tag add an opening div tag with a class of “ghost container” and then add a closing div tag.
  3. Inside the div tags, before the closing div tag, you’re going to add an image. The class will be ghost and the source will be http://www.thinkful.com/learn/static/guides/halloween-programming-tutorial/ghost_pic.png. It will look like what you see here but your src (source) will be different and you’re not using an alt tag.
  4. Add opening and closing style tags in your section. Add the CSS from here in between those tags. Also add to your style sheet body, an opening curly bracket, background-color: black; and a closing curly bracket to add a black background color to your webpage.
  5. Now, add some opening and closing script tags right before your closing body tag and add the JavaScript code from here in between the tags. Here is the link for your sound file http://www.thinkful.com/learn/static/guides/halloween-programming-tutorial/file.wav
  6. Preview your page in the browser. Hopefully you have a screaming ghost!
• Change it up! Change the amount of time it takes for the ghost to appear to something else (change 5000 to another number). Try also changing the amount of time it takes for it to disappear to something else (change 6000; this number should be bigger than whatever number you have for it to appear).
• Change the ghost image to something else- simply find another image, get its link, and change it from the above link.
• Try changing the ghost’s visibility. Maybe have it start out appearing on the page and then have it disappear and come back again. Change its visibility in the style sheet from hidden to visible and in the JavaScript switch up visible and hidden by changing one for the other.
• Add another sound by downloading a sound effect from this free library. Just download it, save it in the same place as your webpage, and change the source file in your JavaScript from ‘…/file.wav’ to the name of your new sound file.
• Let’s review the code to understand some more JavaScript concepts
• When you’re done (optional): Follow this tutorial to create a game with JS