Week 12

This week we'll talk more about using react and learn how to make requests to a remote server (aka an API endpoint aka AJAX). We'll also discuss our final projects.

View the lecture

Examples

• Shell Game
• Map+React, three ways, including with spread and destructured assignment
• Fetch Giphy Example (Not react)

Final Project Rubric

For full credit, your final project should include all of the following:

• Good visual design
• Have a clear, pleasant user interface and user experience. Think about the user.
• Use of Javascript, html, and css
• No syntax errors and no runtime errors under normal conditions
• Comments in your code about what your code is doing and why
• Re-Render or change some html content using javascript
• Use some sort of event handler
• Change the appearance of something based on a user interaction

Your code itself should:

• Be well structured, preferably using multiple classes
• Include comments that explain what your code is doing

Additionally it should do at least two (2) of the following:

• Make a remote API request and use the data from that
• Use an outside javascript library
• Have a dynamic collection of things, that are subject to at least two of the following actions: added, removed, edited, filtered, searched
• Dynamically use canvas or svg or advanced css animation

If you have an idea and you’re not sure if it fits, talk to me.

Note: If you follow a tutorial to get started, that's fine, but be sure not to plagiarize. You must include a link to the tutorial, and you must make substantial modifications and additions that demonstrate your understanding of the concepts listed above.

Your final project is due Thursday May 17th at 2pm. Please be sure to email it to zachary.schwartz@qc.cuny.edu by then for full credit.

Homework

Final Project Proposal

Write a few sentences answering the following:

• What problem are you trying to solve? Who are the users?
• What does your application state look like to initially? How it change as a user interacts with it?
• What challenges do you foresee in building this?
• Prior art: What already exists that's similar to this?

Create two or more sketches of your interface, either as images, or preferably as html and css. Wireframes are also ok.

Email your responses and sketches to zachary.schwartz@qc.cuny.edu by Thursday May 3rd at 10am for full credit.

Reading

• Pixijs Game Framework Tutorial. More tutorials.
• Pixijs Examples. These are editable, play around with them. Try making the bunny rotate faster in the first one.
• Another even more detailed react tutorial. Optional, but recommended.
• Reference: Using fetch