Recipe Box

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Recipe Box</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div class="row">
  <div class="col-xs-2"></div>
  <div id="main" class="col-xs-8 well"></div>
  <div class="col-xs-2"></div>
</div>


<div class="col-xs-2"></div>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add a Recipe</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Add a Recipe</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label>Name:</label>
              <input type="text" placeholder="Recipe Name" class="form-control" id="Name">
            </div>
            <div class="form-group">
              <label>Ingredients:</label>
              <input type="text" placeholder="Enter Ingredients separated by Commas"  class="form-control" id="form-ingredients">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default btn-info" class="Save">Save</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

  

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




</body>

</html>

/*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"));

Comments