The javascriptvacation from rachaelsh

javascriptvacation's Introduction

##JavaScript DOM Manipulation Project

##Purpose The purpose of this day project is practice setting up an HTML/CSS Site and manipulating the DOM by use of vanilla JavaScript. The student will get an opportunity to slide, fadeIn, hide, and append components through the use of event listeners.

##Directions

Fork and clone this repository.
Take some time to look over this terrible looking vacation site. Notice that there are several places of opportunity for the use of JavaScript. The menu button, the scam button, the list of links, the arrows for sliding the images, and even the images themselves offer opportunity to play around with JavaScript.
When you are ready, using script tags, connect the app.js file.
I am going to leave styling and DOM manipulation completely up to you. I am merely providing you with ideas and suggestions. So please, make use of JavaScript to accomplish whatever it is you would like to do to this site. And most importantly have fun!

##Ideas

Create a menu, so that you can slideToggle in a menu bar when the menu button has been clicked.
When you click on the scam button "Click Here", have a small animated dancing man pop up.
By clicking on the Useful Links element, toggle between showing and hiding the actual links.
When you click either of the arrows next to the images, have the images fade off the screen and have new ones fade in from the opposite side.
When you click on the images, have a modal pop up explaining the vacation destinations a bit further, or have the images flip around so you can see the backside where text can be visible.
If you incorporate an exit button on the images, it can remove the image or replace it with another image.