<section>
<?= head("Introduction") ?>
<p>This assignment practices much of what we’ve learned in the first half of the quarter, including:</p>
<ul>
<li>Basic CSS styling</li>
<li>Layout with CSS</li>
<li>Event handling</li>
<li>DOM querying & modification</li>
<li>DOM element creation</li>
<li>Special effects</li>
</ul>
<p>For this assignment you will design and implement a <strong>color picker</strong> to generate and preview several colors.</p>
<p><em style="font-family: 'Droid Sans'; font-style: normal; color: red">You may work by yourself or with at most one other person. If you choose to partner with another student, they may be from another section.</em></p>
<p>You will turn in <strong>at least</strong> the following files:</p>
<style type="text/css">
dl.filelist {
/* margin-left: 1em; */
overflow: hidden;
}
dl.filelist dt {
float: left;
clear: left;
height: 1.4em;
}
dl.filelist dd {
margin-left: 11em;
height: 2.8em; /* line height (1.4) × 2 */
line-height: 2.8em;
/* background-color: fuchsia;*/
margin-bottom: .5em;
position: relative;
white-space: nowrap;
}
dl.filelist dd:before {
display: block;
position: absolute;
content: '}';
/* width: .25em;*/
left: -.5em;
top: -.1em;
font-size: 2.6em;
line-height: 1em;
/* background-color: fuchsia;*/
font-family: 'Open Sans', sans-serif;
font-weight: 100;
}
dl.filelist dd.tall {
line-height: 3.9em;
margin-bottom: 1.5em;
margin-left: 11.6666666em;
}
dl.filelist dd.tall:before {
font-size: 3.9em;
/* left: -.333333em;*/
}
</style>
<dl class="filelist">
<dt><samp>colorpicker.html</samp></dt>
<dt><samp>colorpicker.css</samp></dt>
<dt><samp>colorpicker.js</samp></dt>
<dd class="tall">The HTML, CSS, and JavaScript code for your page</dd>
</dl>
<p class="note important" style="clear: both">Your file names must match these <em>exactly</em> — with precisely the same capitalization and spacing.</p>
<p>(If you have any additional files, you’ll be able to submit them as well.)</p>
<?= subhead("Background") ?>
<p>Colors can be represented several different ways. The three most well-known <strong><a href="http://en.wikipedia.org/wiki/Color_space">color spaces</a></strong> in web and print media are:</p>
<ul>
<li><strong>RGB</strong>: Various amounts of red, green, and blue are combined to produce a particular color. (Commonly used in electronic media.)</li>
<li><strong>CMYK</strong>: Various amounts of cyan, magenta, and yellow are combined to produce a particular color. Pure black is used to represent black or shades of gray. (Commonly used in print.)</li>
<li><strong>HSL/HSV/HSB</strong>: Colors are represented by their hue (an angle) on the color wheel, a saturation of that color, and an amount of “lightness”/“brightness”/“value”.</li>
</ul>
<p>We will focus on RGB and HSV, because they’re the most commonly-used on the web. In CSS, colors can be declared several different ways:</p>
<ul>
<li><strong>RGB hexadecimal</strong>: An RGB value in hexadecimal hash-notation. Example: <span class="nonbreaking"><code class="color">#ff452b</code></span></li>
<li><strong>RGB decimal</strong>: An RGB value in “function-style” decimal notation. Example: <span class="nonbreaking"><code class="color">rgb(255, 69, 43)</code></span></li>
<li><strong>HSL</strong>: Hue, saturation, and lightness values. <span class="nonbreaking">Example: <code class="color">hsl(7, 100%, 58%)</code></span></li>
</ul>
<?= subhead("Inspirations") ?>
<p>There are numerous color pickers and color scheme designers already available on the web. We’ll explore several examples and highlight interesting or useful features of each which you may want (or be required) to incorporate into your own.</p>
<h5><a href="http://colorschemedesigner.com/">Color Scheme Designer</a> by Petr Stanicek</h5>
<p>This is an extremely fully-featured designer. Some useful features:</p>
<ul>
<li>Ability to choose how many complementary colors to generate, and the angles between them on the color wheel.</li>
<li>Automatic calculation of lighter and darker variants of each color.</li>
<li>Two example web pages which use the color scheme generated. (“Light page example,” “Dark page example” tabs)</li>
<li>Ability to adjust the scheme’s brightness/saturation and contrast. (“Adjust Scheme” tab)</li>
</ul>
<h5><a href="http://johndyer.name/lab/colorpicker/">Photoshop-like JavaScript color picker</a> by John Dyer</h5>
<p>This replicates the color picker used in Adobe Photoshop. Notable features:</p>
<ul>
<li>RGB, HSB, and hex input fields.</li>
<li>Clickable gradients.</li>
<li>Radio buttons which change which types of gradients are shown.</li>
<li>A swatch preview of the currently-selected color.</li>
</ul>
<h5><a href="http://colrd.com/create/palette/">ColRD Palette Creator</a></h5>
<p>An elegant, responsive picker for a variable number of colors. Some useful features:</p>
<ul>
<li>Variable number of color swatches. (Click the + or −. Their widths are also adjustable.)</li>
<li>HSL and RGB sliders. (Clicking one will cause the others to adjust.)</li>
<li>Elegant number inputs for all values. (Click one of the numbers to edit it! Enter a new value or use arrow keys to adjust.)</li>
<li>A list of similar swatches automatically-generated.</li>
<li>Background flashes with the new color when it is changed.</li>
</ul>
<h5><a href="http://www.colorschemer.com/online.html">ColorSchemer Online</a></h5>
<p>A simple designer with several automatically-calculated swatches. Features include:</p>
<ul>
<li>16 automatically-calculated complementary colors.</li>
<li>A swatch of the current color.</li>
<li>RGB and Hex inputs and outputs.</li>
<li>“Lighten” and “Darken” buttons.</li>
<li>Clickable swatch-gradient.</li>
</ul>
<h5><a href="http://www.colormixers.com/">ColorMatch Remix</a></h5>
<p>Many features of this tool seem to be broken, but it still contains useful ideas:</p>
<ul>
<li>Slider/text combos for RGB values.</li>
<li>A hex input, and hex/RGB outputs.</li>
<li>Several automatically-calculated swatches.</li>
<li>An example area for previewing the selected colors applied to text, backgrounds, links, etc.</li>
</ul>
<h5><a href="http://www.ficml.org/jemimap/style/color/wheel.html">4096 Color Wheel</a></h5>
<p>A dynamic tool for picking several colors. Features include:</p>
<ul>
<li>Clickable color wheel and saturation square.</li>
<li>Dynamically showing color on hover.</li>
<li>Two separate lists of generated colors (to the left, and to the right if “show full list” is clicked).</li>
<li>Hexadecimal input and output.</li>
</ul>
<p>Note: This tool calculates now outdated “web-safe” and “web-smart” variants. These variants are no longer useful on today’s computers.</p>
<h5><a href="http://pourpre.com/colordb/?l=eng">colordb</a></h5>
<p>A complex tool with memory, variations, harmonies, and many different outputs. Some interesting features are:</p>
<ul>
<li>Variations with variable “step” created by combining with different colors.</li>
<li>Many different types of harmonies generated.</li>
<li>Clickable color wheel and saturation square.</li>
<li>Many different types of output, including Hex, RGB, HSL, CMYK, and some variants of these.</li>
<li>A “memory” of several colors.</li>
<li>A preview pane where the selected colors can be viewed on text, background colors, and images.</li>
</ul>
</section>
<section>
<?= head("Your Color Picker") ?>
<p>For this project you will design and implement a color picker with the following features:</p>
<ol>
<li>Allow the user to enter the color in at least two different ways (Hex, RGB, HSL).</li>
<li>Output at least two different number values for each color (Hex, RGB, HSL).</li>
<li>Calculate and display swatches for at least <strong>three</strong> additional colors (i.e., four total) which harmonize with the entered color. These can be lighter/darker variants, colors at various angles around the color circle, etc.</li>
<li>Display a web page–style “preview” with headers, lists, paragraphs, links, images, and filler text which use the generated colors in various ways — on their backgrounds, text color, borders, etc.</li>
</ol>
<p>You are given considerable freedom for this project: there is no expected output, and there are no requirements other than that it include the above four features.</p>
<p>There are a wide range of possibilities for the design of each feature, some of which are very easy to implement and some of which are extremely difficult.</p>
<p>In particular, the method of input can be quite simple or very sophisticated. The easiest way to accept input is with a few text boxes and a “generate” button. An extremely difficult input method would use complex clickable gradients — which we haven’t learned any techniques for implementing yet.</p>
<p>You’re welcome to make your tool as sophisticated as you like. However, we’d recommend starting very simple with your design, and adding fancier features only if you have time.</p>
<?= subhead("Layout, Aesthetics, and Interaction Design") ?>
<p>For this project, considerably more emphasis will be placed on aesthetics and design than in your homework assignments. Your layout and design should be clean and elegant, and you should put considerable effort into the appearance and interactivity of your page.</p>
<p>In fact, your color picker’s appearance and elegance are more important than its sophistication: You should spend a significant amount of time polishing the look & feel and interactivity of your page. It is far better to have a simple page that looks and works beautifully than an ugly, buggy page with sophisticated widgets.</p>
<p>If you are not comfortable with your design skills, consider partnering with someone who is. This project is a good opportunity for two people with complementary skills to collaborate.</p>
<p>While it’s difficult to provide concrete aesthetic requirements, here are a few simple guidelines to follow:</p>
<ul>
<li>Use a clean, simple, elegant typeface and colors that aren’t distracting.</li>
<li>Make optimal use of screen space by arranging things with usage patterns in mind.</li>
<li>A successful design is one which assists the user by getting out of the way.</li>
</ul>
<p><strong style="color: red">We will devote some lecture time to showing off designs we consider exemplary. Consider this a portfolio piece!</strong></p>
</section>
<section>
<?= head("Calculating Colors") ?>
<p>Because calculating color variants involves a lot of math, we are providing you with a Color class we’ve developed that will perform these calculations for you:</p>
<p class="resource"><a href="Color.js">Color.js</a></p>
<p>Include this file in your HTML, before you include your own scripts file. To use this class, begin by creating a new Color object:</p>
<pre><code>var foo = new Color();</code></pre>
<p>This color object has several methods and properties:</p>
<dl>
<dt><code>.setRGB(<var>r</var>, <var>g</var>, <var>b</var>)</code></dt>
<dd>Initializes the color based on the given R, G, and B values.</dd>
<dt><code>.setHSL(<var>h</var>, <var>s</var>, <var>l</var>)</code></dt>
<dd>Initializes the color based on the given hue, saturation, and brightness values.</dd>
<dt><code>.setHex(<var>hex string</var>)</code></dt>
<dd>Initializes the color based on the given Hex string.</dd>
<dt><code>.r</code>, <code>.g</code>, <code>.b</code></dt>
<dd>The red, green, and blue components of this color.</dd>
<dt><code>.h</code>, <code>.s</code>, <code>.l</code></dt>
<dd>The hue, saturation, and lightness of this color.</dd>
<dt><code>.hex</code></dt>
<dd>This color represented in hash-hexadecimal RGB notation.</dd>
</dl>
<p>In the following example, we define three different Color objects, in three different ways, which all happen to represent the same color:</p>
<pre><code>var a = new Color();
a.setRGB(255, 69, 43);
var b = new Color();
b.setHSL(7, 100, 58);
var c = new Color();
c.setHex('#ff452b');</code></pre>
<p>Once we’ve defined a color, we can inspect its properties to get its equivalents in other color spaces:</p>
<pre><code>console.log("In HSL color space, color a is: " +
"hsl(" + a.h + ", " + a.s + ", " + a.l + ").");
// "In HSL color space, color a is: hsl(7, 100, 58)"
$('#foo').css('background-color', b.hex);
// sets #foo's background color to '#ff452b'</code></pre>
<p>Unless you really want to calculate colors yourself (which we wouldn’t recommend), you should make use of our Color class to do calculations for you.</p>
<?= subhead("Calculating Variants") ?>
<p>Our provided Color class makes it easy to calculate variants of a particular color. For example, if you want a lighter or darker variant of a color, all you need to do is increase its lightness or darkness:</p>
<pre><code>a.setHSL(a.h, a.s, a.l + (100 - a.l) / 2);</code></pre>
<p>This example increases a’s lightness to halfway between its previous value (58%) and 100%.</p>
<p>You can also add more of a particular chroma to the color:</p>
<pre><code>b.setRGB(b.r, b.g, b.b + (255 - b.b) / 4);</code></pre>
<p>This example increases the amount of blue in b by one quarter of the amount possible.</p>
<p>Using HSL notation also makes it easy to calculate colors at other points around the color wheel:</p>
<pre><code>c.setHSL(c.h + 180, c.s, c.l);</code></pre>
<p>This example changes c to be its <strong>direct complement</strong> — the color directly opposite it on the color wheel.</p>
<?= subhead("Color Harmonies") ?>
<p>The most pleasing color combinations are not arbitrary choices — they are carefully selected to be mathematically related in some way.</p>
<p>Color theory states that choosing colors at certain angles to one another on the color wheel, and lighter and darker variants of those colors, is a good way of choosing colors which harmonize with one another.</p>
<p>There are several resources on the web which describe color harmonies. Here are a couple we recommend reviewing:</p>
<ul>
<li><a href="http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm">http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm</a></li>
<li><a href="http://www.colormatters.com/color-and-design/basic-color-theory">http://www.colormatters.com/color-and-design/basic-color-theory</a></li>
</ul>
<p>We recommend picking harmonizing colors at least in part by basing them on <strong>analogous</strong>, <strong>complementary</strong>, <strong>diad</strong>, <strong>tetrad</strong>, or any of the other major color wheel relationships.</p>
<?= subhead("Tints, Shades, and Tones") ?>
<p>A color can also be modified within the same hue. There are three ways in which colors can be adjusted monochromatically:</p>
<ol>
<li><strong>Tints</strong> are whiter variants of a color. To get a tint, increase the lightness.</li>
<li><strong>Shades</strong> are blacker variants of a color. To get a shade, decrease the lightness.</li>
<li><strong>Tones</strong> are grayer variants of a color. To get a tone, decrease the saturation.</li>
</ol>
</section>
<!-- <section>
<h3>Development Strategy</h3>
<p>We recommend taking the following steps to tackle this assignment:</p>
<ol>
<li><p>First, create a plain HTML+CSS mockup of how the page will look.</p>
<ul>
<li>Add the fields for entering the RGB and HSL values (R + G + B + H + S + L = six fields total).</li>
<li>Add the swatches (primary + light + dark + complementary + light + dark = six swatches total), and give them a size, shape, and layout. (Consider using absolute positioning or floating to lay these out on the page.)</li>
<li>Add an area (<code>div</code>) for the mini-page, and put HTML inside it to satisfy one of the two mini-page snippets.</li>
</ul>
</li>
<li><p>Second, complete Part A. Attach your event handlers to the text fields to determine when the contents of the fields change (the <code>change</code> event), and update the swatches when that happens.</p>
<ol>
<li>Begin by doing something simple like getting the contents of the fields and <code>alert</code>ing them.</li>
<li>Then create a <code>Color</code> object for the new primary color.</li>
<li>Use the new <code>Color</code> object’s properties (for example, its <code>.hex</code> property) to update the background color of the primary color swatch.</li>
<li>Create new <code>Color</code> objects for light and dark variants of the primary color, and use these to update the light and dark swatches for the primary color.</li>
<li>Do the same for the complementary color: create a <code>Color</code> object for it, create light/dark variant <code>Color</code>s, and use them to update the appropriate swatches.</li>
</ol>
</li>
<li><p>Finally, complete Part B. Change the mini-page area to be populated by an Ajax request, and add the ability to switch between your two snippets.</p>
<ul>
<li>First take the HTML code from the mini-page area in your mockup, and put it in a file called <samp>snippet-a.html</samp>. This will be your first snippet.</li>
<li>Build your second HTML snippet inside the mini-page area. When you’re satisfied with it, move it to a file called <samp>snippet-b.html</samp>.</li>
<li>Now, make your page load one of the two snippets (say, <samp>snippet-a.html</samp>) via an Ajax request when the page has finished loading, and inject the HTML returned into your mini-page area.</li>
<li>Then add the ability to switch between the two snippets, by adding two elements (radio buttons, push buttons, <code>select</code> dropdown, etc.) that, when clicked or selected, will load either <samp>snippet-a.html</samp> or <samp>snippet-b.html</samp> via an Ajax request.</li>
<li>Now, go through your snippet HTML files and add the appropriate <code>class</code>es to indicate which properties (foreground, background, or border color) should be set on which elements, and what color it should be set to.</li>
<li>Make your page change all the colors of the appropriate elements in your snippet using the <code>colorAllElements</code> function whenever the color values get changed.</li>
</ul>
</li>
</ol>
</section> -->
<section>
<?= head("Stylistic Considerations") ?>
<p>As with homework assignments, you will be graded in part on certain choices you make in writing the code for your pages. Keep the following in mind:</p>
<ul>
<li>
<p><strong>Make good tag choices.</strong> Use the most appropriate HTML tags available to describe each piece of content. Be careful not to choose tags based on the appearance you want the content to have; rather, choose tags based on how well they describe the content or structure of the page. You can always use CSS to alter the appearance if it isn’t right.</p>
</li>
<li><strong>Reduce redundancy.</strong> Sometimes you may have styles that are shared by multiple elements. Whenever it makes your code more logically-structured, you should combine redundant style declarations into a single rule.</li>
<li><strong>Properly format your code.</strong> Use consistent indentation that makes the structure of your code easy to follow. In general, you should usually indent inside block-level elements in your HTML, and in your CSS code you should indent consistently inside curly braces. Wrap comments to no more than 100 characters on a line. Don’t worry about wrapping long HTML opening tags, but you may want to indent the content inside an element if its opening tag is long — even if it’s an inline element. (<strong>Never</strong> add a line break inside of a URL!)</li>
<li>
<p><strong>Include proper comments.</strong> All files submitted should begin with an authorship comment with information to identify the work: the course, date, assignment, your name and section, and a brief description to the file are all standard things to include.</p>
<p class="important note">
<strong>Remember to use the right comment syntax!</strong><br/>
HTML comments look <code><!-- like this ---></code>, CSS comments look <code>/* like this */</code>, and JavaScript comments can be either <code>/* like this */</code> or <code>// like this</code>.
</p>
<p>These should be at the top of <strong>every file</strong>.</p>
<p>You don’t need to comment on sections of your HTML or CSS code — however, in your JavaScript code you are required to comment on function behavior (parameters, return value, purpose) as well as “milestones” at significant passages of your JavaScript code, as you did in CSE 142.</p>
</li>
<li><strong>Validate your code.</strong> For full credit, your code should pass the W3C validators with no errors. (Yellow warnings can safely be ignored.) Write valid XHTML 1.1 or HTML5 and CSS 2.1 or CSS 3 code.</li>
</ul>
</section>
<section>
<?= head("Grading") ?>
<p>As stated on the course syllabus, this mini-project will be worth 10% of your final course grade.</p>
<p>The point breakdown for this assignment will be roughly as follows:</p>
<style type="text/css">
dl.breakdown {
margin-left: 1em;
}
dl.breakdown dt {
float: left;
clear: left;
width: 6em;
}
dl.breakdown dd {
margin-left: 6em;
margin-bottom: .5em;
width: 11em;
}
dl.breakdown .total {
border-top: solid 4px black;
font-weight: bold;
padding-top: .5em;
}
</style>
<dl class="breakdown">
<dt>~ 4 points</dt>
<dd>HTML code</dd>
<dt>~ 12 points</dt>
<dd>JavaScript code</dd>
<dt>~ 8 points</dt>
<dd>Appearance, layout, aesthetics, and interaction design</dd>
<dt>~ 6 points</dt>
<dd>Stylistic and other considerations</dd>
<dt class="total">30 points</dt>
<dd class="total">Total</dd>
</dl>
<p><small style="font-style: italic; font-family: 'Open Sans'">The exact point value for each category is subject to change ± 2 points.</small></p>
</section>
<section>
<?= head("Submitting Your Project") ?>
<p>When you are finished with your assignment you are required to do <strong>both</strong> of the following:</p>
<ol>
<li>
<p><strong>Upload your files to the course web server.</strong> Put them in a folder named <em>exactly</em> <samp>mini-project</samp> inside your <samp>public_html</samp> web directory on our web server (<samp>info343.ischool.uw.edu</samp>).</p>
<p class="important note">The folder you put your homework files in must match this exactly — including capitalization and spacing! You may lose points if your files are not named <em>exactly</em> as specified in this document.</p>
</li>
<li><p><strong>Submit your assignment via the drop box</strong> on the course website.</p></li>
</ol>
<p>You must do <strong>both</strong> of these to get full credit. You may submit your assignment as many times as you like; only the last submission will count. Please remember to upload to the web server <strong>exactly</strong> the same version that you submit to the drop box.</p>
<p class="note"><em style="font-family: 'Droid Sans'; font-style: normal; color: red">If you worked with a partner, choose <strong>one</strong> team member to submit the assignment. Ensure both partners are named in the file header comments.</em></p>
<p>This assignment will not be accepted by any other means of submission without permission by the instructor or a TA.</p>
</section>
<!-- <section>
<h3>Extra Credit Features</h3>
<p>Each of the following is worth <strong>one (1) point</strong> of extra credit <strong>to be applied to this assignment only</strong> (i.e., only to make up for lost points elsewhere on this assignment):</p>
<ul>
<li>
<p><strong>Dynamic Contrasting Colors.</strong> It’s possible to create a color which doesn’t contrast enough with what’s around it to see that it’s there. For example, if you generate a white swatch, and the background of the page is white, the swatch will be indistinguishable.</p>
<p>Likewise, if you generate a black swatch and you’re displaying the hex code in black text inside of it, the hex code tex is indistinguishable from the swatch.</p>
<p>For this extra credit point, add whatever is necessary (e.g., a border color, text color, background color, etc.) and dynamically adjust it to make sure all colors are always distinguishable.</p>
<p>The easiest way of doing this is by choosing hue and lightness values that are as different as possible from those of the swatch. Be sure your solution works for both colors and shades of gray (including black and white).</p>
</li>
<li>
<p><strong>Validation.</strong> It’s possible to enter invalid values in the text fields. Add some sort of validation feature, so that invalid values are corrected, reverted, or ignored. Do this for every field you accept input from, and ensure that all values given to your Color objects are as follows:</p>
<dl>
<dt>setHSL():</dt>
<dd>Hue: 0–359</dd>
<dd>Saturation: 0–100</dd>
<dd>Lightness: 0–100</dd>
<dt>setRGB():</dt>
<dd>Red: 0–255</dd>
<dd>Green: 0–255</dd>
<dd>Blue: 0–255</dd>
<dt>setHex(): (if used)</dt>
<dd>any valid 6-digit hexadecimal number (digits 0–9, letters a–f in upper or lowercase), optionally prefixed with a ‘<code>#</code>’.</dd>
</dl>
</li>
<li>
<p><strong>Preset Colors.</strong> Add the ability to click on preset primary colors. Be sure you calculate all colors and populate all RGB/HSL values as usual.</p>
</li>
<li>
<p><strong>Preset Adjustments.</strong> Add buttons to make uniform adjustments to the primary color — for example, making it lighter or darker, more or less saturated, etc. Be sure you calculate all colors and populate all RGB/HSL values as usual.</p>
</li>
<li>
<p><strong>Gradient Bars.</strong> Use the tentative CSS3 <code>-*-linear-gradient</code> property to create a gradient for each value indicating the position of that value on a spectrum.</p>
</li>
</ul>
<p>If you have other ideas for extra credit, email Morgan and your idea may be approved.</p>
<p>You can do as many of these as you like, but you won’t receive any more than 100% credit for this assignment, so extra credit points here can’t apply to lost points on other assignments.</p>
</section> -->