Description

The purpose of this project is to implement a basic single-page application using the MVC pattern like the one shown in the slide deck on HTML forms and MVC.  The features must include:

1. A form for entering data.
2. Validation logic to check the user’s input for errors.
3. A table that displays data that the user has entered.

NOTE: You may not use jQuery in this assignment.  I want you to get familiar with working with the DOM directly.

NOTE: Please do not use tables or <br> elements to do layout for your form.  Form layout should be done through CSS. 

NOTE: Yes, YOU MAY use tables for the list view, just don’t use them to do form layout.

1         Project Requirements

If you need to, please review the zyBooks chapter on forms and input elements.  Also, there are two videos in Canvas that walk through how to do this project, with very detailed instructions on how this project should look and behave, as well as how to set up the source files that you will need to create.

For this assignment I would like you to pick one of the following projects and implement it.  Note that the Student Registration project is worth fewer points because I’ve literally given you all of the code in my slide decks.

1. Movie database: 85 points
2. Fantasy sports team: 85 points
3. RPG Characters: 85 points
4. Student registration: 55 points (without using tables in the form 65)
5. Your own idea: 65 to 85 points. You must come and talk to me beforehand, and we can agree on how it should work, or it will be purely up to me how much credit I give you.

I will describe each of these in detail later on.

 

1.1         Basic project behavior

When your page first loads, it should show a list of items.  Here is an example showing the student registration project:

Requirements:

• Your list should start with at least four items.
• You do not have to show all fields for each item, just the important ones.
• The input form to create a new item should be hidden.
• There should be a button to create a new item.

 

1.2         Your Form

When you click the create button, the list should hide, and the form should be shown.  Here is an example, using the student registration project.

Radio buttons and checkboxes must be appropriately labeled.  If I click the label, it should toggle the control’s state.

 

1.3         Validation

You must do validation for at least three fields (most forms do not require the user to enter data in every field).  Fields that do not require validation must have a default selection.  NOTE: validation is more than just making sure the user has entered data for a required field.  It means making sure the user has entered correct data.

Here is an example of what I am looking for.

Note that I want to see styling on all messages.  They should stand out in some way as error messages, and not blend in with the rest of the form.  The messages may appear to the right, or below each control.  If a message appears beneath a control, make sure there is a space beneath the message and the control below that, so that the user associates the message with the control above the message.

After correcting my errors, when the user clicks submit, the error messages should go away for the fields that I have corrected.  You can accomplish this by setting the message to blank for each control that passes validation.

If all fields pass validation, then the following should happen:

1. The form should hide
2. The main list should be shown
3. A new row should appear in the list (just add it at the bottom so it’s easy to find).

 

1.4         Project descriptions

You may pick one of the following projects.  Some are worth more points than others because some are more challenging.

 

1.4.1        Movie database: 85 points

Make a database of DVDs that you own

The entry form should show the following:

• Movie title: a text box
• Movie rating: a dropdown with the ratings of G, PG, PG-13, R
• Year produced: a text box. You may use a numeric input for this field
• Your personal rating: a dropdown for 1 to 5 stars
• A set of radio buttons for the genere: action/adventure, drama, comedy, romance, sci-fi/fantasy
• A check box indicating whether or not the disk is DVD or Blu-ray

The main list view should show

• Title
• Rating
• Your personal rating
• Whether or not the film is Blu-ray

 

1.4.2        Fantasy sports team: 85 points

You’re making a fantasy football/baseball/soccer/your-favorite-sport team roster

The entry form should have the following fields:

• Player name: a text box
• Player number: a text box. This can be a numeric input
• Position played: set of radio buttons with the proper choices: QB, running back, line backer, etc.
• A checkbox indicating whether or not they’re on the offensive team
• An edit box naming the team that they play for in real life.
• A drop-down box indicating the number of years they have played in real life (1 to 10)

The main list view should show the following fields:

• Player name
• Player number
• Position played

 

1.4.3        Simple RPG Character generator: 85 points

The entry form should have the following fields:

• Character name: a text box
• The following stats: number fields. When creating a new character, each of these 6 fields should be auto-populated with a 3d6 roll.
  • Strength
  • Dexterity
  • Constitution
  • Intelligence
  • Wisdom
  • Charisma
