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

Saving your work

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

The assignment

Create a page that uses Javascript to adjust font characteristics live.

1. create the HTML of your page, including:
• a header
• buttons
• text inputs
• a table to contain it all
• a div to use for output
2. give things IDs so they can be accessed
3. add onclick and onchange Javascript triggers
4. add functions to change the styles of your text example

For example

Please enter the text to be styled:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consequat feugiat ante quis tempor. Proin malesuada augue eget metus lacinia, id accumsan risus rutrum. Donec sodales velit et est fringilla venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla quis egestas nunc. Donec volutpat enim in elementum scelerisque. Pellentesque et sem quis nulla imperdiet ornare. Integer id iaculis mi. Quisque tincidunt porttitor dui, sit amet rutrum ligula placerat vitae. Morbi laoreet risus quam, a gravida est rutrum vitae.
Update the text