Recipe Box

/*Downloaded from https://www.codeseek.co/11abdullah11/recipe-box-OjxOYa */
#main{
  top:10vh;
}
.recipe{
  background-color:#ccffcc;
  margin-bottom:0px;
  padding:1.5%;
}
.ing-head{
  margin-top:-1px;
  background:#fff;
}
.Ing{
  padding:1.9%;
  border-bottom:1px solid #aaaaaa; 
}
.ing-well{
  padding:0px;
}
.btn-lg{
  margin-top:10vh;
}
.btn{
  margin-right:1%;
}

/*Downloaded from https://www.codeseek.co/11abdullah11/recipe-box-OjxOYa */
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; }

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

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

    var _this = _possibleConstructorReturn(this, (RecipeBox.__proto__ || Object.getPrototypeOf(RecipeBox)).call(this, props));

    _this.save = function () {
      var naam = $("#name").val();
      var Ing_comma = $("#form-ingredients").val();
      console.log(naam);
    };

    _this.state = {
      Recipes: [{ name: "Spaghetti", ingredient: ["ASd", "asdsa"] }, { name: "asd", ingredient: ["ASd", "asdsa"] }]
    };
    return _this;
  }

  _createClass(RecipeBox, [{
    key: "returnFun",
    value: function returnFun() {
      var temp = [];
      for (var i = 0; i < this.state.Recipes.length; i++) {
        var tempa = React.createElement(Recipe, { name: this.state.Recipes[i].name, ingredients: this.state.Recipes[i].ingredient });
        temp.push(tempa);
      }
      return temp;
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        null,
        React.createElement(
          "div",
          null,
          this.returnFun()
        ),
        React.createElement("div", { className: "Save", onClick: this.save })
      );
    }
  }]);

  return RecipeBox;
}(React.Component);

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

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

    var _this2 = _possibleConstructorReturn(this, (Recipe.__proto__ || Object.getPrototypeOf(Recipe)).call(this, props));

    _this2.handleClick = function (e) {
      console.log(this);
      e.preventDefault();
      if (this.state.display === "name") {
        this.setState({
          display: "full"
        });
      } else {
        this.setState({
          display: "name"
        });
      }
    };

    _this2.state = {
      name: props.name,
      ingredients: props.ingredients,
      display: "name"
    };
    _this2.handleClick = _this2.handleClick.bind(_this2);

    return _this2;
  }

  _createClass(Recipe, [{
    key: "ingredient",
    value: function ingredient() {
      var tempo = [];
      for (var i = 0; i < this.state.ingredients.length; i++) {
        tempo.push(React.createElement(
          "div",
          { className: "Ing" },
          this.state.ingredients[i]
        ));
      }
      return tempo;
    }
  }, {
    key: "render",
    value: function render() {
      if (this.state.display === "full") {
        return React.createElement(
          "div",
          null,
          React.createElement(
            "div",
            { className: "recipe well" },
            React.createElement(
              "a",
              { onClick: this.handleClick, href: "#" },
              this.state.name
            )
          ),
          React.createElement(
            "div",
            { className: "ing-head well" },
            React.createElement(
              "h4",
              { className: "text-center" },
              "Ingredients"
            ),
            React.createElement("hr", null),
            React.createElement(
              "div",
              { className: "ing-well well" },
              this.ingredient()
            ),
            React.createElement(
              "div",
              { className: "text-left" },
              React.createElement(
                "button",
                { className: "btn btn-defualt btn-danger" },
                "Delete"
              ),
              React.createElement(
                "button",
                { className: "btn btn-defualt btn-info" },
                "Edit"
              )
            )
          )
        );
      } else {
        return React.createElement(
          "div",
          null,
          React.createElement(
            "div",
            { className: "recipe well" },
            React.createElement(
              "a",
              { onClick: this.handleClick, href: "#" },
              this.state.name
            )
          )
        );
      }
    }
  }]);

  return Recipe;
}(React.Component);

ReactDOM.render(React.createElement(RecipeBox, null), document.getElementById("main"));