CIT041J Index > Assignment: Styles & Cookies

CIT041J - Assignment: Styles & Cookies

Read everything before doing anything.

Here is a set of several pages, all linked together, that describe some of the CIT courses at Evergreen Valley College.

If you look at the preferences file (the last link in the small menu box at the left), you will see a form that lets you change the way the page is displayed.

The menu can float to the left or the right
You can choose a background color from a drop-down menu.
The headline at the top of the page can be left-justified, centered, or right-justified
You may select a border style and width.

Your job is to make the preference page active; when users click the buttons and menus, the display will change. (Or, you can wait and make all the changes at one time when the user clicks the “Make Changes” button—whichever way you think is easier to code.)

Further, the user’s choice must be stored in cookies, so that when the user clicks to go to another page, it will be displayed the same way. These cookies must expire six months in the future.

Also: when you go to the preferences page, it must reflect the current choices. For example, let’s say you have set a light yellow background, a centered headline with a 10 pixel double border, and the menu floating at the right, as in shown in the following illustration:

CIT 040 page

When you go to the preferences page, the form should be filled in properly, as shown in the following illustration:

Preferences page

How to Begin

Download a zip file containing the original files. Do not go to the example pages and do a “Save Page...” from your browser, and do not type all the pages by hand. Use the contents of the zip file as your starting point!

You will notice that all the files include two JavaScript files: cookieutils.js and styleutils.js.

The `cookieutils.js` file

The getAllCookieValues( ) function returns an associative arrays where the index is the cookie name and the content of the array is the cookie value. You might use it in code like this:

var allCookies = getAllCookievalues();
var userCity = allCookies["city"];

The getCookieValue( ) takes one argument: the name of the cookie whose value you want. The function will return the null value if there is no cookie with the name you specified. You might use it in code like this:

var userCity = getCookieValue( "city" );
if (userCity == null)
{
   alert("No city found.");
}

The `styleutils.js` file

This is where your code will go. This code will set the document’s background color, the banner’s alignment and border, and the menu’s position from information in the cookie. If there’s no cookie yet, you must set appropriate default values.

Requirements and Hints

Give a lot of thought to what you want to store in the cookies, and how you want it stored.
Requirement: You may set no more than two cookies for each style item that the user can modify; that is, you cannot set three cookies to hold the information for the banner alignment.
Please, please, do not try to pack all the information about the user’s choices into a single cookie unless you really know what you are doing. Done without extremely careful planning, a “single-cookie” approach will lead to overly complicated code at best and a complete mess at worst.
The code in styleutils.js that sets the style attributes on each page should be in a function which is best called from an onload event in the <body> element. You wouldn’t want to set the menu’s position before the browser even tried to display it, would you?
You will need additional JavaScript code in prefs.html to handle the form maniuplation. Do not put it into styleutils.js; it’s not necessary on any of the other pages!
Use Mozilla to test your program, because:
1. It has a decent debugger.
2. You can individually delete cookies if you need to start all over again. (And you probably will.)

Clearing a Cookie

Use the setCookie() utility in cookieutils.js. If you set the expiration date in the past, the cookie is cleared. Thus, to clear a cookie named city:

setCookie( "city", 0, -1, null);

A Note About Float

You can’t say obj.style.float, because float is a reserved word in JavaScript. Instead, you must use obj.style.cssFloat for Mozilla and obj.style.styleFloat for Internet Explorer. Just set both of them; it won't produce error messages in either browser.

If you are using Mozilla on the computers in the lab, you will have to choose the Edit/Preferences menu, then click the arrow next to the “Privacy and Security” arrow and choose “Cookies.” The default is set to “Enable cookies based on privacy settings,” which will not let your HTML file set any cookies. Click the “Enable all cookies” radio button and you’ll be fine.

Hints and Pseudocode

`cookieutils.js`

This file has functions that let you set and get cookie information. You don’t need to add anything to this file.

`styleutils.js`

This code should make calls to get cookie information, using functions from cookieutils.js. You just call those functions, you don’t copy them into this file. Here is some pseudocode which you might put in styleutils.js:

/*
    Presume that the cookie for setting background color
    is named "backColor", and the cookie for setting
    border information is named "borderInfo"
*/
function setBG( )
{
    var theColor = getCookieValue( "backColor" );
    document.bgColor = theColor;
}

function setBorder( )
{
    var heading = document.getElementById( "banner" );
    var borderType = getCookieValue( "borderInfo" );
    heading.style.border = borderType;
}

// more functions to set other styles

function setAllTheInfo()
{
    setBG();
    setBorder();
    // anything else you need to do
}

The HTML files, other than prefs.html, can then all say this:

<body onload="setAllTheInfo();">

File prefs.html needs to have extra JavaScript code that reads the form information and uses it to:

set a cookie with the appropriate value
change the page right away using calls to functions in styleutils.js

this means that its <body> element will look something like this:

<body onload="setAllTheInfo(); restoreTheForm();">