|
- Setup a webpage with a Button and a Label. When the button is clicked, have it run a function called makeGrid() (or another name) which prints out 50 "A"s in the Label.
- Change makeGrid() to print the 50 "A"s in a grid, with 10 chars per row. (use theOutput += "<br>")
- Add two Input fields above the button, that ask for totalNumCharacters and charsPerRow.
Change makeGrid to print totalNumCharacters "A"s instead of 50 . And to break each line after charsPerRow "A"s, instead of 10.
Test this and make sure it works before moving on.
- In your HTML section, add a pulldown to ask the user for a Grid Style. Use a <select> tag and three options:
<select id= "gridStyle">
<option value= "asOnly">All As</option>
<option value="allChars">Show all Characters</option>
<option value="randomEnglish">Random Ennglish</option>
</select>
- In your makeGrid() function, use an if-then switch to print different versions of the grid, based on what the user selected in the pulldown, as in:
if (gridStyle === "asOnly") {
//do asOnly
} elseif (gridStye === "allChars") {
//do allChars
} elseif (gridStye === "randomEnglish") {
etc...
- Write the AllChars grid style, where you show sequential characters, starting with A.
Note:
String.fromCharCode(65); will display "A"
String.fromCharCode(66); will display "B"
- Change AllChars to print the code number and then the character on each line, as in:
65) A
66) B
67) C
etc.
Pick a big number for chars to display, like 5,000, and you'll see different character sets you can play with.
- Write a new function to return a random number up to X. something like:
function randomNumber(max) {
// return a random number using math.Random() between 0 and max
}
Test it by outputting a list of random numbers on the page.
- Modify randomNumber to return a number between min and max, as in randomNumber(min, max)
- Write the randomEnglish grid Style where you show a random character between A and Z
Note: the code for "Z" is 91.
- Look at the AllChars list to see where character sets begin and end.
Create other gridStyles such as:
* Alphabet Repeat - repeat the alphabet, just a-z, as often as needed
* Random Hebrew - random letters from the hebrew alphabet.
* Random Greek - random letters from the Greek alphabet.
* Your own interesting variation.
- Add a checkbox that, if checked, assigns a different random color to each letter
Have fun and good luck!
|
|
