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!
Your lucky number is 23.
Your lucky letter is Q.
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.
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.
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.
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.
Hints: Since there is no built-inrandomLetter()
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 thecharAt()
function to retrieve a character at a particular position. Note that character positions within a string are numbered starting from 0, so the expressionalphabet.charAt(0)
will return "A" andalphabet.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 useMath.floor
orMath.ceil
?
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 thelength
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.
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!Each time the user clicks the button to generate lucky values, the lucky selections should be different.
Your lucky number is 23.
Your lucky letter is Q.
Your lucky word is NUB. (Only if you completed the Lucky Word exercise.)
If you wish, you may also enhance the look of your page by setting the background color, adding an image, changing font types, or anything else you think will improve the graphical look of your page.
Before publishing your page to the web server for the last time, make sure it has the following information:
comp105.kzoo.edu
server.
Test that the link to the mini-lab works on the server by clicking
on it from your home page there.
(Make sure that your browser is looking at the page on
comp105.kzoo.edu
, not your local version.)