Overview

The goal of this exercise is to practice building front-end web applications using the Model-View-Controller (MVC) framework.

// Credit: 'Totallybradical' @ Wikipedia, CC-BY-SA-4.0, [link]

Instructions

Do one one of the following using the React library:

1. Create a simple stopwatch, including "Start" and "Reset" buttons, and functionality equivalent to Google's stopwatch.
2. Modify the paint program from the undo assignment to use MVC.
3. Create a piece of your project using MVC.

Feel free to pick whichever seems “easiest” to you.

Requirements

1. Readable code
   1. Comments explain any non-obvious lines/functions
   2. Consistent style
   3. Use meaningful variable names.
2. No JavaScript errors in Chrome v65+ or Firefox v59+ (current desktop versions)
3. Write a brief (50-400 words) explanation in a file called mvc.txt, including (a) what you did (b) how to run it.
4. Include at least one screenshots showing it work (in case I can't get it working on my end for some reason).
5. Follow the MVC framework.
   1. Model code must not modify the view directly, and vice versa.
   2. Separate code into components to the extent reasonably possible (i.e., like in the calculator example)
   3. Explicitly label how your code fits into the MVC framework. Files (or broad sections of files) should be labelled as // [MODEL], // [VIEW], or // [CONTROLLER].
6. Your code must be your own, except that you may copy very generic skeleton code from an existing example, as long as (a) you understand it well, (b) it is clearly credited with a comment of the form // Credit: author, license, url, and (c) it is very clear which code is copied and which is written by you.
7. Main HTML file should be called index.html.
8. Application should work without a web server running all the time. I should be able to test it by double-clicking your index.html file on my computer.

Optional: Let me know how long this assignment took you, and if you have any feedback to make it better for next time this class is offered. Save this as feedback.txt.

Submission

Send a link to the zip file (e.g., on OneDrive, Google Drive, etc.) and the SHA1 hash of the file to the instructor by email with the following subject line: exercise 3: MVC [695-hci]

Evaluation

Full credit will be given to all submissions that meet the above requirements.

Resources

• Introduction to MVC: article from Chrome Developer site
• Calculator example by Andrew Farmer: simplified code, original code, demo
• React + Python tutorial + example by Angela Juvet Branæs: tutorial, code
• JavaScript fatigue: article
• Reference sheets: React Cheat Sheet by Petr Tichy, ES6 cheat sheet