diff --git a/package-lock.json b/package-lock.json index cc5ab3612..aca693cd0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2558,6 +2558,11 @@ "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz", "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=" }, + "bulma": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.5.tgz", + "integrity": "sha512-cX98TIn0I6sKba/DhW0FBjtaDpxTelU166pf7ICXpCCuplHWyu6C9LYZmL5PEsnePIeJaiorsTEzzNk3Tsm1hw==" + }, "bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", diff --git a/package.json b/package.json index 35c988ded..7db0418e1 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "bulma": "^0.7.5", "react": "^16.8.1", "react-dom": "^16.8.1", "react-scripts": "2.1.5" diff --git a/src/App.css b/src/App.css index b41d297ca..e3d165190 100755 --- a/src/App.css +++ b/src/App.css @@ -1,33 +1,46 @@ -.App { - text-align: center; +.container { + max-width: 900px; + margin-top: 30px; +} + +.search-bar { + margin-bottom: 30px; } -.App-logo { - animation: App-logo-spin infinite 20s linear; - height: 40vmin; - pointer-events: none; +.box { + padding: 0; + max-width: 400px; } -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; +.box .media { + -ms-flex-align: center; align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; } -.App-link { - color: #61dafb; +.box img { + height: 100%; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} + +.box input { + width: 100px; + text-align: center; + border: 0px white; + -webkit-box-shadow: inset 0 1px 2px white; + box-shadow: inset 0 1px 2px white; +} + +.box .button { + width: 64px; + font-size: 1.3em; +} + +.box input, +.box .button { + height: 64px; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +ul { + margin-bottom: 10px; } diff --git a/src/App.js b/src/App.js index 7e261ca47..090f9cd7e 100755 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,94 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; import './App.css'; +import foods from './data/foods.json'; +import FoodBox from './components/FoodBox'; +import AddNewFood from './components/AddNewFood'; +import SearchBar from './components/SearchBar'; +import TodaysFoodList from './components/TodaysFoodList'; class App extends Component { + constructor(props) { + super(props); + + this.state = { + foods: foods, + showForm: false, + todaysFoodList: [], + }; + } + + /*ITERATION 3 FUNCTIONS*/ + showForm = () => { + this.setState({ + showForm: true, + }); + }; + + hideForm = () => { + this.setState({ + showForm: false, + }); + }; + + addNewFood = food => { + this.setState({ + foods: [...this.state.foods, food], + }); + this.hideForm(); + }; + + /*ITERATION 4 FUNCTION*/ + searchBar = query => { + const searchedFoods = foods.filter(food => { + return food.name.toLowerCase().search(query.toLowerCase()) !== -1; + }); + this.setState({ + foods: [...searchedFoods], + }); + }; + + /*ITERATION 5 FUNCTION*/ + addFoodToList = food => { + this.setState({ + todaysFoodList: [...this.state.todaysFoodList, food], + }); + }; + + /*ITERATION 7 FUNCTION*/ + removeFoodItem = foodIndex => { + this.state.todaysFoodList.splice(foodIndex, 1); + this.setState({ + todaysFoodList: this.state.todaysFoodList, + }); + }; render() { return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
+

List of Foods

+ +
+ + {this.state.showForm && } +
+ {this.state.foods.map((food, index) => { + return ( + + ); + })} +
+
); } diff --git a/src/components/AddNewFood.js b/src/components/AddNewFood.js new file mode 100644 index 000000000..a129895ac --- /dev/null +++ b/src/components/AddNewFood.js @@ -0,0 +1,91 @@ +import React, { Component } from 'react'; + +export default class AddNewFood extends Component { + constructor(props) { + super(props); + + this.state = { + name: '', + calories: '', + image: '', + quantity: '', + }; + } + + handleNameInput = e => { + this.setState({ + name: e.target.value, + }); + }; + + handleCaloriesInput = e => { + this.setState({ + calories: e.target.value, + }); + }; + + handleImageInput = e => { + this.setState({ + image: e.target.value, + }); + }; + + handleQuantityInput = e => { + this.setState({ + quantity: e.target.value, + }); + }; + + handleFormSubmit = e => { + e.preventDefault(); + this.props.addNew(this.state); + this.setState({ + name: '', + calories: '', + quantity: '', + image: '', + }); + }; + + render() { + return ( +
+
+ + +
+ + +
+ + +
+ + +
+ +
+
+ ); + } +} diff --git a/src/components/FoodBox.css b/src/components/FoodBox.css new file mode 100644 index 000000000..e3d165190 --- /dev/null +++ b/src/components/FoodBox.css @@ -0,0 +1,46 @@ +.container { + max-width: 900px; + margin-top: 30px; +} + +.search-bar { + margin-bottom: 30px; +} + +.box { + padding: 0; + max-width: 400px; +} + +.box .media { + -ms-flex-align: center; + align-items: center; +} + +.box img { + height: 100%; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} + +.box input { + width: 100px; + text-align: center; + border: 0px white; + -webkit-box-shadow: inset 0 1px 2px white; + box-shadow: inset 0 1px 2px white; +} + +.box .button { + width: 64px; + font-size: 1.3em; +} + +.box input, +.box .button { + height: 64px; +} + +ul { + margin-bottom: 10px; +} diff --git a/src/components/FoodBox.js b/src/components/FoodBox.js new file mode 100644 index 000000000..0f13917b7 --- /dev/null +++ b/src/components/FoodBox.js @@ -0,0 +1,64 @@ +import React, { Component } from 'react'; +import './FoodBox.css'; + +export default class FoodBox extends Component { + constructor(props) { + super(props); + + this.state = { + quantity: this.props.quantity, + }; + } + + handleChange = e => { + this.setState({ + quantity: e.target.value, + }); + }; + + handleClick = e => { + const AddedFood = Object.assign({}, this.props.food); + this.props.addToList(AddedFood); + }; + + render() { + const { name, calories, image } = this.props; + + return ( +
+
+
+
+ +
+
+
+
+

+ {name}
+ {calories} +

+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ ); + } +} diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js new file mode 100644 index 000000000..e20046942 --- /dev/null +++ b/src/components/SearchBar.js @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; + +export default class SearchBar extends Component { + handleChange = e => { + this.props.searchBar(e.target.value); + }; + + render() { + return ( +
+ +
+ ); + } +} diff --git a/src/components/TodaysFoodItem.js b/src/components/TodaysFoodItem.js new file mode 100644 index 000000000..91ad48f2f --- /dev/null +++ b/src/components/TodaysFoodItem.js @@ -0,0 +1,21 @@ +import React, { Component } from 'react'; + +export default class TodaysFoodItem extends Component { + render() { + const { name, calories, quantity } = this.props; + return ( +
  • +
    + {quantity} {name} = {calories} cal + +
    +
    • + ); + } +} diff --git a/src/components/TodaysFoodList.js b/src/components/TodaysFoodList.js new file mode 100644 index 000000000..9393f445f --- /dev/null +++ b/src/components/TodaysFoodList.js @@ -0,0 +1,26 @@ +import React, { Component } from 'react'; +import TodaysFoodItem from './TodaysFoodItem'; + +export default class TodaysFoodList extends Component { + render() { + return ( +
    +

    Today's foods

    + +
    + ); + } +} diff --git a/src/index.js b/src/index.js index 0c5e75da1..c2c9c4b2d 100755 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; +import 'bulma/css/bulma.css'; import App from './App'; import * as serviceWorker from './serviceWorker';