Skip to content

Instantly share code, notes, and snippets.

@HectorBlisS

HectorBlisS/index.html

Created October 24, 2017 14:38
Show Gist options
  • Save HectorBlisS/5826b080619ea9efdd1f1717b0ded090 to your computer and use it in GitHub Desktop.
Save HectorBlisS/5826b080619ea9efdd1f1717b0ded090 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/fesazab
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="root"></div>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.js"></script>
<script id="jsbin-javascript">
//reducer
"use strict";
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
function todos(state, action) {
if (state === undefined) state = [];
switch (action.type) {
case "ADD_TODO":
return [action.todo].concat(_toConsumableArray(state));
case "TACHA_TODO":
return state.map(function (t) {
if (t.id === action.todo.id) return _extends({}, action.todo, { tachado: !action.todo.tachado });
return t;
});
case "REMOVE_TODO":
return state.filter(function (t) {
return t.id !== action.todo.id;
});
default:
return state;
}
}
//store
var _Redux = Redux;
var createStore = _Redux.createStore;
var store = createStore(todos);
//action creators
function agregar() {
store.dispatch({
type: "ADD_TODO",
todo: {
text: input,
id: input,
tachado: false }
});
}
function tachar(todo) {
store.dispatch({
type: "TACHA_TODO",
todo: todo
});
}
var input = undefined;
function escritura(e) {
input = e.target.value;
}
function borrar(todo) {
store.dispatch({
type: "REMOVE_TODO",
todo: todo
});
}
//componente con props
var Lista = function Lista(_ref) {
var lista = _ref.lista;
return React.createElement(
"div",
null,
React.createElement("input", {
type: "text",
onChange: escritura }),
React.createElement(
"button",
{ onClick: agregar },
"Agregar"
),
React.createElement(
"ul",
null,
lista.map(function (t) {
return React.createElement(
"li",
null,
React.createElement(
"span",
{ style: t.tachado ? styles.tachado : null, onClick: function () {
return tachar(t);
} },
t.text
),
" ",
React.createElement(
"button",
{ onClick: function () {
return borrar(t);
} },
"X"
)
);
})
)
);
};
//app
var App = function App() {
return React.createElement(
"div",
null,
React.createElement(
"h2",
null,
"BlisS"
),
React.createElement(Lista, { lista: store.getState() })
);
};
//estilos
var styles = {
tachado: {
textDecoration: "line-through",
cursor: "pointer"
}
};
//render
function render() {
console.log(store.getState());
ReactDOM.render(React.createElement(App, null), document.getElementById("root"));
}
render();
//subscribe
store.subscribe(render);
</script>
<script id="jsbin-source-javascript" type="text/javascript">//reducer
function todos(state=[], action){
switch(action.type){
case "ADD_TODO":
return [action.todo, ...state];
case "TACHA_TODO":
return state.map(t=>{
if(t.id === action.todo.id) return {...action.todo, tachado:!action.todo.tachado};
return t;
})
case "REMOVE_TODO":
return state.filter(t=>{
return t.id !== action.todo.id
});
default:
return state;
}
}
//store
const {createStore} = Redux;
const store = createStore(todos);
//action creators
function agregar(){
store.dispatch( {
type:"ADD_TODO",
todo:{
text:input,
id:input,
tachado:false}
} );
}
function tachar(todo){
store.dispatch(
{
type:"TACHA_TODO",
todo
}
);
}
let input;
function escritura(e){
input = e.target.value;
}
function borrar(todo){
store.dispatch({
type:"REMOVE_TODO",
todo
});
}
//componente con props
const Lista = ({lista}) => (
<div>
<input
type="text"
onChange={escritura} />
<button onClick={agregar}>
Agregar
</button>
<ul>
{lista.map(t=>{
return(
<li>
<span style={t.tachado ? styles.tachado:null} onClick={()=>tachar(t)} >
{t.text}
</span> <button onClick={()=>borrar(t)}>X</button>
</li>
);
})}
</ul>
</div>
);
//app
const App = () => (
<div>
<h2>BlisS</h2>
<Lista lista={store.getState()} />
</div>
);
//estilos
const styles = {
tachado:{
textDecoration:"line-through",
cursor:"pointer"
}
}
//render
function render(){
console.log(store.getState())
ReactDOM.render(<App/>, document.getElementById("root"));
}
render();
//subscribe
store.subscribe(render);
</script></body>
</html>
Raw
jsbin.fesazab.js
//reducer
"use strict";
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
function todos(state, action) {
if (state === undefined) state = [];
switch (action.type) {
case "ADD_TODO":
return [action.todo].concat(_toConsumableArray(state));
case "TACHA_TODO":
return state.map(function (t) {
if (t.id === action.todo.id) return _extends({}, action.todo, { tachado: !action.todo.tachado });
return t;
});
case "REMOVE_TODO":
return state.filter(function (t) {
return t.id !== action.todo.id;
});
default:
return state;
}
}
//store
var _Redux = Redux;
var createStore = _Redux.createStore;
var store = createStore(todos);
//action creators
function agregar() {
store.dispatch({
type: "ADD_TODO",
todo: {
text: input,
id: input,
tachado: false }
});
}
function tachar(todo) {
store.dispatch({
type: "TACHA_TODO",
todo: todo
});
}
var input = undefined;
function escritura(e) {
input = e.target.value;
}
function borrar(todo) {
store.dispatch({
type: "REMOVE_TODO",
todo: todo
});
}
//componente con props
var Lista = function Lista(_ref) {
var lista = _ref.lista;
return React.createElement(
"div",
null,
React.createElement("input", {
type: "text",
onChange: escritura }),
React.createElement(
"button",
{ onClick: agregar },
"Agregar"
),
React.createElement(
"ul",
null,
lista.map(function (t) {
return React.createElement(
"li",
null,
React.createElement(
"span",
{ style: t.tachado ? styles.tachado : null, onClick: function () {
return tachar(t);
} },
t.text
),
" ",
React.createElement(
"button",
{ onClick: function () {
return borrar(t);
} },
"X"
)
);
})
)
);
};
//app
var App = function App() {
return React.createElement(
"div",
null,
React.createElement(
"h2",
null,
"BlisS"
),
React.createElement(Lista, { lista: store.getState() })
);
};
//estilos
var styles = {
tachado: {
textDecoration: "line-through",
cursor: "pointer"
}
};
//render
function render() {
console.log(store.getState());
ReactDOM.render(React.createElement(App, null), document.getElementById("root"));
}
render();
//subscribe
store.subscribe(render);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment