From e398a7cb659227b29d45f62ebec0cbfe54ae5078 Mon Sep 17 00:00:00 2001 From: JuanAraneta Date: Sun, 14 May 2017 19:16:35 -0300 Subject: [PATCH 1/4] Create index.js --- 05-UI-ReactJS/index.js | 147 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 05-UI-ReactJS/index.js diff --git a/05-UI-ReactJS/index.js b/05-UI-ReactJS/index.js new file mode 100644 index 000000000..a987d2437 --- /dev/null +++ b/05-UI-ReactJS/index.js @@ -0,0 +1,147 @@ +let movies = (typeof localStorage["Movies"] != "undefined") ? JSON.parse(localStorage["Movies"]) : [ + {title: "Superman", duration: "123", year: "1998",index: 0}] + + class ElementoLista extends React.Component { + + constructor(props){ + super(props) + this.state = { + title: '', + duration: '', + year: '' + }, + this.deleteMovie = this.deleteMovie.bind(this), + this.handleChange = this.handleChange.bind(this) + + } + deleteMovie(index) + { + movies.splice(index,1) + update(); + this.setState + ({ + listaNombres: movies + }) + } + handleChange(event) + { + console.log(event.target.value) + var title2=this.setState({title: event.target.value}); + } + + render() { + return ( +
+
Title:{this.props.title}
+
Duration:{this.props.duration}
+
Year:{this.props.year}
+
+ + +
+
+ ) + } + } + class NameForm extends React.Component { + constructor(props) + { + super(props); + this.state = {title: '', + duration: '', + year: '', + listaNombres : this.props.rows}, + this.handleTitleChange = this.handleTitleChange.bind(this), + this.handleDurationChange = this.handleDurationChange.bind(this), + this.handleYearChange = this.handleYearChange.bind(this), + this.handleSubmit = this.handleSubmit.bind(this) + + } + + handleTitleChange(event) + { + var title=this.setState({title: event.target.value}); + } + + handleDurationChange(event) + { + var duration=this.setState({duration: event.target.value}); + } + + handleYearChange(event) + { + var year=this.setState({year: event.target.value}); + } + handleSubmit(event) + { + event.preventDefault(); + var title = document.getElementById("title").value; + var year = document.getElementById("year").value; + var duration = document.getElementById("duration").value; + + if (title.length < 1) title = "Untitled"; + movies.push({title: title, duration: duration, year: year}); + update(); + + this.setState + ({ + title: '', + duration:'', + year:'', + index:'', + listaNombres: movies + }) + + + } + + +render() { + console.log(this.state.listaNombres); +return ( +
+
+
+ + + + +
+
+
+ { + this.state.listaNombres.length>0 ?( + + this.state.listaNombres.map((movie) => { + return( +
+ +
+ ) + }) + ) + :
Agrega una pelicula!
+ } + + +
+
+ ); + } +} + +function update() { + + var rows = []; + for (var i=0; i < movies.length; i++) { + + rows.push( + {title: movies[i].title , duration: movies[i].duration, year: movies[i].year, index: i} + ); + + } + movies = rows; + localStorage.setItem("Movies", JSON.stringify(movies)); + ReactDOM.render(, document.getElementById("root")); +} +update(); From 232fb892bc82afa6e1ccfac69298d67f77f55b60 Mon Sep 17 00:00:00 2001 From: JuanAraneta Date: Sun, 14 May 2017 19:16:59 -0300 Subject: [PATCH 2/4] Create index.html --- 05-UI-ReactJS/index.html | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 05-UI-ReactJS/index.html diff --git a/05-UI-ReactJS/index.html b/05-UI-ReactJS/index.html new file mode 100644 index 000000000..c449a71b2 --- /dev/null +++ b/05-UI-ReactJS/index.html @@ -0,0 +1,2 @@ +Movie +
From b40aaf234c11c4168ce2681dfb901ec596a477a7 Mon Sep 17 00:00:00 2001 From: JuanAraneta Date: Sun, 14 May 2017 19:17:31 -0300 Subject: [PATCH 3/4] Create style.css --- 05-UI-ReactJS/style.css | 48 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 05-UI-ReactJS/style.css diff --git a/05-UI-ReactJS/style.css b/05-UI-ReactJS/style.css new file mode 100644 index 000000000..dd79cd3c5 --- /dev/null +++ b/05-UI-ReactJS/style.css @@ -0,0 +1,48 @@ +body { + font: 14px "Century Gothic", Futura, sans-serif; + margin: 20px; +} + +ol, ul { + padding-left: 30px; +} + +input, button { + display: inline-block; + vertical-align: middle; + padding: 5px 10px; + border: solid 1px #ccc; + margin-right: 5px; + border-radius: 5px; +} + +input[type="submit"], button { + background-color: #ccc; + color: #fff; + transition: all .3s; + cursor: pointer; +} + +input[type="submit"]:hover, button:hover { + color: #242424; + background-color: #fff; + box-shadow: 0 0 10px rgba(0,0,0,.1); +} + +.wrapper {display: block; padding-left: 0; overflow: hidden; padding: 20px 0;} +.wrapper > div {display: block; width: 100%; padding-left: 0; background-color: rgba(0,0,0,0.08); padding: 15px 0; padding-top: 8px;} +.wrapper > div:nth-child(2n) {background-color: rgba(0,0,0,0.02);} +.wrapper span {padding: 8px 0; display: inline-block;} + +.wrapper .item > div { + position: relative; + display: block; vertical-align: middle; + padding: 0 15px; + border-bottom: solid 1px rgba(0,0,0,.05); +} + +.wrapper .item > div:last-child { + border-bottom: none; + padding-top: 15px +} + From c3b8073b2b62ea16c740567956064f79713df921 Mon Sep 17 00:00:00 2001 From: JuanAraneta Date: Mon, 15 May 2017 10:48:24 -0300 Subject: [PATCH 4/4] Update index.js --- 05-UI-ReactJS/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/05-UI-ReactJS/index.js b/05-UI-ReactJS/index.js index a987d2437..fc1d885ee 100644 --- a/05-UI-ReactJS/index.js +++ b/05-UI-ReactJS/index.js @@ -43,7 +43,7 @@ let movies = (typeof localStorage["Movies"] != "undefined") ? JSON.parse(localSt ) } } - class NameForm extends React.Component { + class Layout extends React.Component { constructor(props) { super(props); @@ -142,6 +142,6 @@ function update() { } movies = rows; localStorage.setItem("Movies", JSON.stringify(movies)); - ReactDOM.render(, document.getElementById("root")); + ReactDOM.render(, document.getElementById("root")); } update();