montana-code-school / angularvacation

##Angular DOM Manipulation Project I know...We're doing another one, but trust me, it's the last vacation we will ever go on...

##Purpose The purpose of this day project is practice setting up an HTML/CSS Site and manipulating the DOM by use of Angular custom directives with the use of the link function. 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 DOM Manipulation. 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 Angular.

• When you are ready, set up your Angular environment. Don't forget the CDN and the app.js file.

• For every different function you would like to create, set up a new separate directive and set up the link function in each. You will need to take the html content out of the index.html file and put it into an html template that is associated with the directive. By keeping this process modular, you will benefit when it comes to learning React in a few weeks.

• 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 Angular 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.

-Do as much as you like. Get creative. Have fun!

##Copyright

(c) Montana Code School, 2016.