diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3edc254 --- /dev/null +++ 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* \ No newline at end of file diff --git a/debug.log b/debug.log new file mode 100644 index 0000000..ef10cfa --- /dev/null +++ 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 new file mode 100644 index 0000000..48e341a --- /dev/null +++ b/package-lock.json @@ -0,0 +1,3 @@ +{ + "lockfileVersion": 1 +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..2e9b188 --- /dev/null +++ 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" + } +} \ No newline at end of file diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..1d29bcb Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..896161c --- /dev/null +++ b/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + Todo List ~ Luly + + + +
+ + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..ef19ec2 --- /dev/null +++ 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 new file mode 100644 index 0000000..4325808 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..394302e --- /dev/null +++ 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 ( +
+

Technical challenge of Itexico

+
+ + +
+
+ +
+
+ ); + } +} + +export default App; diff --git a/src/components/ButtonAdd.js b/src/components/ButtonAdd.js new file mode 100644 index 0000000..8b1f1fa --- /dev/null +++ b/src/components/ButtonAdd.js @@ -0,0 +1,14 @@ +import React from 'react'; +import '../App.css'; + +class BtnAdd extends React.Component{ + render() { + return ( + + ); + } +}; + +export default BtnAdd; \ No newline at end of file diff --git a/src/components/ButtonDelete.js b/src/components/ButtonDelete.js new file mode 100644 index 0000000..4e0d1fb --- /dev/null +++ b/src/components/ButtonDelete.js @@ -0,0 +1,14 @@ +import React from 'react'; +import '../App.css'; + +class BtnDelete extends React.Component{ + render() { + return ( + + ); + } +}; + +export default BtnDelete; \ No newline at end of file diff --git a/src/components/ButtonEdit.js b/src/components/ButtonEdit.js new file mode 100644 index 0000000..88176f0 --- /dev/null +++ b/src/components/ButtonEdit.js @@ -0,0 +1,14 @@ +import React from 'react'; +import '../App.css'; + +class BtnEdit extends React.Component{ + render() { + return ( + + ); + } +}; + +export default BtnEdit; \ No newline at end of file diff --git a/src/components/Items.js b/src/components/Items.js new file mode 100644 index 0000000..2a0ea5e --- /dev/null +++ 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 ( +
  • + + + + +
    • + ); + } +}; + +export default Items; diff --git a/src/components/List.js b/src/components/List.js new file mode 100644 index 0000000..4555f44 --- /dev/null +++ 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 ( +
    +

    {this.props.data}

    +
    +
      + +
    +
    +
    + ) + } +} + +export default List; \ No newline at end of file diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..78b7d68 --- /dev/null +++ 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 new file mode 100644 index 0000000..395b749 --- /dev/null +++ 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(, document.getElementById('root')); diff --git a/test/App.test.js b/test/App.test.js new file mode 100644 index 0000000..a754b20 --- /dev/null +++ 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(, div); + ReactDOM.unmountComponentAtNode(div); +});