IT 432

Spring 2025

Craig Miller

• Home
• Basic Information
• Grades and Policies
• Schedule

Weekly Notes

• Week 10
• Week 1
• Week 2
• Week 3
• Week 4
• Week 5
• Week 6
• Week 7
• Week 8
• Week 9
• Week 10

Assignments

• Assignment 1
• Assignment 2
• Assignment 3
• Assignment 4
• Midterm Report
• Assignment 5
• Assignment 6
• Culminating Project
• Final Report

Technical References

• DOM Introduction
• JavaScript Basics Tutorial
• Mozilla Technical Documents
• HTML Tag Reference
• CSS Property Reference
• JavaScript Guide

Assignment 5
Propagating and manipulating lists of elements
Due Saturday May 17 before 11:30pm

Overview

For this assignment, you'll create a component (e.g. a list) that is populated by array of arbitrary size to produce a set of subcomponents (e.g. list items). Like the last assignment, state should be maintaned in a parent of the component and include a separate child component the displays summary information.

Requirements

Important: you will want to start with the examples in class.

Create a simple React app using the approach and conventions demonstrated in class that have the following components and properties:

• A parent component (e.g. the App component) that keeps all state for the app.
• A child component that is nested in the parent. This child should contain subcomponents that are populated by an array of arbitrary size.
• Enable each subcomponent to support at least two types of user events (e.g. delete, mark as done, rate the priority). User events should change the state at the parent level.
• A second child component, nested in the parent, that summarizes the data structure that controls the set of subcomponents in the other child. Example summary content might include the number of elements, a running total or a maximum value.
• Enable each subcomponent to support at least two types of user events (e.g. delete, mark as done, rate the priority). User events should change the state at the parent level.

Build your app and post it on studentweb or any other publicly available host.

Note that the worked example from week 6 addresses most of these requirements. A well explained submission that has cosmetic modifications will generally receive originality ratings of fair or good. A higher grade is obtained with more significant modifications, which might include multiple state elements or complex statement elements (e.g. an array with objects).

Submission

On D2L, submit a zip file of a folder with the following contents:

• A readable document (pdf or txt) that summarizes your accomplishment and includes a working link to your app.
• The app.js file (just the file in the src directory)
• Any supplementary files for documenting that your program works

Grading

This assignment is worth 10 points. A rubric will be provided with the submission.