• A button labeled re-roll. Clicking this button should populate all 6 fields with a 3d6 roll.
• A dropdown with four or more races: for example, Human, Elf, Dwarf, Halfling, etc. You may create your own races and be as creative as you like, but there is a 20 character limit for this field.
• A dropdown with four or more classes: Fighter, Wizard, Cleric, Thief. You may create your own classes, but there is a 20 character limit.
• A pair of radio buttons for gender, which say male/female
• A check box that says whether or not your character is right-handed

You may improve on this idea if you like, but be careful not to go too overboard.

For the list view, I want to see the following fields:

• Name
• Race
• Class
• Gender

 

1.4.4        Student registration: 55 points

Copy my slide decks, and get the code running.  The app needs to function exactly as I’ve described.  Do this challenge if you are having trouble getting started, or you do not feel as confident about your coding skills.

The list view should show a table with the following columns:

• UVU ID
• Name: Show the last name, then the first name
• Gender

You may add other fields if you like.

The entry form should have the following fields:

• First name: a text box
• Last name: a text box
• Gender: a pair of radio buttons labeled Male and Female
• UVU ID: a text box. Do not use <input type=”number”>.  I want you to do validation on this field.
• Race: a dropdown with the following options: Caucasian, Black, Hispanic, Asian, other
• Age: a text box.
• A check box that says whether or not you are a US veteran

Validation is required for all fields except for the US veteran check box.

 

1.4.5        Your own idea: 65 to 85 points.

You must come and talk to me beforehand, and we can agree on how it should work, or it will be purely up to me how much credit I give you.

 

1.5         Use the MVC design pattern

Use the MVC design pattern I’ve taught you.  I want to see the following:

1. Model: You should have three functions (the names don’t have to be exact):
   1. CreateItem: takes a series of pre-validated parameters, creates a new object, adds the object to the internal list, and returns the new object.
   2. GetAllItems: returns an array of all the items in the list.
   3. GetItemById: takes an id as a single parameter, searches through the array for a match, and returns the item from the array. If the id doesn’t match then return undefined.
2. Controller:
   1. You should have an initialize method that your main page calls. The initialize method should
      1. Wire up all button click handlers and other mouse / keyboard events on your page.
      2. query the model for a list of all items, and add them to the table.
   2. All your business logic should live in this file. You can make whatever functions you need, as you see fit:
      1. Button click handlers, and other page event handlers
      2. A method that does validation.

• Do not initialize your model with test data in this file. Your controller should never care about test data.

3. View:
   1. Load all external scripts and files in your <head> section.
   2. You can have one <script> section in the body, at the end. This section can pre-populate the model with test data, and call your controller’s init function.
   3. There should be no embedded JavaScript or CSS anywhere in this file.

 

1.6         Project layout

All your files should be appropriately named, and should live in their proper folders, like in all your other projects.  I will take off up to 10 points if this is not done properly.

Here is a screenshot of a student’s project that is set up with good (consistent) naming and proper folder structure:

 

 

2         Styling (15 points)

Apply CSS, and make it look purdy.  What am I looking for?  See the following zyBooks labs:

1. 9: Auto loan
2. 11: Best-selling video games table
3. 12: Style the form with advanced selectors

Things I will take off points for:

1. (-5 points) please pre-populate your app with some test data. I show how to do this in the video.  I would like four items or more.  There are certain kinds of bugs that show up, but only with multiple items, and I want to know that you’re handling things correctly without having to manually enter data for 30 students.
2. (-10 points) Using tables to do layout for your form. You may use a table to the main list-view of your page, just don’t use it to do form layout.
3. (-5 points) Using <br>
4. (-10) Having a background that is distracting or makes the text on your page difficult to read.
5. (-10) Using a font that is difficult to read. You can use a fancy font for headings, but the body of your page should have a font that is neutral-looking.
6. (-10) Horrid colors. If you’re not an artist I get it, but there are tons of color-scheme generators on the web.  Give one of these a try and make your page look nice: https://designmodo.com/color-scheme-generators/

Here is an example of the kind of thing that I’m looking for.  You don’t have to make it exactly like this, but if you do, you can’t go wrong:

Here is the edit form:

 

 

 

 

3         Turning in your work

Upload to netlify, or find some way to host it.

In Canvas, I want to see:

• A URL to where your page is hosted (do not share this URL with friends)
• A list of the items that you did for additional study. If you don’t provide a list then I get to guess and make my own judgement calls.