|
|
Absolutely Obnoxious Diner
Creating a Menu With and Without Frames
You have been asked by a gourmet restaurant that caters to people with the squeamish of taste to create a web page menu showcasing their food. They want to list the food in three categories:
You will create the menu using the links below in Notepad using the appropriate HTML format. Each category should include at least 5 items for each. You will also provide a description of the dish, along with the price of each item. You will also create a a separate link for each category (that will be displayed on a separate Web page) in order to provide the recipes for each dish. There will be three separate URL links, one for each of the above categories. At the end of this activity, you will insert a JavaScript that will display the special for each day, along with its description. First you will create a Web page that does not use the frames format, then you will create a second one using the frames format you used in Haunted Hideaways and Happenings. To see what my pages turned out, click on the two links below:
For purposes of this activity you will come up with the obnoxious foods represented on the menu. Use the following Web sites to find the foods you will use for this activity. The yuckier, the better!!!
The last part of this activity is to create the JavaScript that will display the days special. It will display a different dish for each day of the week. The daily specials will be decided by you using the links above. Insert the following just above the </HEAD> tag in your heading:
<SCRIPT LANGUAGE="JavaScript">
<!---Hide from non-JavaScript browsers
//This function tells the dish name with day of the week
function DishName (Day) {
var DName = new Array();
DName[0]="Sunday's Dish Name";
DName[1]="Monday's Dish Name";
DName[2]="Tuesday's Dish Name";
DName[3]="Wednesday's Dish Name";
DName[4]="Thursday's Dish Name";
DName[5]="Friday's Dish Name";
DName[6]="Saturday's Dish Name";
var IndexNumber = Day;
var food = DName [Day];
return food;
}
function DishDesc (Day) {
var DDesc = new Array();
DDesc[0]="Sunday's Dish Description";
DDesc[1]="Monday's Dish Description";
DDesc[2]="Tuesday's Dish Description";
DDesc[3]="Wednesday's Dish Description";
DDesc[4]="Thursday's Dish Description";
DDesc[5]="Friday's Dish Description";
DDesc[6]="Saturday's Dish Description";
var IndexNumber = Day;
var list = DDesc [Day];
return list;
return DDesc[Day];
}
//Stop hiding-->
</SCRIPT>
Replace "Dish Name" with the name of your daily special and "Dish Description" with the dishes description.
Place the following JavaScript between the <BODY> and </BODY> tags where you want the specials to be displayed. Remember, when you use the document.write command, it is telling the program to display text here:
<SCRIPT LANGUAGE="JavaScript">
<!--- Hide from non-JavaScript browsers
var Today = new Date();
var ThisDay = Today.getDay();
var WeekDay = Today.getDay();
var spec = DishName (Weekday);
document.write(spec + "<BR>");
var description = DishDesc (Weekday);
document.write(description);
//Stop hiding-->
</SCRIPT>
Save your work in Notepad as an html file, then load it in your browser to see how both Web pages appear. Both pages should display the same items but one menu uses frames while the other is in a nonframes format.
Wow!!!! You are getting closer to becoming a Web Wizard. Keep up the good work!!!