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..3b761be36 100755 --- a/src/App.css +++ b/src/App.css @@ -31,3 +31,7 @@ transform: rotate(360deg); } } + +form{ + display: none; +} diff --git a/src/App.js b/src/App.js index 7e261ca47..8ac5e2231 100755 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,143 @@ 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 Search from './components/Search'; class App extends Component { + state = { + name: '', + calories: '', + image: '', + quantity: '0', + foods, + display: 'none', + valueGuai: '', + foodsToday: [], + totalCalories: '0' + } + + handleInputChange = (event) => { + const {name, value} = event.target; + this.setState({ + [name]: value + }) + } + + addFood = (event) => { + const {display} = this.state; + // event.preventDefault(); + const newDisplay = (display === 'block') ? 'none' : 'block'; + this.setState({ + display: newDisplay + }) + } + + handleSubmit = (event) => { + event.preventDefault(); + const {name, calories, image, quantity, foods} = this.state; + const newFoods = [...foods]; + const newFood = {name, calories, image, quantity}; + newFoods.push(newFood); + + this.setState({ + foods: newFoods, + name:'', + calories: '', + image:'' + }) + this.addFood(); + } + + compareValue = (newValue) => { + this.setState({ + valueGuai: newValue + }) + } + + addTodaysFood = (newTodayFood) => { + const {foodsToday} = this.state; + const newFoodsToday = [...foodsToday]; + newFoodsToday.push(newTodayFood); + const newTotalCalories = newTodayFood.newValue * newTodayFood.calories; + this.setState({ + name: newTodayFood.name, + calories: newTodayFood.calories, + quantity: newTodayFood.newValue, + foodsToday: newFoodsToday, + totalCalories: newTotalCalories + }) + } + + render() { + const {name, calories, image, foods, display, valueGuai, totalCalories} = this.state; return (
-
- logo -

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

- - Learn React - -
+ + +
+ + + + + + + + + +
+ +
+
+ { foods.map((food, index) => { + if(food.name.toLowerCase().includes(valueGuai)){ + return( + + ) + } else { + return null; + } + })} +
+
+

Today's food

+
    + {this.state.foodsToday.map((foodToday, index)=>{ + return( +
  • {foodToday.newValue} {foodToday.name} = {totalCalories}
    • + ) + }) + } +
+ +

Total calories: {totalCalories}

+
+ +
+ + + +
); } diff --git a/src/components/FoodBox.js b/src/components/FoodBox.js new file mode 100644 index 000000000..e837cd90f --- /dev/null +++ b/src/components/FoodBox.js @@ -0,0 +1,73 @@ +import React, { Component } from 'react' + +class FoodBox extends Component { + state = { + value: '0', + name: '', + calories: '', + } + + handleInputChange = (event) => { + const {name, value} = event.target; + this.setState({ + [name]: value + }) + } + + addQauntity = (event) => { + const {name, calories} = this.props.data; + const newValue = parseInt(event.target.parentElement.parentElement.children[0].children[0].value); + const newTodayFood = { newValue, name, calories}; + console.log(newTodayFood); + this.props.addParentTodayFood(newTodayFood); + this.setState({ + value: newValue, + }) + } + + + + render() { + const { name, calories, image } = this.props.data; + return ( +
+
+
+
+ {name}/ +
+
+
+
+

+ {name}
+ {calories} +

+
+
+
+
+
+ +
+
+ +
+
+
+
+
+ ) + } +} + +export default FoodBox; diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 000000000..5ab7d4a76 --- /dev/null +++ b/src/components/Search.js @@ -0,0 +1,24 @@ +import React, { Component } from 'react' + +class Search extends Component { + state = { + valueInput: '' + } + + searchFood = (event) => { + const newValue = event.target.value; + this.props.getvalue(newValue); + this.setState({ + valueInput: newValue + }) + } + + render() { + const {valueInput} = this.state; + return ( + + ) + } +} + +export default Search; 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';