Assignment #1 Solution

Course:




Topic:




CSCI 3230U: Web Application Development

#1

HTML, CSS, JavaScript




Note: This assignment is supposed to be completed in teams of two, but working alone is permitted. You should also avoid using a WYSIWYG editor. These restrictions are in place because the idea of this assignment is to prepare you to do well on tests and exams, which may cover these same topics.




Part 1




For the first part of this assignment, you are expected to create a simple web site, using only HTML. There is no CSS or JavaScript required or allowed for this assignment. We’ll make this assignment look much nicer in a future assignment. The general requirements are outlined below, and the specifics will be described in the text that follows.




You are expected to choose a sport or game that you like to play or watch, and create a simple website about that sport or game. Your website should provide useful information about people new to the sport/game or new to the area, in finding more about local participants. Each of the three pages should provide links to each other page.




The web site will consist of three HTML files:




 
Main Page

This page will contain information about the game or sport, including a (brief) description of its rules and a brief description of its history (however, historical accuracy is not a requirement). Use headings to separate sections of the web page appropriately (e.g. “Overview”, “Rules”, and “History”). You should also include a list of relevant pages, where someone could explore to find out more information about your sport or game.




 
Schedule

This page will use an HTML table to display a monthly calendar for some month (choose any month that has relevant events), which shows some important events in your game or sport. If you choose a sport that is not televised or played locally, you can make up some events, use events happening far away, or even use your own personal plans to play as events. The calendar should show all days of the month, using a table with 7 days per week, and each week shown as a row in the table. Include table headers to label the month, and days of the week. Also include the day of month either in the cell itself (with the events), or as a cell immediately above the events.




 
Comments

This page will be used by your users to submit comments, at a later time. For now, simply include two sample comments, followed by a form to submit a comment of your own. The form will not be functional, but should look correct otherwise. The form should include text fields for the date, author name, title, and a multi-line text area for the comment text.
Part 2




Overview




This assignment asks you to create style and layout, using CSS, for the web pages that you have created in part 1. Use figure 1 as a guide when styling the document.







Figure 1: The main page, with styling applied




Header




Each page should have a header section (using <divs), with an image (the same image from assignment #1 is acceptable) and a title. The title should be in white 24pt font, centred vertically beside the image. The background of the whole header should be a dark blue (e.g. #000070). Use the CSS class ‘pageHeader’ for this styling.




Navigation Bar




Each page should have a link to all three pages. The easiest way to do this is to include a list (e.g. <ul with one <li for each link, each containing an <a tag). This whole list will be inside its own <div tag also. Use CSS to ensure that the list items are printed without a bullet icon, and are drawn horizontally. Change the font of the links so that there is no



underline, and it uses bold, light blue (e.g. #f0f0ff) text. Use the CSS class ‘navigation’ for this styling.




Main Page and Comments Page




The original main page had three sections (Overview, Rules, and History). Now, each of these sections should be in their own window-like box. The same should be done for comments (and the comments form) in the comments page. Put each of the three sec - tions into a <div, and wrap both the header (in a div with class ‘header’) and the text (in a div with class ‘body’) in <div tags.




The header should use white text on a dark background. Use 0.2 times the height of a capital M as padding around the text inside the header, except for the left side which should use a whole capital M worth of spacing (hint: padding-left).




The body should be surrounded in a single-pixel, solid, dark blue (e.g. #000070) border. Its background colour should be a very light blue (e.g. #f0f0ff). Around all of the text should be padding equal to the size of a capital M.




Here is the tricky part. Between the header and body, there should be no vertical blank space. See figure 1 for details. The trick here is to set certain margins to zero. Careful! When using zero for a width or height value, don’t use 0px, just use 0. Browsers often ig-nore values such as 0px, but work properly for just 0.




Schedule




Modify the schedule table so that the table has a single-pixel, solid dark blue (e.g. #000070) border, instead of the default outset border. Set the width of the table to be 100% of the width of its container <div. If you have no container, 100% of the body width is also acceptable.




Note: Do not focus too much on the content for these pages. Just put anything in to fill the space. The key is to understand HTML, not to demonstrate your knowledge of Bocci ball, Go, or ultimate Frisbee.

Part 3







Overview




In this part of the assignment, you will create a simple, interactive tic tac toe game for two players playing from the same browser.




HTML




You will create a simple 3x3 HTML table for the game board, as well as a DIV for messages to the players.




CSS




The CSS will style the table so that it has borders matching a typical tic tac toe board, as shown below. You will also create a CSS class for the Xs and Os, so that they appear very large (to make it easier for people to play).







X O X







O O X







O X X




Figure 2: The game board




JavaScript




The JavaScript will control the game logic. Players will alternate turns, starting with X. You should display a message letting the users know which player’s turn it is. After each move, check if the game is done by checking for a row of the same symbol (all Xs or all Os), columns of the same symbol, or a diagonal with the same symbol. If the game is over, display a congratulatory message to the winning player and prevent any further moves. Most of your game’s logic will occur in the click handler for the TD cells of the game board table.

How to Submit




To submit this assignment, you should collect all HTML, CSS, JavaScript files (along with any other files required to view and interact with these web pages, e.g. images), and compress them into a single ZIP file (e.g. RandyFortier_100539147_Assignment1.zip). This ZIP file should be uploaded to the Assignment #1 drop box on Blackboard.




Note: As I am primarily a Linux/OS-X user, I don’t want you to use WinRAR, 7z, etc. formats. If you want a free program that can create ZIP files, check out 7-Zip (it can generate both .zip and .7z files, but .zip is what you need to use for this course): http://www.7-zip.org/download.html.