# Mini-Lab: This is Your Lucky Day!

## Introduction

You have probably seen coin-operated scales that offer to tell you your weight and lucky number for 25 cents. Most people would not pay 25 cents to weigh themselves, but who can pass up a chance to learn their lucky number? In this lab, you will create a web page that will provide visitors with a lucky number and a lucky letter, similar to the following:

Welcome to this lucky page!

You will be using many of the same techniques as in the Mad Libs and Calculator mini-labs, and you can look at them if you want to remember how to create a button, define a function, or add output to an HTML element. You can also copy, paste, and modify code snippets if you wish.

If your code isn't working as expected, try opening up Firefox's error console to check for (potentially) helpful error messages. If you get stuck, don't hesitate to ask the instructor or a teaching assistant for help.

## Exercises:

### Lucky Number:

• Copy the COMP 105 web page template to your workspace. Add a title and a welcome message to the page, save it, and upload it to the server (remember that the host name for uploading is `peopleftp.kzoo.edu`). View it in a web browser such as Firefox to check your work.

This follows the development practice of always having working code: start with something very small (but that works), and continue by adding very small, incremental changes, testing all along the way.

• Add a button in the BODY of your page that calls a function in the HEAD that will (when you're done) generate lucky values. Add an empty `div` or paragraph (`p`) in the BODY where you will write your output. In your function, generate some output (any output to start with) and print it to your empty HTML element.
• In your function, generate a random "lucky number" between 1 and 100, using the the `Math.random()` function and `Math.ceil()` functions. (Go back and re-read the write-up on JavaScript Math Functions if you have questions about how to use these functions.) Display your random number in your output HTML element rather than the arbitrary (but not really random) output you generated originally. Test your new code.
• Modify your function to provide some context and formatting around the lucky number, and test it again.

### Lucky Letter:

• Add JavaScript code that randomly selects a lucky letter and displays it to the user.
Hints: Since there is no built-in `randomLetter()` function, you will need to find another way to select a random letter. One possibility is to create a string variable that contains all of the letters in the alphabet:
```    var alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
```
Then use the `charAt()` function to retrieve a character at a particular position. Note that character positions within a string are numbered starting from 0, so the expression ` alphabet.charAt(0) ` will return "A" and ` alphabet.charAt(25) ` will return 'Z'. You can randomly choose a character by randomly choosing a position from 0 - 25 in the string, and then choosing that character.
Stop and Think: If you want to randomly choose a number between 0 and 25 (inclusive), do you want to use `Math.floor` or `Math.ceil`?
• Lucky Letter Improvement: The example above contains "hard-coded" numbers — 0 and 25 — and possibly your code does as well. In programming, we refer to the use of hard-coded numbers of this sort as "magic numbers", and it is considered bad programming practice. Here is an example to give you an idea of why:
```var someString = "hello";
//get the last letter in the string:
var lastLetter = someString.charAt(4);  //returns the letter "o"
```
This code works fine, but what happens if we end up changing "hello" to "hi"?
```var someString = "hi";
//get the last letter in the string:
var lastLetter = someString.charAt(4);  //Error! Forgot to change the magic number!
```
In this case, the solution is to use the `length` property of the string:
```var someString = "hi";
//get the last letter in the string:
var lastLetter = someString.charAt(someString.length - 1);  //returns "i"
```

This version of the code will always return the last letter, regardless of the length of the string.

Stop and Think: Why is it necessary to subtract one from the length when getting the last character in a string?
If you made use of any magic numbers in the previous exercise, fix your code to use the `length` property of the string instead. Test your solution to make sure that it still works.

### Lucky Word (if you have time):

• For the final exercise, add JavaScript code that generates a random three-letter word. This can be accomplished by randomly selecting a consonant, randomly selecting a vowel, randomly selecting a second consonant, and then concatenating the three letters using the "+" operator. The result may not be a real word, but it should at least be word-like.

### Polish & Publish your program:

• Polish: Once you have completed the previous exercises, visitors to your page should see a nicely formatted message along the lines of the following:

Welcome to this lucky page!
• Upload both your modified COMP 105 web page and your page for this mini-lab to the `people.kzoo.edu` server (remember that its host name for uploading is `peopleftp.kzoo.edu`). Test that the link to the mini-lab works on the server by clicking on it from your home page.