Recipe Box

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

Recipe Box made for freeCodeCamp using React and React-Bootstrap, and written in TSX.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Recipe Box</title>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Tinos'>

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

  
</head>

<body>

  <div id="root"></div>
<!-- source: https://github.com/r3b311i0n/recipe-box -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.8/react-bootstrap.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/r3b311i0n/recipe-box-wJEYKW */
.App-heading {
    text-align: center;
}.Ingredients {
    font-size: 2rem;
}

.Recipe-item {
    font-size: 3rem;
    width: 100%;
}.Edit-recipe-dialog-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.Confirm-dialog-btn {
    width: 12rem;
}

.Cancel-dialog-btn {
    width: 12rem;
}

.Edit-recipe-form {
    font-size: 1.9rem;
}.Dialog-btn {
    font-size: 1.7rem;
    height: 2.7em;
    width: 7em;
}

.Edit-recipe-btn-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    margin-top: 2rem;
    width: 100%;
}.Recipe-dialog-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.Add-dialog-btn {
    width: 12rem;
}

.Close-dialog-btn {
    width: 12rem;
}

.Add-recipe-form {
    font-size: 1.9rem;
}body {
    font-family: 'Tinos', serif;
}
/*# sourceMappingURL=styles.css.map*/

/*Downloaded from https://www.codeseek.co/r3b311i0n/recipe-box-wJEYKW */
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId])
/******/ 			return installedModules[moduleId].exports;
/******/
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			exports: {},
/******/ 			id: moduleId,
/******/ 			loaded: false
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.loaded = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "/dist/";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

	"use strict";
	Object.defineProperty(exports, "__esModule", { value: true });
	var React = __webpack_require__(1);
	var ReactDOM = __webpack_require__(2);
	var App_1 = __webpack_require__(3);
	__webpack_require__(22);
	ReactDOM.render(React.createElement(App_1.App, null), document.getElementById("root"));


/***/ },
/* 1 */
/***/ function(module, exports) {

	module.exports = React;

/***/ },
/* 2 */
/***/ function(module, exports) {

	module.exports = ReactDOM;

/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {

	"use strict";
	var __extends = (this && this.__extends) || (function () {
	    var extendStatics = Object.setPrototypeOf ||
	        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
	        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
	    return function (d, b) {
	        extendStatics(d, b);
	        function __() { this.constructor = d; }
	        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
	    };
	})();
	Object.defineProperty(exports, "__esModule", { value: true });
	var React = __webpack_require__(1);
	var react_bootstrap_1 = __webpack_require__(4);
	__webpack_require__(5);
	var Recipe_1 = __webpack_require__(9);
	var Add_recipe_btn_1 = __webpack_require__(18);
	var App = (function (_super) {
	    __extends(App, _super);
	    function App(props) {
	        var _this = _super.call(this, props) || this;
	        _this.refreshRecipeList = function () {
	            _this.setState({ recipeString: localStorage.getItem("_recipe_array") });
	        };
	        var initialRecipeArray = localStorage.getItem("_recipe_array") ? localStorage.getItem("_recipe_array") : JSON.stringify([
	            {
	                "RecipeName": "Boiled Egg",
	                "IngredientsList": "Egg, Water"
	            },
	            {
	                "RecipeName": "Coffee",
	                "IngredientsList": "Coffee Beans, Sugar, Water"
	            },
	            {
	                "RecipeName": "Powerpuff Girls",
	                "IngredientsList": "Sugar, Spice, Everything Nice"
	            }
	        ]);
	        localStorage.setItem("_recipe_array", initialRecipeArray);
	        _this.state = {
	            recipeString: initialRecipeArray,
	        };
	        return _this;
	    }
	    App.prototype.initialiseRecipeList = function () {
	        var _this = this;
	        var recipeArray = JSON.parse(this.state.recipeString);
	        var recipeList = recipeArray.map(function (value, index) {
	            return React.createElement(react_bootstrap_1.ListGroupItem, { key: value["RecipeName"] },
	                React.createElement(Recipe_1.Recipe, { eventKey: index.toString(), recipeArrayIndexNo: index, recipeName: value["RecipeName"], recipeIngredients: value["IngredientsList"], refreshRecipeList: _this.refreshRecipeList }));
	        });
	        return React.createElement(react_bootstrap_1.ListGroup, { componentClass: "ul" }, recipeList);
	    };
	    App.prototype.render = function () {
	        return (React.createElement("div", null,
	            React.createElement("header", null,
	                React.createElement(react_bootstrap_1.Grid, null,
	                    React.createElement(react_bootstrap_1.Row, null,
	                        React.createElement(react_bootstrap_1.Col, { sm: 12, md: 12, lg: 12 },
	                            React.createElement(react_bootstrap_1.PageHeader, { className: "App-heading" }, "Recipe Box"))))),
	            React.createElement("main", null,
	                React.createElement(react_bootstrap_1.Grid, null,
	                    React.createElement(react_bootstrap_1.Row, null,
	                        React.createElement(react_bootstrap_1.Col, { sm: 12, md: 12, lg: 12 }, this.initialiseRecipeList())),
	                    React.createElement(react_bootstrap_1.Row, null,
	                        React.createElement(react_bootstrap_1.Col, { sm: 12, md: 12, lg: 12 },
	                            React.createElement(Add_recipe_btn_1.AddRecipeBtn, { refreshRecipeList: this.refreshRecipeList })))))));
	    };
	    return App;
	}(React.Component));
	exports.App = App;


/***/ },
/* 4 */
/***/ function(module, exports) {

	module.exports = ReactBootstrap;

/***/ },
/* 5 */
/***/ function(module, exports) {

	// removed by extract-text-webpack-plugin

/***/ },
/* 6 */,
/* 7 */,
/* 8 */,
/* 9 */
/***/ function(module, exports, __webpack_require__) {

	"use strict";
	var __extends = (this && this.__extends) || (function () {
	    var extendStatics = Object.setPrototypeOf ||
	        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
	        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
	    return function (d, b) {
	        extendStatics(d, b);
	        function __() { this.constructor = d; }
	        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
	    };
	})();
	Object.defineProperty(exports, "__esModule", { value: true });
	var React = __webpack_require__(1);
	var react_bootstrap_1 = __webpack_require__(4);
	__webpack_require__(10);
	var Edit_recipe_btn_1 = __webpack_require__(12);
	var Recipe = (function (_super) {
	    __extends(Recipe, _super);
	    function Recipe(props) {
	        var _this = _super.call(this, props) || this;
	        _this.handleIngredientsVisibilityBtn = function () {
	            _this.setState({ areIngredientsVisible: !_this.state.areIngredientsVisible });
	        };
	        _this.state = {
	            areIngredientsVisible: false,
	        };
	        return _this;
	    }
	    Recipe.prototype.generateIngredientsList = function () {
	        var ingredientsArray = this.props.recipeIngredients.split(",");
	        var ingredientsList = ingredientsArray.map(function (value, index) {
	            if (value.trim().length > 0) {
	                return React.createElement(react_bootstrap_1.ListGroupItem, { bsStyle: "info", key: index.toString(), className: "Ingredients" }, value.trim());
	            }
	        });
	        return React.createElement(react_bootstrap_1.ListGroup, null,
	            ingredientsList,
	            React.createElement(Edit_recipe_btn_1.EditRecipeBtn, { recipeArrayIndexNo: this.props.recipeArrayIndexNo, recipeIngredients: this.props.recipeIngredients, recipeName: this.props.recipeName, refreshRecipeList: this.props.refreshRecipeList }));
	    };
	    Recipe.prototype.render = function () {
	        return (React.createElement("div", null,
	            React.createElement(react_bootstrap_1.Button, { className: "Recipe-item", bsStyle: "primary", onClick: this.handleIngredientsVisibilityBtn }, this.props.recipeName),
	            React.createElement(react_bootstrap_1.Panel, { collapsible: true, expanded: this.state.areIngredientsVisible }, this.generateIngredientsList())));
	    };
	    return Recipe;
	}(React.Component));
	exports.Recipe = Recipe;


/***/ },
/* 10 */
/***/ function(module, exports) {

	// removed by extract-text-webpack-plugin

/***/ },
/* 11 */,
/* 12 */
/***/ function(module, exports, __webpack_require__) {

	"use strict";
	var __extends = (this && this.__extends) || (function () {
	    var extendStatics = Object.setPrototypeOf ||
	        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
	        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
	    return function (d, b) {
	        extendStatics(d, b);
	        function __() { this.constructor = d; }
	        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
	    };
	})();
	Object.defineProperty(exports, "__esModule", { value: true });
	var React = __webpack_require__(1);
	var react_bootstrap_1 = __webpack_require__(4);
	var Edit_recipe_dialog_1 = __webpack_require__(13);
	__webpack_require__(16);
	var EditRecipeBtn = (function (_super) {
	    __extends(EditRecipeBtn, _super);
	    function EditRecipeBtn(props) {
	        var _this = _super.call(this, props) || this;
	        _this.handleShowEditRecipeBtn = function () {
	            _this.setState({ isEditRecipeDialogVisible: true });
	        };
	        _this.closeEditRecipe = function () {
	            _this.setState({ isEditRecipeDialogVisible: false });
	        };
	        _this.handleConfirmDeleteRecipeBtn = function () {
	            var recipeArray = JSON.parse(localStorage.getItem("_recipe_array"));
	            var newRecipeArray = recipeArray.filter(function (value, index) {
	                return index !== _this.props.recipeArrayIndexNo;
	            });
	            localStorage.setItem("_recipe_array", JSON.stringify(newRecipeArray));
	            _this.props.refreshRecipeList();
	            _this.closeEditRecipe();
	        };
	        _this.handleDeleteRecipeBtn = function () {
	            _this.setState({ isRecipeDeleteConfirmationDialogVisible: true });
	        };
	        _this.closeDeleteConfirmationDialog = function () {
	            _this.setState({ isRecipeDeleteConfirmationDialogVisible: false });
	        };
	        _this.state = {
	            isEditRecipeDialogVisible: false,
	            isRecipeDeleteConfirmationDialogVisible: false,
	        };
	        return _this;
	    }
	    EditRecipeBtn.prototype.render = function () {
	        return (React.createElement("div", null,
	            React.createElement("div", { className: "Edit-recipe-btn-block" },
	                React.createElement(react_bootstrap_1.Button, { bsStyle: "success", className: "Dialog-btn", onClick: this.handleShowEditRecipeBtn }, "Edit"),
	                React.createElement(react_bootstrap_1.Button, { bsStyle: "danger", className: "Dialog-btn", onClick: this.handleDeleteRecipeBtn }, "Delete!")),
	            React.createElement(react_bootstrap_1.Modal, { onHide: this.closeDeleteConfirmationDialog, show: this.state.isRecipeDeleteConfirmationDialogVisible },
	                React.createElement(react_bootstrap_1.Modal.Header, null,
	                    React.createElement("h3", null,
	                        "Are you sure you want to delete the recipe for making ",
	                        this.props.recipeName,
	                        "?")),
	                React.createElement(react_bootstrap_1.Modal.Body, null,
	                    React.createElement("div", { className: "Edit-recipe-btn-block" },
	                        React.createElement(react_bootstrap_1.Button, { bsStyle: "success", bsSize: "large", className: "Dialog-btn", onClick: this.closeDeleteConfirmationDialog }, "No"),
	                        React.createElement(react_bootstrap_1.Button, { bsStyle: "danger", bsSize: "large", className: "Dialog-btn", onClick: this.handleConfirmDeleteRecipeBtn }, "Yes")))),
	            React.createElement(Edit_recipe_dialog_1.EditRecipeDialog, { closeEditRecipe: this.closeEditRecipe, isEditRecipeDialogVisible: this.state.isEditRecipeDialogVisible, recipeName: this.props.recipeName, recipeIngredients: this.props.recipeIngredients, refreshRecipeList: this.props.refreshRecipeList, recipeArrayIndexNo: this.props.recipeArrayIndexNo })));
	    };
	    return EditRecipeBtn;
	}(React.Component));
	exports.EditRecipeBtn = EditRecipeBtn;


/***/ },
/* 13 */
/***/ function(module, exports, __webpack_require__) {

	"use strict";
	var __extends = (this && this.__extends) || (function () {
	    var extendStatics = Object.setPrototypeOf ||
	        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
	        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
	    return function (d, b) {
	        extendStatics(d, b);
	        function __() { this.constructor = d; }
	        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
	    };
	})();
	Object.defineProperty(exports, "__esModule", { value: true });
	var React = __webpack_require__(1);
	var react_bootstrap_1 = __webpack_require__(4);
	__webpack_require__(14);
	var EditRecipeDialog = (function (_super) {
	    __extends(EditRecipeDialog, _super);
	    function EditRecipeDialog(props) {
	        var _this = _super.call(this, props) || this;
	        _this.setIngredients = function (e) {
	            _this.setState({ ingredientsString: e.target.value }, function () {
	                _this.checkEmptyFields();
	            });
	        };
	        _this.setRecipeName = function (e) {
	            _this.setState({ recipeNameString: e.target.value }, function () {
	                _this.checkEmptyFields();
	            });
	        };
	        _this.handleCloseDialogBtn = function () {
	            _this.closeDialog();
	        };
	        _this.handleModalExit = function () {
	            _this.closeDialog();
	        };
	        _this.handleConfirmEditRecipeDialogBtn = function () {
	            var recipeNameString = (_this.state.recipeNameString.trim().length < 1) ?
	                _this.props.recipeName : _this.state.recipeNameString;
	            var recipeIngredientsString = (_this.state.ingredientsString.trim().length < 1) ?
	                _this.props.recipeIngredients : _this.state.ingredientsString;
	            var recipeObject = {
	                "RecipeName": recipeNameString,
	                "IngredientsList": recipeIngredientsString,
	            };
	            var recipeArray = JSON.parse(localStorage.getItem("_recipe_array"));
	            recipeArray.forEach(function (elem, index, array) {
	                if (index === _this.props.recipeArrayIndexNo) {
	                    array[index] = recipeObject;
	                }
	            });
	            localStorage.setItem("_recipe_array", JSON.stringify(recipeArray));
	            _this.props.refreshRecipeList();
	            _this.closeDialog();
	        };
	        _this.state = {
	            ingredientsString: _this.props.recipeIngredients,
	            recipeNameString: _this.props.recipeName,
	        };
	        return _this;
	    }
	    EditRecipeDialog.prototype.checkEmptyFields = function () {
	        var noSpaceRecipeString = this.state.recipeNameString.trim();
	        var noSpaceIngredientsString = this.state.ingredientsString.trim();
	        if (noSpaceRecipeString.length <= 0 || noSpaceIngredientsString.length <= 0) {
	            this.setState({
	                ingredientsString: this.props.recipeIngredients,
	                recipeNameString: this.props.recipeName,
	            });
	        }
	    };
	    EditRecipeDialog.prototype.closeDialog = function () {
	        this.setState({
	            ingredientsString: this.props.recipeIngredients,
	            recipeNameString: this.props.recipeName,
	        });
	        this.setState({ recipeNameString: this.props.recipeName });
	        this.setState({ ingredientsString: this.props.recipeIngredients });
	        this.props.closeEditRecipe();
	    };
	    EditRecipeDialog.prototype.render = function () {
	        return (React.createElement(react_bootstrap_1.Modal, { onHide: this.props.closeEditRecipe, onExit: this.handleModalExit, show: this.props.isEditRecipeDialogVisible },
	            React.createElement(react_bootstrap_1.Modal.Header, null,
	                React.createElement("h3", null, "Edit Recipe Name and Ingredients")),
	            React.createElement(react_bootstrap_1.Modal.Body, null,
	                React.createElement(react_bootstrap_1.Form, { className: "Edit-recipe-form" },
	                    React.createElement(react_bootstrap_1.FormGroup, { controlId: "editRecipeNameText" },
	                        React.createElement(react_bootstrap_1.ControlLabel, null, "Recipe Name:"),
	                        React.createElement(react_bootstrap_1.FormControl, { className: "Edit-recipe-form", type: "text", placeholder: this.props.recipeName, onKeyUp: this.setRecipeName })),
	                    React.createElement(react_bootstrap_1.FormGroup, { controlId: "editRecipeIngredientsText" },
	                        React.createElement(react_bootstrap_1.ControlLabel, null, "Ingredients:"),
	                        React.createElement(react_bootstrap_1.FormControl, { autoFocus: true, className: "Edit-recipe-form", componentClass: "textArea", style: { resize: "none", height: "10em" }, onKeyUp: this.setIngredients }, this.props.recipeIngredients))),
	                React.createElement("div", { className: "Edit-recipe-dialog-block" },
	                    React.createElement(react_bootstrap_1.Button, { bsStyle: "success", bsSize: "large", className: "Confirm-dialog-btn", onClick: this.handleConfirmEditRecipeDialogBtn }, "Confirm"),
	                    React.createElement(react_bootstrap_1.Button, { bsStyle: "danger", bsSize: "large", className: "Cancel-dialog-btn", onClick: this.handleCloseDialogBtn }, "Cancel")))));
	    };
	    return EditRecipeDialog;
	}(React.Component));
	exports.EditRecipeDialog = EditRecipeDialog;


/***/ },
/* 14 */
/***/ function(module, exports) {

	// removed by extract-text-webpack-plugin

/***/ },
/* 15 */,
/* 16 */
/***/ function(module, exports) {

	// removed by extract-text-webpack-plugin

/***/ },
/* 17 */,
/* 18 */
/***/ function(module, exports, __webpack_require__) {

	"use strict";
	var __extends = (this && this.__extends) || (function () {
	    var extendStatics = Object.setPrototypeOf ||
	        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
	        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
	    return function (d, b) {
	        extendStatics(d, b);
	        function __() { this.constructor = d; }
	        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
	    };
	})();
	Object.defineProperty(exports, "__esModule", { value: true });
	var React = __webpack_require__(1);
	var react_bootstrap_1 = __webpack_require__(4);
	var Add_recipe_dialog_1 = __webpack_require__(19);
	var AddRecipeBtn = (function (_super) {
	    __extends(AddRecipeBtn, _super);
	    function AddRecipeBtn(props) {
	        var _this = _super.call(this, props) || this;
	        _this.handleShowAddRecipeBtn = function () {
	            _this.setState({ isAddRecipeDialogVisible: true });
	        };
	        _this.closeAddRecipe = function () {
	            _this.setState({ isAddRecipeDialogVisible: false });
	        };
	        _this.state = {
	            isAddRecipeDialogVisible: false,
	        };
	        return _this;
	    }
	    AddRecipeBtn.prototype.render = function () {
	        return (React.createElement("div", null,
	            React.createElement(react_bootstrap_1.Grid, null,
	                React.createElement(react_bootstrap_1.Row, null,
	                    React.createElement(react_bootstrap_1.Col, { sm: 12, md: 12, lg: 12 },
	                        React.createElement(react_bootstrap_1.Button, { onClick: this.handleShowAddRecipeBtn, bsStyle: "success", bsSize: "large" }, "Add Recipe")))),
	            React.createElement(Add_recipe_dialog_1.AddRecipeDialog, { refreshRecipeList: this.props.refreshRecipeList, isAddRecipeDialogVisible: this.state.isAddRecipeDialogVisible, closeAddRecipe: this.closeAddRecipe })));
	    };
	    return AddRecipeBtn;
	}(React.Component));
	exports.AddRecipeBtn = AddRecipeBtn;


/***/ },
/* 19 */
/***/ function(module, exports, __webpack_require__) {

	"use strict";
	var __extends = (this && this.__extends) || (function () {
	    var extendStatics = Object.setPrototypeOf ||
	        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
	        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
	    return function (d, b) {
	        extendStatics(d, b);
	        function __() { this.constructor = d; }
	        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
	    };
	})();
	Object.defineProperty(exports, "__esModule", { value: true });
	var React = __webpack_require__(1);
	var react_bootstrap_1 = __webpack_require__(4);
	__webpack_require__(20);
	var AddRecipeDialog = (function (_super) {
	    __extends(AddRecipeDialog, _super);
	    function AddRecipeDialog(props) {
	        var _this = _super.call(this, props) || this;
	        _this.setIngredients = function (e) {
	            _this.setState({ ingredientsString: e.target.value }, function () {
	                _this.checkEmptyFields();
	            });
	        };
	        _this.setRecipeName = function (e) {
	            _this.setState({ recipeNameString: e.target.value }, function () {
	                _this.checkEmptyFields();
	            });
	        };
	        _this.handleAddRecipeDialogBtn = function () {
	            var recipeObject = {
	                "RecipeName": _this.state.recipeNameString,
	                "IngredientsList": _this.state.ingredientsString,
	            };
	            var localRecipeString = localStorage.getItem("_recipe_array");
	            var recipeArray = (localRecipeString) ? JSON.parse(localRecipeString) : [];
	            recipeArray.push(recipeObject);
	            localStorage.setItem("_recipe_array", JSON.stringify(recipeArray));
	            _this.props.refreshRecipeList();
	            _this.closeDialog();
	        };
	        _this.handleCloseDialogBtn = function () {
	            _this.closeDialog();
	        };
	        _this.handleModalExit = function () {
	            _this.closeDialog();
	        };
	        _this.state = {
	            emptyFields: true,
	            ingredientsString: "",
	            recipeNameString: "",
	        };
	        return _this;
	    }
	    AddRecipeDialog.prototype.checkEmptyFields = function () {
	        var noSpaceRecipeString = this.state.recipeNameString.trim();
	        var noSpaceIngredientsString = this.state.ingredientsString.trim();
	        if (noSpaceRecipeString.length > 0 && noSpaceIngredientsString.length > 0) {
	            this.setState({ emptyFields: false });
	        }
	        else {
	            this.setState({ emptyFields: true });
	        }
	    };
	    AddRecipeDialog.prototype.closeDialog = function () {
	        this.setState({ emptyFields: true });
	        this.setState({ recipeNameString: "" });
	        this.setState({ ingredientsString: "" });
	        this.props.closeAddRecipe();
	    };
	    AddRecipeDialog.prototype.render = function () {
	        return (React.createElement(react_bootstrap_1.Modal, { onHide: this.props.closeAddRecipe, show: this.props.isAddRecipeDialogVisible, onExit: this.handleModalExit },
	            React.createElement(react_bootstrap_1.Modal.Header, null,
	                React.createElement("h3", null, "Enter Recipe Name and Ingredients")),
	            React.createElement(react_bootstrap_1.Modal.Body, null,
	                React.createElement("form", { className: "Add-recipe-form" },
	                    React.createElement(react_bootstrap_1.FormGroup, { controlId: "addRecipeNameText" },
	                        React.createElement(react_bootstrap_1.ControlLabel, null, "Recipe Name:"),
	                        React.createElement(react_bootstrap_1.FormControl, { autoFocus: true, className: "Add-recipe-form", type: "text", placeholder: "Enter Recipe Name", onKeyUp: this.setRecipeName })),
	                    React.createElement(react_bootstrap_1.FormGroup, { controlId: "recipeIngredientsText" },
	                        React.createElement(react_bootstrap_1.ControlLabel, null, "Ingredients:"),
	                        React.createElement(react_bootstrap_1.FormControl, { className: "Add-recipe-form", componentClass: "textArea", style: { resize: "none", height: "10em" }, placeholder: "Enter Ingredients", onKeyUp: this.setIngredients }))),
	                React.createElement("div", { className: "Recipe-dialog-block" },
	                    React.createElement(react_bootstrap_1.Button, { className: "Add-dialog-btn", disabled: this.state.emptyFields, bsStyle: "success", bsSize: "large", onClick: this.handleAddRecipeDialogBtn }, "Add"),
	                    React.createElement(react_bootstrap_1.Button, { className: "Close-dialog-btn", bsSize: "large", bsStyle: "danger", onClick: this.handleCloseDialogBtn }, "Close")))));
	    };
	    return AddRecipeDialog;
	}(React.Component));
	exports.AddRecipeDialog = AddRecipeDialog;


/***/ },
/* 20 */
/***/ function(module, exports) {

	// removed by extract-text-webpack-plugin

/***/ },
/* 21 */,
/* 22 */
/***/ function(module, exports) {

	// removed by extract-text-webpack-plugin

/***/ }
/******/ ]);
//# sourceMappingURL=bundle.js.map

Comments