Skip to content

Instantly share code, notes, and snippets.

@btownrippleman

btownrippleman/index.html

Last active March 13, 2020 21:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save btownrippleman/c9da00a74424ad0723053f4e1a6b18f5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save btownrippleman/c9da00a74424ad0723053f4e1a6b18f5 to your computer and use it in GitHub Desktop.
Download ZIP
React List Grades App
Raw
index.html
<div>
<div class="row">
<div class="col"></div>
<div class="col-10" id="container" class="container"></div>
<div class="col">
</div>
</div>
</div>
Raw
script.babel
var CONTACTS = {"class": {"student": [ { "firstname": "Naman", "subject": "Math", "id": 101, "marks": 83, "lastname": "Kumar" }, { "firstname": "Kapil", "subject": "Chemistry", "id": 102, "marks": 60, "lastname": "Kumar" }, { "firstname": "Harsh", "subject": "English", "id": 103, "marks": 70, "lastname": "Singh" }, { "firstname": "Jitesh", "subject": "Physics", "id": 104, "marks": 76, "lastname": "Singh" } ]}}
class ContactRow extends React.Component {
render() {
return (
<tr>
<td>{this.props.contact["firstname"]}</td>
<td>{this.props.contact["lastname"]}</td>
<td>{this.props.contact["subject"]}</td>
<td>{this.props.contact["id"]}</td>
<td>{this.props.contact["marks"]}</td>
</tr>
);
}
}
class ContactTable extends React.Component {
render() {
var rows = [];
this.props.contacts.forEach(( contact, index) => {
if (contact.firstname.indexOf(this.props.filterText) === -1) {
return;
}
rows.push(<ContactRow key={index} contact={contact} />);
});
return (
<table className='table table-hover'>
<thead>
<tr>
<th><i className="fa fa-fw "></i>FirstName</th>
<th><i className="fa fa-fw "></i>LastName</th>
<th><i className="fa fa-fw "></i>Subject</th>
<th><i className="fa fa-fw "></i>ID</th>
<th><i className="fa fa-fw "></i>Grade</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
}
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.handleFilterTextInputChange = this.handleFilterTextInputChange.bind(this);
}
handleFilterTextInputChange(e) {
this.props.onFilterTextInput(e.target.value);
}
render() {
return (
<form>
<input
className="form-control"
type="text"
placeholder="Search..."
value={this.props.filterText}
onChange={this.handleFilterTextInputChange}
/>
</form>
);
}
}
class FilterableContactTable extends React.Component {
constructor(props) {
super(props);
// FilterableContactTable is the owner of the state as the filterText is needed in both nodes (searchbar and table) that are below in the hierarchy tree.
this.state = {
filterText: '',
contacts : CONTACTS.class.student
};
this.handleFilterTextInput = this.handleFilterTextInput.bind(this);
this.addContact = this.addContact.bind(this);
}
addContact(contact) {
var timestamp = new Date().getTime();
contact['key'] = timestamp;
console.log('BEFORE: this.state.contacts: '+ this.state.contacts.length);
// update the state object
this.state.contacts.push(contact);
// set the state
this.setState({ contacts: this.state.contacts });
}
handleFilterTextInput(filterText) {
//Call to setState to update the UI
this.setState({
filterText: filterText
});
//React knows the state has changed, and calls render() method again to learn what should be on the screen
}
render() {
return (
<div>
<h1>Grade App</h1>
<SearchBar
filterText={this.state.filterText}
onFilterTextInput={this.handleFilterTextInput}
/>
<NewContactRow addContact={this.addContact}/>
<ContactTable
contacts={this.state.contacts}
filterText={this.state.filterText}
/>
</div>
);
}
}
class NewContactRow extends React.Component {
constructor(props){
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
const target = event.target;
const name = target.name.value;
const phone = target.phone.value;
const email = target.email.value;
var contact = {
name : name,
phone : phone,
email : email
};
this.props.addContact(contact);
}
render(){
return (
<form className="form-inline" onSubmit={this.handleSubmit}>
<div className="form-group row">
<div className="col-md-2">
<input type="text" name="name" className="form-control" id="firstName" placeholder="First" />
</div>
<div className="col-md-2">
<input type="text" name="phone" className="form-control" id="lastName" placeholder="Last" />
</div>
<div className="col-md-2">
<input type="text" name="email" className="form-control" id="subject" placeholder="Subject" />
</div>
<div className="col-md-2">
<input type="text" name="email" className="form-control" id="id" placeholder="id" />
</div>
<div className="col-md-2">
<input type="text" name="email" className="form-control" id="grade" placeholder="Grade" />
</div>
<div className="col-md-2">
<button type="submit" className="btn btn-primary"><i className="fa fa-fw fa-plus"></i>Add</button>
</div>
</div>
</form>
)
}
}
ReactDOM.render(
<FilterableContactTable contacts={CONTACTS} />,
document.getElementById('container')
);
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
Raw
style.css
body {
padding: 40px 20% 20px 10%;
}
h1 {
padding: 20px 0;
font-size: 2.5em;
text-align: left;
}
.table, .form-inline {
text-align:left;
margin-top: 20px;
}
input {
margin: 0 12px 0 0;
}
.container {
background: rgba(255, 255, 255, 0.65);
}
th { text-align: left;}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment