{"action":"created","issue":{"url":"https://api.github.com/repos/TIY-Durham/2015-FALL-FEE/issues/157","labels_url":"https://api.github.com/repos/TIY-Durham/2015-FALL-FEE/issues/157/labels{/name}","comments_url":"https://api.github.com/repos/TIY-Durham/2015-FALL-FEE/issues/157/comments","events_url":"https://api.github.com/repos/TIY-Durham/2015-FALL-FEE/issues/157/events","html_url":"https://github.com/TIY-Durham/2015-FALL-FEE/issues/157","id":105866407,"number":157,"title":"07 -- David White","user":{"login":"s4dmw","id":13879097,"avatar_url":"https://avatars.githubusercontent.com/u/13879097?v=3","gravatar_id":"","url":"https://api.github.com/users/s4dmw","html_url":"https://github.com/s4dmw","followers_url":"https://api.github.com/users/s4dmw/followers","following_url":"https://api.github.com/users/s4dmw/following{/other_user}","gists_url":"https://api.github.com/users/s4dmw/gists{/gist_id}","starred_url":"https://api.github.com/users/s4dmw/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/s4dmw/subscriptions","organizations_url":"https://api.github.com/users/s4dmw/orgs","repos_url":"https://api.github.com/users/s4dmw/repos","events_url":"https://api.github.com/users/s4dmw/events{/privacy}","received_events_url":"https://api.github.com/users/s4dmw/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-09-10T18:12:46Z","updated_at":"2015-09-10T18:14:25Z","closed_at":null,"body":""},"comment":{"url":"https://api.github.com/repos/TIY-Durham/2015-FALL-FEE/issues/comments/139331777","html_url":"https://github.com/TIY-Durham/2015-FALL-FEE/issues/157#issuecomment-139331777","issue_url":"https://api.github.com/repos/TIY-Durham/2015-FALL-FEE/issues/157","id":139331777,"user":{"login":"s4dmw","id":13879097,"avatar_url":"https://avatars.githubusercontent.com/u/13879097?v=3","gravatar_id":"","url":"https://api.github.com/users/s4dmw","html_url":"https://github.com/s4dmw","followers_url":"https://api.github.com/users/s4dmw/followers","following_url":"https://api.github.com/users/s4dmw/following{/other_user}","gists_url":"https://api.github.com/users/s4dmw/gists{/gist_id}","starred_url":"https://api.github.com/users/s4dmw/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/s4dmw/subscriptions","organizations_url":"https://api.github.com/users/s4dmw/orgs","repos_url":"https://api.github.com/users/s4dmw/repos","events_url":"https://api.github.com/users/s4dmw/events{/privacy}","received_events_url":"https://api.github.com/users/s4dmw/received_events","type":"User","site_admin":false},"created_at":"2015-09-10T18:14:25Z","updated_at":"2015-09-10T18:14:25Z","body":"### Reading JavaScript: Events\r\n\r\nThe `Element.addEventListener` method isn't just limited to `click` events. Pretty much any input a user can provide triggers an event in JavaScript: clicks, scrolls, pressing a key on the keyboard. [The Event Reference in the MDN](https://developer.mozilla.org/en-US/docs/Web/Events) provides an exhaustive list of events that JavaScript recognizes. Document [the `Event` type](https://developer.mozilla.org/en-US/docs/Web/API/Event) and answer the following questions:\r\n\r\n* How does an `Event` \"bubble\"? Can I make it stop?\r\n* What does the `target` property of an `Event` refer to?\r\n* Besides `click`, what _other_ event types can I trigger with my mouse?\r\n* What types of events can be triggered on a `<form>` element?\r\n\r\nNext document some of the common event types that we'll encounter: `click`, `scroll`, `change`, `submit`, `load`, and `unload`. Not all HTML elements can listen to all events, so make special note of which HTML elements those event types apply to. Give an example of each in use, selecting an element from the document and attaching an event listener to it.\r\n\r\n#### BEAST MODE\r\n\r\nThere are a bunch of keyboard-related events in the DOM specification, too. I bet they'll come in handy soon enough. Document those as well, and explain how I might listen to a _specific_ key combination. For example, how do I make JavaScript listen for _just_ an `Enter` key or maybe `Command` and `+` together?\r\n\r\n### Building the Blueprints\r\n\r\nYou've made and followed the blueprints...now it's time to build the house!\r\n\r\n_Merge your `06` branch via the Big Green Button_, then create a new _WIP Branch_ named `07--the-last-cascade` in GitHub. On your local machine, check out the `master` branch and `git pull` to update your local copy. Then check out your _new_ branch to get to work!\r\n\r\nRemember that `scripts.js` file with your pseudocode for `NestedAccordians` and `ViewModeSwitch`? Time to implement the JavaScript. You've already written out _how_ it should work, so try writing the JavaScript code that will _make_ it work. If you're not happy with your \"how\" explanation, totally expand it. It will help. _Don't change any HTML or CSS except to link your `scripts.js` in the appropriate place!_\r\n\r\nLeave your pseudocode in on the appropriate line of code. Explain any differences between your originally vision and what you got to work as code comments.\r\n\r\n#### NestedAccordion\r\n\r\nWith `NestedAccordion` you'll be using `click` events to replicate the [reference implementation](http://tympanus.net/codrops/2013/03/29/nested-accordion/). Take baby steps. Your first task is to make a function that opens the _first_ closed accordion so the description text is visible. Just trigger it from the console at first, _then_ try wiring that up when the _first heading_ is clicked. After that, reverse it: write a function that _just_ closes the first open accordion. Now... can you make it open _and_ close on a click? Ta-da!\r\n\r\nNow you're ready to move on to other accordions. Try to get all the top-level accordions to open and close _at the same time_. That's totally not our goal, but it's a target along the way. Then, see if you can make only _one_ accordion open and close at a time, without breaking any of the other accordions. Momma's got a squeezbox...!\r\n\r\n##### BEAST MODE\r\n\r\nThere are _multiple_ levels of accordions going on here. Can you generalize your code to work for _any_ accordion whose heading has been clicked?\r\n\r\n#### ViewModeSwitch\r\n\r\nNow we'll tackle `ViewModeSwitch`. Like [the reference implementation](http://tympanus.net/codrops/2013/07/01/view-mode-switch/), you want to change the layout of the page when a user clicks on a button in the upper right-hand corner. What `events` do you think you'll be using?\r\n\r\nYour first baby step should be to focus on the buttons. Using JavaScript, how can you switch the `\"active\"` button? Got that? Now make a _function_ that does that and invoke it from the REPL. Can you wire that up to a `click` listener? Wait, there are _two_ buttons there.\r\n\r\nOk, almost there! What causes the layout to shift when the buttons are clicked? Use the reference, Luke! Can you write a function that does that? Can you wire it up to a `click` event? Can you toggle between them? Welcome to the Grid, User.\r\n\r\n#### MultiColumnForm\r\n\r\nRemember the `MultiColumnForm`? If you cleaned house last night, you should have an empty `scripts.js` all ready to be filled with code.  [The reference implementation](http://tympanus.net/codrops/2013/06/06/responsive-multi-column-form/) didn't have any JavaScript behavior, did it? Now we get to _add_ some!\r\n\r\nFor this challenge, you'll focus on the JavaScript that would take a user's input and turn it into output. You need to find a way to capture input from the form. You then want to output that input to the console using `console.log`.\r\n\r\nThis is a tough problem, so tackle it as a group, practicing breaking down baby steps. You'll need [the Event reference on MDN](https://developer.mozilla.org/en-US/docs/Web/Events) to find the correct event to listen for and how to make it do your bidding (instead of its _default_ behavior).\r\n\r\nWhen turning in this assignment, make sure you put your `scripts.js` code in the repo, but _also_ put the result of the output as a comment in your _WIP Issue_. Just for good measure, drop a few of those comments and be sure to use code fences!"}}