Skip to content

Changes #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Changes #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a257943
setting up changes to add
githubteacher Jul 10, 2019
1e8a713
fixing some stuff
githubteacher Jul 15, 2019
acb1b15
remove step number
githubteacher Aug 14, 2019
0f2cc53
fix steps
githubteacher Aug 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 45 additions & 1 deletion src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
import React from "react";
import Table from "./Table";
/*Add import statement here*/

class App extends React.Component {
constructor(props) {
super(props);

this.state = {
buttonClicked: "",
assignments: [],
assignments: [] /*Below this line, add the students state variable*/,
grades: {}
};

this.handleButtonClicked = this.handleButtonClicked.bind(this);
this.addAssignment = this.addAssignment.bind(this);
/*Uncomment the line below to bind the method*/
/*this.addStudent = this.addStudent.bind(this);*/
this.addGrade = this.addGrade.bind(this);
}

Expand All @@ -22,12 +25,15 @@ class App extends React.Component {
});
}

/*Check out this addAssignment method*/
addAssignment(assignmentName) {
this.setState({
assignments: this.state.assignments.concat(assignmentName)
});
}

/*Write an addStudent method here*/

addGrade(assignment, student, score) {
let grades = this.state.grades;
let assignmentName = assignment;
Expand All @@ -42,10 +48,48 @@ class App extends React.Component {
render() {
let tabChoice = <div />;

/*Uncomment below to render assignments*/
/*if (this.state.buttonClicked === "assignments") {
tabChoice = (
<List
placeholder="Add Assignment..."
currList={this.state.assignments}
addFunction={this.addAssignment}
title="Assignments"
/>
);
}*/

/* Change below to render students*/

/*if (this.state.buttonClicked === "students") {
tabChoice = (
<List
placeholder="Add Assignment..."
currList={this.state.assignments}
addFunction={this.addAssignment}
title="Student Roster"
/>
);
}*/

/* Uncomment lines below to render grades*/
/*if (this.state.buttonClicked === "grades") {
tabChoice = (
<Table
tableNames={this.state.assignments}
rows={this.state.students}
addFunction={this.addGrade}
data={this.state.grades}
/>
);
}*/

return (
<div>
<div className="Box Box--spacious f4">
<div className="Box-header">
{/* Replace this line with the proper header code*/}
</div>
Copy link

@github-learning-lab github-learning-lab bot Jan 6, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Step 2: Adding components

Let's add a child component and give our app a header. At the end of the step, your app should like the following:

App with header

⌨️ Activity: Add an h3 component to src/App.jsx

  1. In src/App.jsx, replace line 92 with this header component: 
    <h3 className="Box-title d-flex flex-justify-center">GradeBook</h3>
  2. Save your file
  3. To run the code, move inside the repository directory in your terminal and run npm start
  4. Exit the process in your terminal using Ctrl + C
  5. Stage, commit, and push your code to the changes branch: 
    git add src/App.jsx
git commit -m "add a header component"
git push

Watch below this comment for my response.

</div>
<nav className="UnderlineNav d-flex flex-justify-center">
Expand Down
3 changes: 2 additions & 1 deletion src/List.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ class List extends React.Component {
render() {
return (
<div className="col-6 mx-auto">
<p className="h2">REPLACE THIS TITLE WITH A PROP</p>
{/*Replace the code below to call the title prop*/}
<p className="h2">REPLACE THIS TITLE WITH A PROP</p>
<form onSubmit={this.handleSubmit}>
<label>
<input
Expand Down