Build A Recipe Box (ReactJS)

In this example below you will see how to do a Build A Recipe Box (ReactJS) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by kallaway, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kallaway ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Build A Recipe Box (ReactJS)</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="root"></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/kallaway/build-a-recipe-box-reactjs-wgjzGb */
body {
  background-color: #DDDDDD;
  font-size: 1.2em;
  color: #001f3f;
  display: flex;
  justify-content: center;
}

a {
  text-decoration: none;
  color: #001f3f;
}

.App {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.IndexView {
  border-radius: 7px;
  min-width: 600px;
  width: 100%;
  background-color: #7FDBFF;
  display: flex;
  flex-direction: column;
}
.IndexView ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
}
.IndexView ul li {
  margin: 10px 0;
}

.AddRecipe {
  border: none;
  border-radius: 15px;
  margin: 10px;
  width: 200px;
  height: 50px;
  font-size: 0.7em;
  background-color: #001f3f;
  color: #7FDBFF;
  cursor: pointer;
}

.AddRecipe:hover {
  background-color: #7FDBFF;
  color: #001f3f;
}

.hidden-details {
  width: 90%;
  background-color: #DDDDDD;
}
.hidden-details h2 {
  padding-top: 2%;
  margin: 3px;
}
.hidden-details ul {
  margin: 0px 0px;
  padding: 5%;
  background-color: #AAA;
}
.hidden-details ul li {
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
  background-color: #3D9970;
}

button {
  width: 90px;
  height: 30px;
  font-size: 0.8em;
}

#new-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.new-recipe-form {
  position: absolute;
  margin-top: 200px;
  padding: 0 15px;
  width: 50%;
  background-color: #AAA;
  z-index: 3;
}

.close-form {
  cursor: pointer;
}


/*Downloaded from https://www.codeseek.co/kallaway/build-a-recipe-box-reactjs-wgjzGb */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

// import { Component } from 'react';

var localStorageTest = localStorage;

localStorageTest = [{
  name: 'Pumpkin Pie',
  ingredients: ['Pumpkin Puree', 'Sweetened Condensed Milk', 'Eggs', 'Pumpkin Pie Spice', 'Pie Crust']
}, {
  name: 'Spaghetti',
  ingredients: ['Noodles', 'Tomato Sauce', '(Optional) Meatballs']
}, {
  name: 'Onion Pie',
  ingredients: ['Onion', 'Pie Crust', 'Sounds Yummy right?']
}];

var App = function (_React$Component) {
  _inherits(App, _React$Component);

  function App() {
    _classCallCheck(this, App);

    return _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).apply(this, arguments));
  }

  _createClass(App, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        { className: 'App' },
        React.createElement('div', { id: 'new-container' }),
        React.createElement(
          'h1',
          null,
          'Recipe Box App'
        ),
        React.createElement(IndexView, null),
        React.createElement(AddRecipe, null)
      );
    }
  }]);

  return App;
}(React.Component);

var IndexView = function (_React$Component2) {
  _inherits(IndexView, _React$Component2);

  function IndexView() {
    _classCallCheck(this, IndexView);

    return _possibleConstructorReturn(this, (IndexView.__proto__ || Object.getPrototypeOf(IndexView)).call(this));
  }

  _createClass(IndexView, [{
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        { className: 'IndexView' },
        React.createElement(
          'ul',
          { id: 'IndexViewList' },
          localStorageTest.map(function (item) {
            return (
              // <li>{item.name}</li>
              React.createElement(RecipeListing, { name: item.name, ingredients: item.ingredients })
            );
          })
        )
      );
    }
  }]);

  return IndexView;
}(React.Component);

var RecipeListing = function (_React$Component3) {
  _inherits(RecipeListing, _React$Component3);

  function RecipeListing() {
    _classCallCheck(this, RecipeListing);

    var _this3 = _possibleConstructorReturn(this, (RecipeListing.__proto__ || Object.getPrototypeOf(RecipeListing)).call(this));

    _this3.state = {
      detailsHidden: true
    };
    return _this3;
  }

  _createClass(RecipeListing, [{
    key: 'toggleDetails',
    value: function toggleDetails(e) {
      this.setState = {
        detailsHidden: !this.state.detailsHidden
      };
    }
  }, {
    key: 'render',
    value: function render() {
      return React.createElement(
        'li',
        null,
        React.createElement(
          'div',
          null,
          React.createElement(
            'a',
            { className: '', href: '#', onClick: this.toggleDetails.bind(this) },
            this.props.name
          )
        ),
        React.createElement(RecipeDetails, { ingredients: this.props.ingredients })
      );
    }
  }]);

  return RecipeListing;
}(React.Component);

var RecipeDetails = function (_React$Component4) {
  _inherits(RecipeDetails, _React$Component4);

  function RecipeDetails(props) {
    _classCallCheck(this, RecipeDetails);

    var _this4 = _possibleConstructorReturn(this, (RecipeDetails.__proto__ || Object.getPrototypeOf(RecipeDetails)).call(this, props));

    _this4.handleEdit = _this4.handleEdit.bind(_this4);
    _this4.handleDelete = _this4.handleDelete.bind(_this4);
    return _this4;
  }

  _createClass(RecipeDetails, [{
    key: 'handleEdit',
    value: function handleEdit() {}
  }, {
    key: 'handleDelete',
    value: function handleDelete() {}
  }, {
    key: 'render',
    value: function render() {
      return React.createElement(
        'div',
        { className: 'hidden-details' },
        React.createElement(
          'h2',
          null,
          'Ingredients'
        ),
        React.createElement(
          'ul',
          null,
          this.props.ingredients.map(function (item) {
            return React.createElement(
              'li',
              null,
              React.createElement(
                'p',
                null,
                item
              )
            );
          })
        ),
        React.createElement(
          'div',
          { className: 'details-footer' },
          React.createElement(
            'button',
            { className: 'delete-btn', onClick: this.handleDelete },
            'Delete'
          ),
          React.createElement(
            'button',
            { className: 'edit-btn', onClick: this.handleEdit },
            'Edit'
          )
        )
      );
    }
  }]);

  return RecipeDetails;
}(React.Component);

var AddRecipe = function (_React$Component5) {
  _inherits(AddRecipe, _React$Component5);

  function AddRecipe() {
    _classCallCheck(this, AddRecipe);

    return _possibleConstructorReturn(this, (AddRecipe.__proto__ || Object.getPrototypeOf(AddRecipe)).call(this));
  }

  _createClass(AddRecipe, [{
    key: 'openRecipeForm',
    value: function openRecipeForm() {
      ReactDOM.render(React.createElement(NewRecipeForm, null), document.getElementById('new-container'));
    }
  }, {
    key: 'render',
    value: function render() {
      return React.createElement(
        'button',
        { className: 'AddRecipe', onClick: this.openRecipeForm },
        'Add Recipe'
      );
    }
  }]);

  return AddRecipe;
}(React.Component);

var RecipeCard = function (_React$Component6) {
  _inherits(RecipeCard, _React$Component6);

  function RecipeCard() {
    _classCallCheck(this, RecipeCard);

    return _possibleConstructorReturn(this, (RecipeCard.__proto__ || Object.getPrototypeOf(RecipeCard)).apply(this, arguments));
  }

  _createClass(RecipeCard, [{
    key: 'render',
    value: function render() {
      return React.createElement('div', { className: 'RecipeCard' });
    }
  }]);

  return RecipeCard;
}(React.Component);

var NewRecipeForm = function (_React$Component7) {
  _inherits(NewRecipeForm, _React$Component7);

  function NewRecipeForm() {
    _classCallCheck(this, NewRecipeForm);

    var _this7 = _possibleConstructorReturn(this, (NewRecipeForm.__proto__ || Object.getPrototypeOf(NewRecipeForm)).call(this));

    _this7.state = {
      inputText: '',
      textareaText: ''
    };
    return _this7;
  }

  _createClass(NewRecipeForm, [{
    key: 'closeNewRecipeForm',
    value: function closeNewRecipeForm() {
      ReactDOM.unmountComponentAtNode(document.getElementById('new-container'));
    }
  }, {
    key: 'render',
    value: function render() {
      var _this8 = this;

      return React.createElement(
        'div',
        { className: 'new-recipe-form' },
        React.createElement(
          'div',
          { id: 'new-recipe-header' },
          React.createElement(
            'p',
            null,
            'Add a Recipe'
          ),
          React.createElement('i', { className: 'fa fa-times close-form', 'aria-hidden': 'true', onClick: this.closeNewRecipeForm })
        ),
        React.createElement(
          'div',
          null,
          React.createElement(
            'p',
            null,
            'Recipe'
          ),
          React.createElement('input', { type: 'text',
            placeholder: 'Recipe Name',
            value: this.state.inputText,
            onChange: function onChange(event) {
              return _this8.setState({ inputText: event.target.value });
            } })
        ),
        React.createElement(
          'div',
          null,
          React.createElement(
            'p',
            null,
            'Ingredients'
          ),
          React.createElement('textarea', {
            placeholder: 'Enter ingredients, Separated, By commas',
            value: this.state.textareaText,
            onChange: function onChange(event) {
              return _this8.setState({ textareaText: event.target.value });
            } })
        ),
        React.createElement(
          'div',
          { id: 'new-recipe-footer' },
          React.createElement(
            'p',
            null,
            'Add a Recipe'
          )
        )
      );
    }
  }]);

  return NewRecipeForm;
}(React.Component);

// const AddRecipe = (props) => return <button>22</button>

ReactDOM.render(React.createElement(App, null), document.getElementById("root"));

Comments