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 4
Keeping state in a parent component
Due Saturday May 3 before 11:30pm

Overview

For this assignment, you will create a ChangeableColor component that consists of the ColorSample component from last assignment, plus a new component that allows users to set the color values.

Requirements

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

• The app uses a parent component called ChangeableColor. It maintains the state specifying the red, green and blue values for its children components: ColorSample and ColorInput. It also defines handlers that update the state when any input changes occur.
• Use the ColorSample component from the last assignment. You are encouraged to modify it for better presentation.
• Create and use a component called ColorInput. It provides text inputs for all 3 color components. It calls handlers defined in ChangeableColor when any of its values change.
• The main App component should include multiple ChangeableColor components to show its reuse.

Optional Challenge

Perform the following to achieve the color blending app from the previous assignment:

1. Lift the two color states from the ChangeableColor components to the main App.
2. Add a ColorSample component to the main App that shows the blend of the two ChangeableColor components.

Submission

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

• A readable document (pdf or txt) that summarizes your accomplishment. Include screen shot(s) that that show that it works.
• 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.