Department of State Homepage State Library & Archives of Florida Services for Citizens Services for State Employees Services for Librarians Services for Archivists Services for Records Managers

Division of Library and Information Services : Services for Libraries : More Programs : Library Data and Statistics : Personal Savings Calculator : Customization

Customization of the Personal Savings Calculator


The original calculator worksheet is a downloadable spreadsheet, originally provided by the Massachusetts Library Association. (This spreadsheet requires either Microsoft Excel or the free Excel Viewer.) The spreadsheet was adapted for the Web by Chelmsford Public Library.

For more information

If You Wish to Customize

You should have some knowledge of HTML and how to read JavaScript to be sure all necessary custom changes are made and match to work. You do not need to understand all the accessibility comments, but just realize why there is some extra code and that it should be remain. Coding for accessibility ensures people using screen readers can access this calculator.

How It Works

The calculation part is a form that calls in a JavaScript with the submit button, in this case named "Calculate the Value of Your Library Use."

Beginning Code

<form action=" " method="post" name="calculator" id="calculator">

Form:  Leave as is.

Table for easier reading

<table cellspacing="0" class="narrow" id="tbstriped" summary="A JavasScript driven calculator to determine estimated retail value for a variety of library services">


class="bg" is another special custom style (external CSS file) that changes the presentation formatting to certain colors and padding in the headers and text. You could style manually, although using CSS is better.

<caption> Value of Library Services </caption> <tbody> <tr> <th>Input Your <br> Use</th> <th>Library Services</th> <th>Value of <br> Services</th> </tr>

For Accessibility: Add a summary to this data table or a caption. You do not need to use both, although you can (as done here). Header row is coded as a "header"- <th>, not just a normal row<tr>.

Form Information

Below is the first row of information in the form (words below were made bold only to see them easier here). Note the accessibility form label: <label for="books"> before "Books Borrowed" and end tag </label>

<tr> <td> <input type="text" name="books" id="books" size="5" onChange="doCalculator()" tabindex="1"> </td> <td> <label for="books">Books Borrowed</label> </td> <td> <label for="booksResult">$<input type="text" id="booksResult" size="5" value="0.00"></label> </td> </tr>


The line in the script that corresponds to the books borrowed line above:

var booksValue = document.calculator.books.value * 15.00; document.getElementById("booksResult").value = booksValue.toFixed(2);

Note: If you want to change the value, this is where you do it.

Important: If you change the name of a library service in the form itself, you must come down and change it in the script to match - three different places above if you changed the word "books".

Processing The Script

A button "Calculate the Value of Your Library Use" calls in the script, onclick="doCalculator ()". (Onclick is considered enough today for accessibility although some test tools will show failure and say redundant input mechanisms are required. Some current accessibility standards are old and are being updated.)

<tr> <td> <input type="text" name="books" id="books" size="5" onChange="doCalculator()" tabindex="1"> </td> <td class="middle"> <label for="books">Books Borrowed</label> </td> <td> <label for="booksResult">$<input type="text" id="booksResult" size="5" value="0.00"></label> </td> </tr>

Note tabindex: This attribute specifies the position of the current element in the tabbing order for the current document. Tabbing order defines the order in which elements will receive focus when navigated by the user via the keyboard. Specifying a tab index is not required for accessibility guidelines, but it can make a page more navigable for disabled users when the layout is complex, or the default tab order is unusual.

The tabindex was in the original document, so it was left in.

Accessibility: Noscript tag

At the bottom after the script tag is closed, add a noscript for accessibility for those who cannot use the JavaScript. Pointing to the Excel spreadsheet offers an alternative.

<noscript> <p>If JavaScript is not supported, use the Excel spreadsheet below to calculate your library's value.</p> </noscript>