Design a “piggy-house” application in bootstrap/html5/

Assignment 5
Design a “piggy-house” application in bootstrap/html5/etc. It should look like:
A. The initial state of the webpage B. After the draw button is clicked
C. After the draw button is clicked again D. The third time the button is clicked (and all
multiples of 3). (This will lead to a greyed-out
look in Firefox only.) This figure is not to scale.
1. This is a dynamic webpage. Initially, the page looks like Picture A. When a user clicks a button
for the first time, the house (see Picture B) will appear. When the user clicks the button, the
colors of the house reverse (although the door stays black). If you cannot see a color copy, the
two colors are alterating red and blue, where the house starts with the leftmost rectangle being
blue.
2. Every third click, there should be an alert saying the house is still standing (“the house survived
3 blows” in Picture D) and the canvas border should change permanently to red with a width of
20 from black with a width of 2. (Those who do not understand the allusion are directed at the
nursery tale, the three little pigs.)
3. You should use the html5 canvas with its drawing API calls for the graphics, and bootstrap for
the button. I would advise using the “width” and “height” attributes in the canvas tag to set the
dimensions (300x300). You need not be absolutely precise in the drawing's dimensions although
the general shape should be the same and any polygons should fit together (ie there should be no
gaps). The title should be an h3.
4. The initial colors and border properties must be done in a separate css file.
5. Include your javascript code in the .html file.
6. You must hand-code this assignment using only Bootstrap 3.3, html5, javascript, and (optionally)
jQuery. You must use the default theme in Bootstrap.
7. You are responsible for monitoring the Canvas forum site for any modifications or corrections of
this assignment (or any assignment).
8. You must submit everything (the piggy-house.html and piggy-house.css files in this case) in a .zip
file. The name of your zip file (and your directory should be “piggy-house-YourName”, where
YourName is, as you might guess, your name. Failure to upload the appropriate files will be a
severe penalty; failure to put it in a .zip file or name the directory will be a more minor, but
substantial, penalty. We will grade you in full-screen for the size of the browser.
9. There will be a maximum of 1.5 late days (ie, final deadline of Tuesday noon), because we want
to be able to discuss the homework in class and in sections. In any case, don’t be late on this – it’s
too simple.
This is due Sunday 10/18 at 11:55pm. You must upload your code to Canvas to submit.
We will grade this assignment stand-alone. That is, we will open your html in Chrome or Firefox as a
local file. To avoid using Bootstrap in a relative location, use:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
and
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css
In case you use jQuery, use :
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js