Dynamic Application Prototype

Project Overview

You will create a website with a focused theme and audience of your choosing. The site must serve someone besides yourself. Thinking empathetically is an important skill to develop for web design, as you need to understand your clients' vision to bring it to life. You may consider some of the following scenarios and use cases:

• A calendar for keeping track of due dates, events, birthdays, etc.
• A micro-blogging platform a la Twitter that lets users write short posts.
• An online store and wishlist that allows users to keep track of things they would like to purchase.
• A tablet-based ordering system for a local business, with separate screens for selecting and customizing orders, displaying sales information, etc.
• A personal journal that lets someone track exercise, health, or other personal information, while making progress toward established goals.
• A personal finance tracker that creates graphs (bar charts) illustrating categories of spending habits.
• A note-taking application with a wiki-style interface that lets you update information.

These are just some ideas, and you are encouraged to come up with your own. Your content must be original and not lifted from other websites. Third-party images are acceptable provided you adhere to their license; you must also cite their use.

Phase One: Interface Requirements

Although you have much freedom to design this site as you wish, you must adhere to the requirements specified below. Some criteria are purely numeric or binary (you either met it or didn't), while others are more qualitative in nature (varying in degree).

Technical Components

1. Your site must contain at least five separate pages, each having a meaningful purpose. One of the files should be named index.html. Your pages must link to each other in a logical and meaningful flow.
2. Your site must include some sort of header.
3. Your site must include some sort of navigation links.
4. Your site must support distinct layouts for large and small screens using media queries. Use comments to note where you completed this activity. You may do this in a variety of ways. Consider using this to control images or switching blocks between rows (for large screens) and columns (for small).
5. Your site must include images, and their alt attributes must adequately describe the image content to users of screen readers, users with images disabled, and webcrawlers.
6. Each page and stylesheet of your site must validate without any warnings or errors using the Nu Validator and WAVE Web Accessibility Evaluator.
7. Your site must use at least two different font faces. Headings are often rendered in a sans-serif font, and paragraph copy in a serif font.
8. Your site must include at least one form. The form need not do anything at this point in your learning, but it must be present and it must use built-in content verification. Like all content, it must be neatly aligned.
9. Your site must include links to external sites.

Phase Two: Interactive Requirements

For this project, it is very important to shift from thinking about building a static web page to building a dynamic web application. The purpose is not simply to share information with readers. Instead, the person is using the application for their own goals. For instance, such applications could include:

• A calendar for keeping track of due dates, events, birthdays, etc.
• A micro-blogging platform a la Twitter that lets users write short posts.
• An online store and wishlist that allows users to keep track of things they would like to purchase.
• A personal journal that lets someone track exercise, health, or other personal information, while making progress toward established goals.
• A personal finance tracker that creates graphs (bar charts) illustrating categories of spending habits.
• A note-taking application with a wiki-style interface that lets you update information.

Technical Components

1. Your site must use Bootstrap to create a consistent and modern mobile-first responsive design. You must show meaningful use of components from at least three different types:
   • Accordion, collapse, or dropdown
   • Alerts or badges
   • Cards
   • List group
   • Navbar
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 fetch to load data values from a JSON file stored on the same site. The data used must contain at least five objects, each of which has at least three fields. The fields must have a mix of string, numeric, and boolean data values.
4. Your site must include at least one modal that allows users to add new data values.
5. Your site must include at least one modal that allows users to edit existing data values.
6. Your site must include at least one modal that allows users to delete existing data values.
7. The add and edit modals should contain forms that make appropriate use of labels, buttons, and input groups. The forms should use a combination of input, select, checks, and radios based on the data being entered.
8. The modal form submissions should include appropriate event handlers to refresh the displayed data. The event handler should also dismiss the modal.
9. At least one of the modals must be displayed dynamically using JavaScript. That is, it cannot be launched using a button with the Bootstrap built-in data-bs-toggle and data-bs-target attributes.
10. Your site must use localStorage to store and retrieve updated data values between sessions. I.e., the JSON file will not be updated, but what is displayed as content should reflect these changes.
11. Your site must provide a Blob to export the existing data values as a new JSON file.
12. Each page and stylesheet of your site must validate without any warnings or errors using the Nu Validator and WAVE Web Accessibility Evaluator.

Professional Practices and Design Quality

1. Your source code must adhere to the CS 343 Style Guide, including adherence to the Google HTML/CSS Style Guide.
2. Your site's non-HTML resources must be organized. Images must be placed in a directory named images. CSS files must be placed in a directory named css. The PDF files of your design sketch must be placed in a directory named design.
3. Your forms and user interactions must incorporate validation to prevent users from entering bad information (such as a start date that is after an end date).
4. Your interface must demonstrate good aesthetics, including good choices for color schemes, layout (using grids and/or flexboxes, along with non-static positions), and dynamic effects.
5. Your site must maintain a coherent style across its pages. Repeated style rules must be placed in a shared external stylesheet. Style rules not shared between pages must be placed in separate external stylesheets.
6. The content should be neatly aligned. The axes of alignment should be clearly visible. Favor left- and right-alignment over centering—as centering does not produce a strong axis of alignment.
7. The content should have adequate and consistent spacing. Text should never bleed against the edge of its containing box.
8. Your source code must be readable, using conventional and consistent formatting and meaningful names for classes and IDs. Use kebab-case (preferred) or camelCase identifiers.
9. Your source code should use semantic and structural elements to support accessible usage. You should also use ARIA features as appropriate. In particular, you must adhere to the Level A recommendations in the WCAG Checklist.
10. The names of your files must be entirely lowercase and contain only alphanumeric characters.
11. You should use meaningful comments.

Submission Requirements

Your website must be structured so that it is all contained in a single directory hierarchy within your w3stu account. To submit your project, you will enter the URL to your main page to Canvas.