Skip to content

Instantly share code, notes, and snippets.

/index.html

Created October 5, 2017 08:43
Show Gist options
  • Save anonymous/ff2aeb168daa93e7458fc02fa4aeda5e to your computer and use it in GitHub Desktop.
Save anonymous/ff2aeb168daa93e7458fc02fa4aeda5e to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/nurovogome
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
ul li {
list-style-type: none;
border:1px solid green;
padding: 10px;
}
.finished {
color:green;
}
.pending {
color:red;
}
.filter a {
text-decoration: none;
margin-left: 10px;
}
</style>
</head>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<body>
<div id="app">
</div>
<script id="jsbin-javascript">
const todos = [];
class Todo extends React.Component {
constructor() {
super();
this.state = {
todos:todos
};
this.addTodo = this.addTodo.bind(this);
this.toggleChange = this.toggleChange.bind(this);
}
addTodo(task) {
const newTodos = this.state.todos.concat({task:task,completed:false});
this.setState({
todos:newTodos
})
}
toggleChange(taskName) {
const toggled = this.state.todos.map((taskObj)=>{
if(taskObj.task==taskName) {
taskObj.completed = !taskObj.completed
}
return taskObj;
})
this.setState({
todos:toggled
})
}
render() {
return (
React.createElement("div", null,
React.createElement(NewTodo, {addTodo: this.addTodo}),
React.createElement(TodoList, {store: this.state.todos, toggleChange: this.toggleChange}),
React.createElement(TodoFilter, null)
)
)
}
}
class NewTodo extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
React.createElement("div", null,
React.createElement("input", {type: "text", ref: (input) => { this.textInput = input; }}),
React.createElement("button", {onClick: ()=>{this.props.addTodo(this.textInput.value)}}, "Add")
)
)
}
}
class TodoList extends React.Component {
constructor(props) {
super(props);
this.state = {
todos : this.props.store
}
}
render() {
const todos = this.props.store;
const toggleChange = this.props.toggleChange;
return (
React.createElement("ul", null,
todos.map((todo,index)=>React.createElement(TodoItem, React.__spread({toggleChange: toggleChange, key: index}, todo)))
)
)
}
}
class TodoItem extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
React.createElement("li", {className: (this.props.completed? 'finished' : 'pending')}, React.createElement("input", {type: "checkbox", onChange: ()=>{this.props.toggleChange(this.props.task)}, checked: this.props.completed}), this.props.task, " ")
)
}
}
class TodoFilter extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
React.createElement("div", {className: "filter"},
React.createElement("a", {href: "#"}, "Show Completed"), React.createElement("a", {href: "#"}, "Show InComplete")
)
)
}
}
ReactDOM.render(
React.createElement(Todo, null),
document.getElementById('app')
);
</script>
<script id="jsbin-source-css" type="text/css">ul li {
list-style-type: none;
border:1px solid green;
padding: 10px;
}
.finished {
color:green;
}
.pending {
color:red;
}
.filter a {
text-decoration: none;
margin-left: 10px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">const todos = [];
class Todo extends React.Component {
constructor() {
super();
this.state = {
todos:todos
};
this.addTodo = this.addTodo.bind(this);
this.toggleChange = this.toggleChange.bind(this);
}
addTodo(task) {
const newTodos = this.state.todos.concat({task:task,completed:false});
this.setState({
todos:newTodos
})
}
toggleChange(taskName) {
const toggled = this.state.todos.map((taskObj)=>{
if(taskObj.task==taskName) {
taskObj.completed = !taskObj.completed
}
return taskObj;
})
this.setState({
todos:toggled
})
}
render() {
return (
<div>
<NewTodo addTodo={this.addTodo} />
<TodoList store={this.state.todos} toggleChange={this.toggleChange} />
<TodoFilter />
</div>
)
}
}
class NewTodo extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<input type="text" ref={(input) => { this.textInput = input; }} />
<button onClick={()=>{this.props.addTodo(this.textInput.value)}}>Add</button>
</div>
)
}
}
class TodoList extends React.Component {
constructor(props) {
super(props);
this.state = {
todos : this.props.store
}
}
render() {
const todos = this.props.store;
const toggleChange = this.props.toggleChange;
return (
<ul>
{
todos.map((todo,index)=><TodoItem toggleChange={toggleChange} key={index} {...todo} />)
}
</ul>
)
}
}
class TodoItem extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<li className={(this.props.completed? 'finished' : 'pending')}><input type="checkbox" onChange={()=>{this.props.toggleChange(this.props.task)}} checked={this.props.completed} />{this.props.task} </li>
)
}
}
class TodoFilter extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="filter">
<a href="#" >Show Completed</a><a href="#">Show InComplete</a>
</div>
)
}
}
ReactDOM.render(
<Todo />,
document.getElementById('app')
);</script></body>
</html>
Raw
jsbin.nurovogome.css
ul li {
list-style-type: none;
border:1px solid green;
padding: 10px;
}
.finished {
color:green;
}
.pending {
color:red;
}
.filter a {
text-decoration: none;
margin-left: 10px;
}
Raw
jsbin.nurovogome.js
const todos = [];
class Todo extends React.Component {
constructor() {
super();
this.state = {
todos:todos
};
this.addTodo = this.addTodo.bind(this);
this.toggleChange = this.toggleChange.bind(this);
}
addTodo(task) {
const newTodos = this.state.todos.concat({task:task,completed:false});
this.setState({
todos:newTodos
})
}
toggleChange(taskName) {
const toggled = this.state.todos.map((taskObj)=>{
if(taskObj.task==taskName) {
taskObj.completed = !taskObj.completed
}
return taskObj;
})
this.setState({
todos:toggled
})
}
render() {
return (
React.createElement("div", null,
React.createElement(NewTodo, {addTodo: this.addTodo}),
React.createElement(TodoList, {store: this.state.todos, toggleChange: this.toggleChange}),
React.createElement(TodoFilter, null)
)
)
}
}
class NewTodo extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
React.createElement("div", null,
React.createElement("input", {type: "text", ref: (input) => { this.textInput = input; }}),
React.createElement("button", {onClick: ()=>{this.props.addTodo(this.textInput.value)}}, "Add")
)
)
}
}
class TodoList extends React.Component {
constructor(props) {
super(props);
this.state = {
todos : this.props.store
}
}
render() {
const todos = this.props.store;
const toggleChange = this.props.toggleChange;
return (
React.createElement("ul", null,
todos.map((todo,index)=>React.createElement(TodoItem, React.__spread({toggleChange: toggleChange, key: index}, todo)))
)
)
}
}
class TodoItem extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
React.createElement("li", {className: (this.props.completed? 'finished' : 'pending')}, React.createElement("input", {type: "checkbox", onChange: ()=>{this.props.toggleChange(this.props.task)}, checked: this.props.completed}), this.props.task, " ")
)
}
}
class TodoFilter extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
React.createElement("div", {className: "filter"},
React.createElement("a", {href: "#"}, "Show Completed"), React.createElement("a", {href: "#"}, "Show InComplete")
)
)
}
}
ReactDOM.render(
React.createElement(Todo, null),
document.getElementById('app')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment