Project 3: Dynamic App

Due: Thursday, May 8th

Now comes the fun part—finish your final project! In the previous milestones, the focus was on the structure and presentation of your "site." The priority of this last milestone is the behavior of the application. However, you should also make sure that the structure and presentation are complete, incorporating the feedback you have received.

The Big Picture

Most requirements from the previous project milestones still apply. In particular, please review the following sections:

• Overall Requirements from Project 1
• Professional Practices from Project 2

We are revising the "5 html pages" requirement. You don't need "at least five separate pages" per se, but rather enough complexity. Your application must demonstrate at least five distinct features or use cases, each with a meaningful purpose. These may be implemented as separate HTML pages or as interactive sections within a single-page application. Your site should include clear navigation that allows users to access all major features in a logical and meaningful way.

Requirements

1. Your app must use at least one media query to implement its responsive design.
   • This media query might not appear in your own source code if it's something your chosen design framework (Ex: Bootstrap) is handling.
2. You may (and are strongly encouraged) to augment the default style with your own CSS to create more pleasing aesthetics. (Bootstrap's color schemes are not exactly the most beautiful…)
3. Your site must use localStorage to store and retrieve updated data values between sessions. That is, what is displayed as content should reflect these changes. Often these actions are called "CRUD" (Create, Read, Update, and Delete).
4. However you implement the CRUD actions, your implementation should contain forms that:
   1. make appropriate use of labels, buttons, and input groups. The forms should use a combination of input, select, checks, radios, and possibly other input types based on the data being entered.
   2. include appropriate event handlers to refresh the displayed data when forms are submitted.
5. One possible implementation of CRUD actions could be to use a widget such as Bootstrap's modal. Use a flow that reflects best practices from around the web. For example, if you choose to use a modal you might:
   1. have one modal that allows users to add new data values.
   2. have one modal that allows users to edit existing data values.
   3. have one modal that allows users to delete existing data values.
   4. include appropriate event handlers to refresh the displayed data and dismiss the modal.
6. Your site must provide a way to export and import the current data values to/from a JSON file.
7. Your site should provide the user a means to clear their data (to start from a fresh beginning).
8. Each page and stylesheet of your site must validate without any warnings or errors using the Nu Validator and WAVE Web Accessibility Evaluator.
9. Your app must make at least two network requests to third-party APIs via fetch(). You must demonstrate your understanding of JavaScript features to synchronize the responses.
   • For example, you may sequence the requests such that you make the 2nd request only after you have the response from the 1st. Typically this is because the 2nd request needs to include some information that was computed during the 1st request.
   • Alternatively, your application may issue multiple requests that are combined when all promises are resolved. Or you may do something else that is at least as complex as this and the previous bullet point.

Submission

Your final deliverable is your GitHub repository. Please verify that all files are committed, pushed, and ready for grading. Your final code will be deployed to https://w3stu.cs.jmu.edu/cs343s25/teamX/.

Presentation

Each group will have 12 minutes to present their final project to the class. Divide the time into 3–4 minute segments: one for each student. Do not prepare slides. For each 3–4 minute segment, do the following:

• Demonstrate how the application works in the browser.
• Consider walking the class through how to use the app.
• Walk through the source code (HTML, CSS, JavaScript).
• Answer questions and/or invite comments throughout.

You don't have to show your entire code; focus on the most interesting parts. Explain any problems you encountered and how you solved them. Give the audience a sense of what you learned during this project.

Be sure to demo both the "desktop" (large screen) and "mobile" (small screen) layouts of your app. You may use the DevTools to simulate a mobile device, or just resize the browser window, or something else.

The presentation must involve all group members—don't allow one person to do most of the talking. Practice transitions beforehand so you know how to support each other and tell a cohesive story about your work.