MET CS601: Term Project
Instructions
Create a website that uses the API’s and technologies we discussed during
the semester.
Grading
See the Rubric on the Project Submission page and the specic
comments
in this document.
Browser Requirements
Chrome (latest). The Professor will be testing on a Windows 10 Pro Edition
laptop.
Mobile Device Requirements
Any modern device will be ne.
The professor will be testing on a Pixel 4.
Broad/High-level Requirements
- The student must present their project on a shared or public host site
and NOT on localhost. There will be a loss of 10 points if this
requirement is not followed. - Must be a mobile rst
design. - There shall be no errors displayed in the console window while in
debug mode. The Professor will check. (Point loss depends on the
number or errors in the console.) - Must use CSS extensively. You cannot cut and paste the same CSS
rules over and over again in each HTML page to meet the minimum
number of selectors used. (See CSS requirements) - Must use modern Javascript (See Javascript requirements)
- There is no minimum number of HTML pages. For example, If you
create a SPA (Single Page Application) you will have only one HTML
page with several sections. In general, you should not need to create
more than 10 HTML pages. (Having a high page count does not mean
a good grade)
Previous Ideas
In the past, students have created the following types of websites:
E-Commerce site
Hangman Game
Personal Diary
Restaurant Ordering System
Dating app
Workout notes
Weather app
Rewrite of the StudentLink
Todo/Reminder app
Personal Bio website
Healthcare website
Catering System
Look and Feel (“LnF”)
Your website should be visually appealing. You should uses images, good
CSS and purposeful javascript that does useful work in the site.
CSS Requirements
a. Must use at least 10 descendent selectors.
b. Must use at least 10 unique adjacent selectors.
c. Must have 2+ different class selectors.
d. Must have some ID selectors.
e. Must have 5 or more pseudo element selectors.
f. Must have 5 or more pseudo class selectors
Javascript Requirements
a. If you do not use ReactJS or Angular, you will need to use or have the
following API’s in their script(s):
i. All Javascript code must use ES6 modules. This is a requirement.
(Not using modules will lose 10 points)
ii. You must have at least 20 active event handlers. They can be of
any type. (click, select, drop/drag, mouse events, window events).
iii. Must have at least one functional and in-use ES6 class in your
active codebase. Meaning, you can just declare a ES6 class and not
use it.
iv. Global functions are generally not allowed under most conditions
in any le.
If you need to declare a Globally-scoped function, you
need to put in a comment on top of it explaining why.
v. You need to show prociency
using functions. Do not simply cut
paste the same functions over and over again. Your functions
should be unique and do something useful to your web
application.
Since you will have at least 20 active event handlers from the
previous requirement, you should have enough coded to meet
this requirement. But, you need to show a mix of:
Function Expressions
Function Declarations
b. The website must Ajax in some capacity. The minimum number of
Ajax features in your script is just 1 actively used call and handling of
the response data into the page. (You can use Axios, Fetch or native
XHR)
Optional Requirements - Students can use ReactJS or Angular if they choose to.
- Students can create a backend system with NodeJS, PHP or any
server-side language they want. This is entirely optional and not
required. - Students can opt to develop their website as a SPA (Single Page
Application) - Students can develop a database, but it is not required. It would be up
to the student, and it is entirely optional.
The professor reserves the right to update these requirement as he sees t.