- Fork this repo
- Clone the forked repository
cd
to the directory where you cloned itnpm install
to install dependenciesnpm run cypress
to open the cypress testing window
Note: Remember to
git add
,git commit
andgit push
regularly
- When finished, commit and push your work.
- Make a pull request on github.
- Submit the link to your pull request on Canvas.
Create a classroom that meets the user stories below.
The students at the school are stored in the array in data/studentData.js
. Import this and pass it to your components. Use these students and do not change any information in the array, or else the tests will fail.
- I can see sections with students, class enrollment, and enroll as teacher form.
- I can see each student's name, GPA, age, photo, bio, and an
Add To My Class
button. - I can add students to the class and see the total number of students, and average GPA.
- I can submit the enroll form, complete my teacher enrollment, and see a confirmation alert with the average class GPA.
- If I do not complete the teacher enrollment form with valid data, I will see an alert that tells me my data is not valid.
The acceptance criteria below are covered by unit tests. Notice that there are some important details about the exact text, classes, or HTML tags you'll need to use in order to pass the tests.
- I can see a section with students laid out in a grid.
- Use the class name
Students
with css grid andgrid-template-columns
- Use the class name
- I can see a
Roster
section that hasTotalStudentCount
, andAverageGPA
- I can see a
Teacher Enrollment
section that has inputs and labels forName
,Subject
,Email
,Phone Number
,Zip Code
, and a button that saysTeach Class
- Don't forget to create
<label>
elements for your inputs
- Don't forget to create
- Each student displays the name, GPA, age, image, and bio.
- Each student has an
Add To Class
button.- The button text should be:
Add To Class
- The button text should be:
- When I click on a student, their name appears in the class.
- When I click on a student, their GPA appears in the class.
- Use
<ul>
and<li>
elements to list the students and GPA's in the class (name and GPA in one<li>
). Give the<ul>
the classEnrolledList
.
- Use
- When I click on a student, the average GPA updates with the average of all students GPA's in the class.
- Text should be:
Average GPA: 0.00
(with the correct average)
- Text should be:
- When I click on a student, the total number of students updates.
- Text should be:
Total Student Count: 0
(with the correct number of students)
- Text should be:
- When I click on additional students, they are added to the class.
- When I click on additional students, the other students in the class do not change.
- When I click on additional students, the average GPA, and total student count is as expected.
- I can complete the inputs in the enrollment form.
- When I complete the form with valid input and click
Teach Class
, an alert tells me that I am the teacher and was successful.- Alert text should include:
You are the now the teacher
- Alert text should include:
- When I complete the form with valid input and click
Teach Class
, an alert tells me the total amount of students and their average GPA. - When I complete the form but a piece of data is missing, an alert tells me that my input is not valid.
- Alert text should include:
Input is invalid
- Alert text should include:
- When I complete the form but the phone number is not 10 digits long, an alert tells me
Phone number is not valid
- When I complete the form but the zip code is not 5 digits long, an alert tells me
Zip code is not valid
- Before you write any code, think about your component structure.
- What components will you need to represent the parts of the app?
- Which components will need to have state?
- Which components will need to know about the state of other components?
- Which components will need to get props (data or callbacks) from another component?
- Which components will be rendered by other components?
- Draw out your component structure. Check your drawing against the user stories. Will you be able to implement all of the stories with this structure?
- The students for the store are in the array in
data/studentData.js
. You can import this and pass it to your components. - You will need to check that a phone number is 10 digits long. You can use any 10 digit string for this.
- If your tests are failing, read the acceptance criteria closely. Some tests expect you to use specific text, classes, or HTML elements.