Cheat Sheet

HTML5 Cheat Sheet

Cheat Sheet via Make a Website Hub

HTML Canvas Demo

Description:

This is a simple web app for drawing boxes on a canvas object. It allows for changing the stroke and fill color and size of the boxes and calculates the box area and perimeter on the fly. It can also undo up to 10 times. It includes mouse and touch events and will therefore work on tablet devices (though multi-touch is not utilized).
This simple web app could be the basis for a more robust web based drawing program. All the JavaScript is well documented.

Notes:

The page layout is not responsive, so a minimum screen size of 1024 x 768 is recommended.

The demo page can be viewed here:

Canvas Demo

The files can be downloaded here:

canvas_boxes_demo.zip

Attribution

All the code was written by me. The fonts are provided via Google Fonts. The textures are from subtle patterns.

Course Evaluation Web App Demo

Description:

This is a simple web app designed to calculate an average score from grades in a class. It does all calculations with JavaScript. It could be adapted to work for most classes and is a simple demonstration of the usefulness of JavaScript for basic client side data processing.

All JavaScript is well documented.

Notes:

While there is no indication, clicking on the word average in any of the attendance, assignments, or evaluations sections will calculate the average for that section only.

The demo page can be viewed here:

Course Evaluation Calculator Demo

The files can be downloaded here:

course_eval_calc_demo.zip

Attribution

All the code was written by me.

JSON Parsing Demo

Description:

The following test project parses a JSON file of Presidents and their Vice Presidents. It also merges local data (images of the Presidents) with the data provided in the JSON file. It displays the results in a table (and a table within a table for the Vice Presidents). A simple search / sort function is also provided.

The JSON file is retrieved using an AJAX request and stored in a local variable. Everything is processed using only JavaScript (neither jQuery nor any other JavaScript library is utilized).

Graphics and CSS files to style the page are included along with a copy of the JSON file. The JavaScript is well documented.

Notes:

Because the data is retrieved using an AJAX request, a web server is required to make everything function. Simply opening the index.html file in your web browser will not work. A local server, such as MAMP would work well or a basic Linux server would also do the job.

The demo page can be viewed here:

JSON parse - Presidents List Demo

The files can be downloaded here:

json_parse.zip

Attribution:

The original images of the presidents were gathered from wikimedia commons, the frame and sepia tone effects were added by me. The provided JSON file is based on sample data from University College of the University of Denver, original author Michael Schwartz. The fonts are provided via Google Fonts