HW6: Bookmarklet

People will never use our Pinboard if they have to manuall cut-n-paste the URL for every image they want to add. What we need is a painless way for them to enter images from whatever page they are browsing directly into our Pinboard. Thus, we need a bookmarklet, or a browser extension (which are basically just bookmarklets with some extra browser-specific files added).

This week you will implement a bookmarklet that lets the user painlessly add img URLs to his pinboard. Specifically, you will:

1. Add the bookmarklet to the / page, for logged-in users only.
   
2. When the user clicks on your bookmarklet, your JavaScript code will erase the current page and show only the imgs in that page.
   
3. Each image will be surrounded by a form that lets the user add a caption and then submit that image back to your server (the user can only submit one image)
   
4. After submitting the user is re-directed to the page showing his new pin.
   

Required Reading

This is our first JavaScript homework. You will need to know quite a bit of JavaScript to do this. My videos cover the specific topics you need to know. But you should also use:

• JavaScript at the MDN is your reference.
  

When done, push your homework to your private github repo, and publish on appengine.com with Version: 6, by Monday, October 8 @9am. Note: My solution to this homework does not use jQuery (or any other library) and I recommend that neither should yours. If you do, you will be downloading a second script file whenever the user clicks on the bookmarklet (so, making the button a bit slower), and it is a good learning experience to write a bit of JavaScript using only the built-in DOM manipulators.