itexico · LulyAtilano · Sep 20, 2018 · Sep 20, 2018 · Sep 20, 2018 · Sep 20, 2018
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,19 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
diff --git a/debug.log b/debug.log
@@ -0,0 +1,4 @@
+[0919/235656.673:ERROR:crash_report_database_win.cc(428)] unexpected header
+[0920/012102.096:ERROR:crash_report_database_win.cc(428)] unexpected header
+[0920/193219.427:ERROR:crash_report_database_win.cc(428)] unexpected header
+[0920/193355.482:ERROR:crash_report_database_win.cc(428)] unexpected header
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "itexico",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "react-scripts": "1.1.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!--<meta name="theme-color" content="#000000">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+    <title> Todo List ~ Luly </title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,103 @@
+/*  ***** APP  ***** */
+.App {
+    width: 100%;
+    height: 100vh;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    padding: 1em;
+}
+
+h1 {
+    color: white;
+    flex: 0;
+    margin: 0;
+    padding: .5em 2em;
+}
+
+.container-lists {
+    flex: 2;
+    padding: .5em;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-around;
+}
+
+.div-input-add {
+    width: 30%;
+    align-self: center;
+}
+
+input {
+    text-align: center;
+    flex: 0;
+    width: 80%;
+    align-self: center;
+}
+
+/* ***** LIST ***** */ 
+.List {
+    max-height: auto;
+    height: 6em;
+    width: 31%;
+    border: 1px solid white;
+    flex-direction: column;
+    box-sizing: border-box;
+    flex-wrap: wrap;
+}
+
+h3 {
+    margin: 0;
+    padding: .5em;
+    color: purple;
+}
+
+.container-items {
+    padding: .5em;
+}
+
+.container-items > ol {
+    margin: 0;
+    padding-left: 25px;
+    box-sizing: border-box;
+    display: flex;
+}
+
+/* ***** ITEMS ***** */ 
+.item {
+    text-align: left;
+    margin-left: 5px;
+    margin-top: 10px;
+    align-items: baseline;
+}
+
+.input-item {
+    width: 35%;
+    max-width: 50%;
+    height: auto;
+    background-color: transparent;
+    border: none;
+    flex: 1;
+    margin: 0;
+}
+
+.btn {
+    float: right;
+    margin-right: 8px;
+    background-color: transparent;
+    border: 1px solid white;
+    flex: 0;
+}
+
+.fa-pen {
+    color: blue;
+}
+
+.fa-trash-alt {
+    color: gray;
+}
+
+.fa-plus {
+    color: white;
+    margin-right: 0;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import List from './components/List';
+import BtnAdd from '../src/components/ButtonAdd';
+import './App.css';
+
+class App extends React.Component {
+  constructor(props){
+    super(props);
+
+    this.state = { 
+      data: [], 
+      text: '' 
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleChange(e) {
+    this.setState({ text: e.target.value });
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    if (!this.state.text.length) {
+      return;
+    }
+    const newList = {
+      text: this.state.text,
+      id: this.state.text.length
+    };
+    this.setState(state => ({
+      data: state.data.push(newList),
+      text: ''
+    }));
+  }
+
+  render() {
+    return (
+      <div className="App">
+        <h1> Technical challenge of Itexico </h1>
+        <div className="div-input-add" onSubmit={this.handleSubmit}> 
+          <input type="text" placeholder="Add a new list"
+            onChange={this.handleChange}
+            data={this.state.text}
+          />
+          <BtnAdd type="submit" onSubmit={this.handleSubmit}/>
+        </div>
+        <section className="container-lists">
+          <List data={this.state.data}/>
+        </section>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/components/ButtonAdd.js b/src/components/ButtonAdd.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import '../App.css';
+
+class BtnAdd extends React.Component{
+    render() { 
+        return ( 
+            <button className="btn" type="button">
+                <i className="fas fa-plus"></i>
+            </button>
+        );
+    }
+};
+
+export default BtnAdd;
diff --git a/src/components/ButtonDelete.js b/src/components/ButtonDelete.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import '../App.css';
+
+class BtnDelete extends React.Component{
+    render() { 
+        return ( 
+            <button className="btn" type="button">
+                <i className="fas fa-trash-alt"></i>
+            </button>
+        );
+    }
+};
+
+export default BtnDelete;
diff --git a/src/components/ButtonEdit.js b/src/components/ButtonEdit.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import '../App.css';
+
+class BtnEdit extends React.Component{
+    render() { 
+        return ( 
+            <button className="btn" type="button">
+                <i className="fas fa-pen"></i>
+            </button>
+        );
+    }
+};
+
+export default BtnEdit;
diff --git a/src/components/Items.js b/src/components/Items.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import BtnDelete from './ButtonDelete';
+import BtnAdd from './ButtonAdd';
+import BtnEdit from './ButtonEdit';
+import '../App.css';
+
+class Items extends React.Component { 
+    render() {
+        return (
+            <li className="item">
+                <input type="text" className="input-item"/>
+                <BtnAdd />
+                <BtnEdit/>
+                <BtnDelete/>
+            </li>
+        );
+    }
+};
+
+export default Items;
diff --git a/src/components/List.js b/src/components/List.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import Items from './Items';
+import '../App.css';
+
+class List extends React.Component {
+    render() {
+        return (
+            <div className="List">
+                <h3> {this.props.data} </h3>
+                <div className="container-items">
+                    <ol>
+                        <Items/>
+                    </ol>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default List;
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,9 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  text-align: center;
+  background: linear-gradient(to bottom left, #eda4f7, #9df3d6);
+  height: 100vh;
+  width: 100%;
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/test/App.test.js b/test/App.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});