COMP – 10259 – Client Side Web Programming

In this assignment you are being asked to createa simplegraphical application or a game. Since we have

no backend support, we will need to work 100% client side. You are not expected to retain any
information between page loads high scores, etc. will reset every new page load.
Do not over complicate the program itself, it can be as simple as a heads/tails coin flipping game, a dice
game1, memory matching puzzles2, a typing tutorial, HTML tutorial (remember Super Markup Man?) or
some other simple game that you wish to create. Perhaps theres even a Happy Chicken assignment in
your Java course that can serve as inspiration. The goal here is to practice programming, not to create a
AAA multimillion dollar hit game. The artistic standard is good enough not gallery ready. A demo
video is available at
Required Elements
Your program must meaningfully make use of SVG elements.
o These elements must be interactive using at least 2 types of JavaScript mouse events
(your choice of specific events). You may change 1 mouse event to a keyboard event if
you wish.
o These elements must have the ability to be removed: they must disappear from the
screen and be removed from memory.
o These elements must be creatable by some mechanism. Suggestions include an add
button or a timer that spawns them. After creation they should appear on the screen.
o You may have an initial layout of hard coded elements if desired, but all other adding
and removing of elements must be dynamic using JavaScript.
Style your SVG elements using CSS in addition to the basic XML parameters available.
1 See games for some inspiration.
2 See for some inspiration.

Animate at least 1 SVG element using JavaScript. The animation must be obvious and
noticeable. Do not use JavaScript to add a CSS animation to an element, nor use an animated
GIFs, etc., to fulfil this requirement.
Use standard HTML elements to establish user inputs and criteria for the program. Use at least 1
input element without a form to accomplish this requirement, in addition to any other elements
you wish. For example: change the colour of all the circles, make all the squares twice as large,
make the dice 8 sided instead of 6, make the animation move twice as quickly, etc. The specifics
will depend on what kind of program youre creating.
Track the state in some meaningful way for example, a score, number of tries remaining, count
of circles created; something that is connected to your application.
Continue to use good HTML structure by creating a header and footer around your main
content. The header or footer must contain your name and a copyright notice for 2023. The
page should be titled and appear neat and complete.
You may use Bootstrap 5 or multimedia elements, including CSS animations to make your project
visually appealing and interesting. You may not use jQuery.
The app must run from beginning to end with no bugs or errors in the Console.
All JavaScript and CSS code must be in separate, external files.
The page should look ok on a phone (i.e. maximum width 320px) and on desktops as well.
All files must be documented according to Documenting JavaScript Programs on the LMS.

NOTE: This a college-level assignment DO NOT use any high-level programming to write the code. DO NOT use any AI tools to write the code should be hand-written. Please read and follow all the instructions carefully. For your help and additional information I have provided Youtube video and 2 websites.