For this assignment, you will need to design and develop a dynamic web application using any or all of the techniques we have seen in class: HTML, CSS, Javascript, the DOM, and JavaScript event handlers. You will also need to document your work in a report included in the webapp itself.
You get to choose exactly what your application will be. I provide a list of possible applications below, but you are free to choose something that would interest you, provided it uses the techniques we have learned.
Choose your topic wisely and scope its requirements carefully. You only have a short time to finish the project. If your vision is ambitious, pick a subset of things to implement first, and discuss the extensions in your project report (see below).
Because of its breadth, this assignment will be worth two assignments in the weighting for your course grade.
You need to submit a ZIP archive containing all the files needed for your application.
index.html.
Your application must include an About
page, clearly linked
from the main page. This page is your project report and must include
at least the following sections:
future workin this section. But make sure you design your project so that something works nicely in the time available. All ideas and no working code equals poor grade.
Don't leave the writing to the last minute. In fact, if you write the sections as you do the work, you'll only have the final analysis to write at the end.
A poor writeup will result in a poor grade for even the greatest web application. Conversely, a good writeup can help salvage a poor application.
Here are a few ideas for different possible web applications. You don't have to do any of them. And in fact it would probably be more interesting if you pick your own. Whatever you choose, plan your development carefully so you don't end up with nothing.
Do not simply copy an application from the textbook or from the web. You won't learn anything and we will probably be able to find it online ourselves. If you want to use an idea from the web, be sure to cite the source of your inspiration in your report. Do not use other people's code.
Lineup Card, listing members of a team or other group. You'd want a nice design, that presented what's called a
Master-Detailview: a list of the members of the group with a way to drill-down in details of an individual member. Thumbnail pictures in the master list, bigger pictures in the detail view perhaps. Name and number in the master list, season statistics or likes/dislikes in the detail view. And so on. You'd probably predefine the people and their details in Javascript data structures rather than loading them from a database.
Shopping Cart. That is, an application where there's a list of things for the user to choose from, and they build up an
orderdynamically. A variation on this is selecting options for a product, for example a car with options or a pizza with toppings.
In real life, online shopping carts run with web server support for keeping track of the order. You would keep track on the client (in Javascript) and make sure the user interface (UI) was nice and dynamic. And as above, you'd predefine the possible choices using Javascript rather than getting them from the server on the fly.
keypress
events). The basic UI is pretty simple to do in HTML/CSS. There's
plenty of scope for interesting extensions, such as memory
features (saving and recalling values) and funky functions
(like y to the x power). You could have different UIs for things like financial functions: computing the cost of a loan with interest, or the future value of an asset. This is one project that might actually be useful!
Math.random() to position the
ships. In fact, many games require some randomness.
canvas
element) and animation (done with timers in Javascript).
You might have a simpler interface than the real game, for
example using form fields for launch parameters.
Similar animated games include Pong and BreakOut.
hyperbook: a story that could go in different directions depending on user actions. You'd want to make sure the page itself was dynamic, with things appearing or disappearing, as well as presenting the content of the story dynamically as the user navigates through it.
AJAX. These are the same techniques used to update feeds and
walls, by the way, so those are also possibilities for your project.
If you want feedback on your idea, you are welcome to send me a short description. Do not wait until the last minute to do this, however.
Last update: Friday, 05-Apr-2013 14:47:56 EDT