Pls need it done by sunday night!!!

NEED TO USE REACT TO DEVELOP THE WEBSITE!!! Cannot use HTML only.

*The criteria is listed at the very bottom

First, this is what the conditional rendering is supposed to look like:

Basically, less than 40 credits should display 3 writing courses. between 40 and 70 should display 2 and more than 70 should display 1. This is just for Writing, shouldn't affect the other courses shown below

The name of the student should also be displayed in that blue line

Then, the following is supposed to be done:

NOTE: THE EDIT BUTTON SHOULD WORK AND TAKE YOU TO THIS PAGE WHERE YOU CAN UPDATE THE FOLLOWING:

Requirements and Criteria:

Theme: Form with Conditional Rendering Project#2 will focus on the design of a form with conditional rendering of components. 1. Stage I Implement the table for Writing Emphasis Table Case I If the number of transfer credits is less than 40 credits, you need to take 3 Writing Emphasis courses. React App localhost:3000 Student Name: John Wayne Total Transfer Credits: 30 Writing Emphasis for John Wayne Semester 368/371 Number Grade Description Writing! Writing Prefix ENG Editing Edit 1 2 ER Writing3 Edt Case II If the number of transfer credits is between 40 and 70 credits, you need to take 2 writing emphasis courses. Reactor localhost: 3000 Student Name: Mary Smith Total Transfer Credits: 42 Writing Emphasis for Mary Smith Description Semester Prefix Writing 368/371 Number Grade Editing 1 ENG Edit 2 Writing 2 Edit Case III If the number of transfer credits is greater than 70 credits, you only need to take 1 writing emphasis course. You will need to develop a React project to allow a user to keep track of the Gen Ed requirements for the Computer Science Undergraduate program. In the following explanation, only a major part of the project requirement is shown; you need to add the two input fields and conditional rendering as defined in project#2. Part I. Academic Foundation React App x Homepage - 2021 Spring x | U MERN Stack - The Comp X Next.js Sample Website x + + C O localhost:3000 Academic Foundation Academic Foundation Semester Prefix Number Grade Distributive Requirement Id Description 1. First Year Experience FYE Edit 2 English Composition WRT 120 Edit Additional Requirement 3 English Composition 11 WRT 200 Edit 4 Mathematics MAT 151 Edit 5 Interdisciplinary Edit 6 Divierse Communitites Edit Part II. This part includes the Distributive Requirement. React App Homepage - 2021 Spring X U MERN Stack - The Comp Next.js Sample Website + localhost:3000 C Academic Foundation Distributive Requirement Semester Prefix Number Grade Distributive Requirement Id Description 1 Science Edit 2 Science 11 Edit Additional Requirement 3 Behavior & Social Science I T Edit 4 Behavior & Social Science II Edit 5 Humanity Edit 6 Humanity 11 Edit 7 Art Edit Part III. Writing Emphasis and Speaking Emphasis with Conditional Rendering. The following is only a sample screen shot. x Homepage - 2021 Spring x U MERN Stack - The Comp X React App c localhost:3000 Next.js Sample Website x + @ *C Academic Foundation Additional Requirement Semester Prefix Number ENG Grade Id Description 1 Writing Emphasis Distributive Requirement Edit 2 Writing Emphasis II WRT Edit Additional Requirement 3 Writing Emphasis III WRT Edit 4 Speaking Emphasis SPK Edit 5 Speaking Emphasis 11 Edit 6 Speaking Emphasis III Edit React App X Q Update 0-project3-integrated - 20215 x 2 React-Bootstrap. React-Boot: x O localhost:3000 Academic Foundation Distributive Requirement Additional Requirement Description First Year Experience Semester Prefix FYE Number Grade Save Cancel React-Bootstrap - React-Boots x React App X + Update: O-project3-integrated - 20215 x CO localhost:3000 Academic Foundation Distributive Requirement Description Additional Requirement First Year Experience Semester Spring 2021 Prefix FYE Number 100 Grade A Save Cancel B 0-project3-integrated - 2021 B React-Bootstrap - React-Boots X React App X + o localhost:3000 e * Update Academic Foundation Academic Foundation Distributive Requirement Id Description Semester Prefix Number Grade 1 First Year Experience Spring 2021 FYE 100 A Additional Requirement Edit 2 English Composition WRT 120 Edit 3 English Composition II WRT 200 Edit 4 Mathematics MAT 151 Edit 5 Interdisciplinary Edit 6 Divierse Communities Edit The project requirements include the following: 1. You need to define one component per file. You may use either function components or class components. 2. You need to display two tables for displaying all Writing Emphasis and Speaking Emphasis courses. 3. You need to provide a component to allow a user to enter the suer name and the total number of transferred credits. Your table cannot be hard-coded. 4. The borders of the table must be displayed, and the border should not touch the left side of the window in which the product table and the search box are displayed. If you only use HTML to move the table toward the center of the page, you will receive a penalty of 15 points out of 100. 5. You need to use Bootstrap or React Bootstrap to implement the table style. If you only use HTML to display the table, you will receive a penalty of 15 points out of 100. Grading Criteria: 1. Required Components - Your project must display two input fields and two tables. All these input fields are included in one react component. Each table is displayed with ONE Table component with Different props value. If this rule is violated, you will receive a penalty of -15/100. 2. Required Styles You must use React-Bootstrap or Bootstrap in addition to the HTML or CSS. 3. Soundness - Your table rows must display correct data. You cannot hard-code the data. You may not use only HTML with jQuery, PHP, Vue.js, or any methods other than React in the domain we have discussed. If this rule is violated, you will receive -30/100. 4. Correct Style For courses took, the course name and the Took flag must be displayed with red fonts. The table border must not touch the left edge of the webpage. 5. Correct Style for the header and the title check the sample display for the colors of the font and the background. Theme: Form with Conditional Rendering Project#2 will focus on the design of a form with conditional rendering of components. 1. Stage I Implement the table for Writing Emphasis Table Case I If the number of transfer credits is less than 40 credits, you need to take 3 Writing Emphasis courses. React App localhost:3000 Student Name: John Wayne Total Transfer Credits: 30 Writing Emphasis for John Wayne Semester 368/371 Number Grade Description Writing! Writing Prefix ENG Editing Edit 1 2 ER Writing3 Edt Case II If the number of transfer credits is between 40 and 70 credits, you need to take 2 writing emphasis courses. Reactor localhost: 3000 Student Name: Mary Smith Total Transfer Credits: 42 Writing Emphasis for Mary Smith Description Semester Prefix Writing 368/371 Number Grade Editing 1 ENG Edit 2 Writing 2 Edit Case III If the number of transfer credits is greater than 70 credits, you only need to take 1 writing emphasis course. You will need to develop a React project to allow a user to keep track of the Gen Ed requirements for the Computer Science Undergraduate program. In the following explanation, only a major part of the project requirement is shown; you need to add the two input fields and conditional rendering as defined in project#2. Part I. Academic Foundation React App x Homepage - 2021 Spring x | U MERN Stack - The Comp X Next.js Sample Website x + + C O localhost:3000 Academic Foundation Academic Foundation Semester Prefix Number Grade Distributive Requirement Id Description 1. First Year Experience FYE Edit 2 English Composition WRT 120 Edit Additional Requirement 3 English Composition 11 WRT 200 Edit 4 Mathematics MAT 151 Edit 5 Interdisciplinary Edit 6 Divierse Communitites Edit Part II. This part includes the Distributive Requirement. React App Homepage - 2021 Spring X U MERN Stack - The Comp Next.js Sample Website + localhost:3000 C Academic Foundation Distributive Requirement Semester Prefix Number Grade Distributive Requirement Id Description 1 Science Edit 2 Science 11 Edit Additional Requirement 3 Behavior & Social Science I T Edit 4 Behavior & Social Science II Edit 5 Humanity Edit 6 Humanity 11 Edit 7 Art Edit Part III. Writing Emphasis and Speaking Emphasis with Conditional Rendering. The following is only a sample screen shot. x Homepage - 2021 Spring x U MERN Stack - The Comp X React App c localhost:3000 Next.js Sample Website x + @ *C Academic Foundation Additional Requirement Semester Prefix Number ENG Grade Id Description 1 Writing Emphasis Distributive Requirement Edit 2 Writing Emphasis II WRT Edit Additional Requirement 3 Writing Emphasis III WRT Edit 4 Speaking Emphasis SPK Edit 5 Speaking Emphasis 11 Edit 6 Speaking Emphasis III Edit React App X Q Update 0-project3-integrated - 20215 x 2 React-Bootstrap. React-Boot: x O localhost:3000 Academic Foundation Distributive Requirement Additional Requirement Description First Year Experience Semester Prefix FYE Number Grade Save Cancel React-Bootstrap - React-Boots x React App X + Update: O-project3-integrated - 20215 x CO localhost:3000 Academic Foundation Distributive Requirement Description Additional Requirement First Year Experience Semester Spring 2021 Prefix FYE Number 100 Grade A Save Cancel B 0-project3-integrated - 2021 B React-Bootstrap - React-Boots X React App X + o localhost:3000 e * Update Academic Foundation Academic Foundation Distributive Requirement Id Description Semester Prefix Number Grade 1 First Year Experience Spring 2021 FYE 100 A Additional Requirement Edit 2 English Composition WRT 120 Edit 3 English Composition II WRT 200 Edit 4 Mathematics MAT 151 Edit 5 Interdisciplinary Edit 6 Divierse Communities Edit The project requirements include the following: 1. You need to define one component per file. You may use either function components or class components. 2. You need to display two tables for displaying all Writing Emphasis and Speaking Emphasis courses. 3. You need to provide a component to allow a user to enter the suer name and the total number of transferred credits. Your table cannot be hard-coded. 4. The borders of the table must be displayed, and the border should not touch the left side of the window in which the product table and the search box are displayed. If you only use HTML to move the table toward the center of the page, you will receive a penalty of 15 points out of 100. 5. You need to use Bootstrap or React Bootstrap to implement the table style. If you only use HTML to display the table, you will receive a penalty of 15 points out of 100. Grading Criteria: 1. Required Components - Your project must display two input fields and two tables. All these input fields are included in one react component. Each table is displayed with ONE Table component with Different props value. If this rule is violated, you will receive a penalty of -15/100. 2. Required Styles You must use React-Bootstrap or Bootstrap in addition to the HTML or CSS. 3. Soundness - Your table rows must display correct data. You cannot hard-code the data. You may not use only HTML with jQuery, PHP, Vue.js, or any methods other than React in the domain we have discussed. If this rule is violated, you will receive -30/100. 4. Correct Style For courses took, the course name and the Took flag must be displayed with red fonts. The table border must not touch the left edge of the webpage. 5. Correct Style for the header and the title check the sample display for the colors of the font and the