CSE-2041A
Net-Centric Computing

York University
Fall 2012
Lab #6: JavaScript
Colour Picker
  Introduction

Welcome to Lab #6. Today is for building a webapp with JavaScript using DOM. And to poke at the security of things.

 
  1. Webapp: Palette Picker

Congratulations! (Well...maybe.) You have just been hired by Web Я Us. They want to have a simple palette picker webapp implemented primarily client-side that they could then bundle with the various webapps they build. Your boss found Parke's Colour Picker, which is in the Creative Commons. A live version is at

Parke's Colour Picker

Download the relevant files — colourPicker.html, cp.css, & cp.js — from there.

As your very first job, she asks you to take Parke's Colour Picker and extend it to make it a palette picker. Design and implement your palette picker for the following.

palette picture
  1. When the user taps (clicks) the colour square — the large square of solid colour that displays the current colour — add a palette square (if there is still room).

    The palette square should be coloured with the current colour, and have the RGB code for the colour written on top of it — like the colour square.

    • Allow up to eight palette squares. (Just do not add any more, once there are eight.)

    • Do the layout something like in the sketch-up above.

  2. Make it so when the user taps a palette square, it sets the current colour to the palette's colour.

  3. Put a small button under each palette square with an “X”. If the user taps the “X”, remove that palette square.

    Or, if you decide to be fancy, draw a small box with an “X” in the lower right corner of the palette square. When the user taps within that “X box ”, remove that palette square.

    • Do not leave a “hole” when a palette box is deleted.

  4. Make it so the palette squares are “remembered” — that is, if the browser returns later, the palette from last time should be displayed.

    You can use cookies for this.

You may make changes to the content of the HTML, JS, and CSS files that you inherited from Parke's Colour Picker.

Note that canvas is HTML5. Not all the kinks have been ironed out yet. A canvas requires a width and height for now, like with an img. These cannot be set by CSS style alone.

 
  2. Steal the Data

A hacker friend of yours was able to lift a copy of the CGI code called sisLookup. It is a simple CGI that lets an HTML form look up a student entry from the SIS database either by surname or id.

  1. The CGI code is odd. It is written in bizarre Perl. But you can tell, it is sketchy. Grôk what it is up to.

  2. Write a simple HTML form page with fill-in fields surname and id. Point the form at the live CGI at

    www.cse.yorku.ca/~godfrey/course/2041/cgi/sisLookup.cgi
  3. Get that working.

  4. You are interested to exploit this script, for fun and for profit. Figure out a way to make the CGI give you back the whole SIS table!

 
  Lab Report

Leave your webapp for your palette picker live. Email godfrey@cse.yorku.ca the URL to your webapp.

For the e-mail's subject, say

cse-2041 / lab #6 / cseXXXXX

where cseXXXXX is your CSE account name.