Project 3.1  Style Builder 

Index Code Tester

OBJECTIVE

DISCUSSION

Your objective is to create a web page (or set of pages) that will enable a user to select style properties, assign values, and generate the style code.  You should include the different properties listed in the lessons in Web101: background, font, text, borders, margin, padding, lists, and positioning. 
You will need to use Java Script.  Use the following file as a starting point.  It provides the Java Script that you will need.
StyleBuilder Starter File
StyleBuilder Starter File 2 ... Much simplified
StyleBuilder Starter File ... Most Simplified

GRADING CRITERIA 

Your grade will depend on the following.

_____ /10:  Easy to use and attractive. The ease of use will be based on how easy it is to find a property, then select it, and then assign a value.  Other students will use the tool to create a fictitious style sheet.  Your grade will be based on how long it takes to create the sheet using your StyleBuilder.

_____ / 10:  Enables "custom" value entry.  The program should enable the user to enter "custom" values for all properties.

_____ / 20: Displays units for items. Some properties require/permit units for the values.  For example, some items may be "pt", "px", etc... Your web page should list these items for the relevant properties.

_____ / 20:  Has an external style sheet to specify the properties for the page.  You should define ID's for each <div> on your page to specify their locations and other relevent properties.  You should also define at least three classes for the <div>'s to specify properties for the different types of <div>'s.   For example, you will have some <div>'s for the types of properties and some <div>'s for the properties and some <div>'s for the values of the properties.

_____ / 40:  Is complete.  You will get 1 point per style item included. You must have at least three possible values for each property.  There are approximately 60 style items in 3.2, 3.3, and 3.4.