In this exercise, you will modify and extend existing code to wire up some basic interactivity for a simple "cool site". The objective of this challenge is to exercise skills with basic JavaScript, including events and DOM interactions (using jQuery), as well as using basic best practices for organizing your code.
We will break this exercise into four tasks.
Note: The Ajax calls in this exercise will only work over file://...
protocol if you're in Firefox. If you're using Chrome or IE, you'll need to run a local fileserver (like python's SimpleHTTPServer
, Apache, IIS, etc) in the coding challenge directory, and load it into the browser using http://localhost...
instead.
- Open "header.js". In this file, you will attach event handlers for the header links. Use a jQuery "document-ready" event handler.
- When the links are clicked, it should use Ajax to fetch the contents of the file referenced by the link's
href
, and load that content into the#modal
element. - Finally, make the modal visible.
- No other interaction is necessary, for now. We'll revisit the header links in Task #4.
- Open "carousel.js" and "details.js". In these files, you will attach event handlers as noted by the code comments.
- In "carousel.js", you just need to add event handlers for the left and right carousel buttons.
- In "details.js", you need to have an event handler to listen for clicks on the items in the carousel.
- Whichever carousel item is clicked, you need to pull out the "ID" from the HTML
rel
attribute. - With this "ID", you need to make an Ajax request to load the file
details/{ID}.html
and put its contents into the$content
div.
- Refactor "header.js", "carousel.js", and "details.js" to use the "module pattern". Each file should expose one module name (
Header
,Carousel
, andDetails
, respectively). - Each module's API should have at a minimum one method called
init()
, which you should wire up to be called by the jQuery "document ready" event. - Refactor so the "click" handling from
Details
is moved intoCarousel
, but keep the Ajax content loading inDetails
. - There should be a public API method on
Details
calledloadPerson(..)
which takes the "ID" and does the Ajax file loading.Carousel
should have the event handler for clicks on the carousel items wired to callDetails.loadPerson(..)
, passing along the appropriate "ID". - Refactor so there is only one jQuery "document ready" event (in its own file, such as "app.js") that calls the
init()
method on each of the three modules.
- Add a close button to the modal that works.
- Add behavior so the "register" and "login" buttons also close the modal.
- In "app.js", create a global "pubsub" event-hub (call it
EVT
for instance). In the document-ready event handler, publish an "init" event (usingEVT.emit(..)
) to the hub, and have each module listen (usingEVT.on(..)
) for this "init" event and run its owninit()
method. - Remove the public API
loadPerson(..)
fromDetails
. Instead, use the includedeventemitter2
utility to Then useEVT
inCarousel
toemit(..)
an event (like"person-selected"
for instance) with the "ID" of the person selected. Then haveDetails
listen (viaEVT.on(..)
) for this event to select the person. - Add a link/button in one of the details listings that fires the person selecting event (same as the carousel) to load another person.
- The person selecting event should scroll the carousel to show the person that's been selected.
- Highlight the selected person in the carousel.