-
-
Save SivaCse/0129c536634cfb8e26b2c8b374338118 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/nurovogome
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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