diff --git a/cmsc388a/projects/project2/Project2Description.md b/cmsc388a/projects/project2/Project2Description.md index b9dc709a0b355c27b0ce271e8d38e02dfcf7343b..e658dd18bc0517c2df981908799598a72f2f9d80 100644 --- a/cmsc388a/projects/project2/Project2Description.md +++ b/cmsc388a/projects/project2/Project2Description.md @@ -4,3 +4,14 @@ ## Objectives: To gain experience building more complex react components and practice css styling. ## Specifications/Requirements +We have provided you with the `photo_frame.html` file which will contain all of your code. The motivation behind this project is for you to gain both experience and an appreciation for what React components bring UI development. All of the code you will need to write to implement the project needs to be inside of the script tag - i.e. any styling should be at the component level and inline. + +The "picture frame" you will be developing consists of 2 rows, of 4 pictures each. The main container for your frame is the div inside of the body tag that we have provided you with. To help your design, you will need to define and style the following comonents: +1. Row component. This is the component that will represent an individual row in the frame. +2. Picture component. This is the component that will represent the area for both an image and the title beneath it. +3. Image component. This is the component that will represent the area that will display the actual image. +4. Title component. THis is the component that will represent the tite for each image. The text should be centered horizontally inside of the Picture component it appears inside of. + +Additionally, your render method should only generate 2 Row components separated by 2 `<br />` tags. Notice, it only needs to referecence the frame as to where to display the rows. +As an example of what your completed app should look like I have posted a screenshot in the general channel on Slack. +