Resources

• //INPUT: Buttons
• //INPUT: Text


• //INIT: Using variables


• //PROCESS: Basic math


• //OUTPUT: alert(), .innerHTML, and console.log()
• //OUTPUT: Changing text styles
• //OUTPUT: Changing an element's position


• //STYLE: Use cut and paste where possible
• //STYLE: Space out mathematical expressions

Evaluation

• ___/10 HTML-CSS: including ANY TEN of the following:
  1. a span
  2. a heading
  3. a table
  4. a div for output
  5. a list
  6. a descriptive paragraph
     
     The following must be inside <style>:
     
     
  7. applying a style to a tag
  8. applying a style to an #ID or .class
  9. applying a color, opacity, or background color
  10. applying a border
  11. applying a font size
  12. applying the font family, style, or weight
  13. applying a width
  14. applying text-align or vertical-align
  15. applying a position
  16. applying a top measurement
  17. applying a left measurement
  18. applying a display style
  19. applying margin-left or margin-right
• ___/10 INPUT: including ANY FOUR of:
  1. a text area box
  2. an input line
  3. buttons
  4. things that work with document.getElementById().onclick
  5. things that work with document.getElementById().onchange
• ___/10 PROCESS: including:
  1. successfully reading a text input
  2. assigning a variable
  3. using basic math (font-size, probably)
  4. using parseInt() or parseFloat()
• ___/10 OUTPUT: including ANY FOUR of:
  1. changing the color or background using Javascript
  2. changing the weight or style of a font using Javascript
  3. changing the size of a font using Javascript
  4. changing the top or left position of something using Javascript
  5. changing the border or width of something using Javascript
  6. output using .innerHTML
• ___/10 STYLE:
  1. add your name to the filename
  2. write your name as the author
  3. update the change log
  4. correctly indent everything
  5. use lowercase for all your HTML tags
  6. use camelCase for all your ids and classes
  7. avoid lines greater than 96 characters in length
  8. restrict your style code to the head of your HTML file
  9. space out your mathematical operators
  10. write comments for your if statements
  11. use descriptive variable names

The assignment

1. Use onclick and Javascript style manipulation to create a simple clicking game

Saving your work

Use Save as... to save the empty template as "2.05H-CakeyClicker-LastName.html" in your Computer Programming 12 directory.

An example