"react"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/Consplash/pen/gLmNrY?depth=everything&order=popularity&page=64&q=editable&show_forks=false" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Karla|Raleway" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style class="cp-pen-styles">body { font-family: 'Raleway', helvetica, sans-serif; } .appContainer { text-align: center; } .heading { letter-spacing: 5px; color: #D33257; margin-bottom: 50px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); text-shadow: 1px 2px 0px rgba(0, 0, 0, 0.3); } .button { padding: 10px; background: linear-gradient(to right, #64DDBB, #00B5B5); border: none; outline: none; box-shadow: 0px 4px 0 rgba(0, 0, 0, 0.2); border-radius: 5px; color: #eee; font-size: 25px; font-family: 'Karla', helvetica, sans-serif; cursor: pointer; margin-bottom: 20px; } .button:hover { background: linear-gradient(to right, #4BA68C, #007575); } .button:active { box-shadow: 0px 0px 0 rgba(0, 0, 0, 0); margin-top: 2px; } .recipeBox { font-family: 'Karla', helvetica, sans-serif; padding: 20px; border: 1px solid rgba(0, 0, 0, 0.1); max-width: 500px; margin: 15px auto; border-radius: 3px; color: #444; } .container {} .recipe { padding: 20px; background: rgba(246, 205, 97, 0.3); cursor: pointer; user-select: none; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); margin-bottom: 10px; } .recipe:hover { background: rgba(246, 205, 97, 0.5); } .deleteEdit { cursor: pointer; padding: 10px; margin-right: 10px; background: #D33257; color: #fff; outline: none; border-radius: 50px; border: none; font-size: 15px; letter-spacing: 1px; box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2); } .deleteEdit:hover { background: #913349; } .deleteEdit:active { box-shadow: none; } .ingredients-on { box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); text-align: left; padding: 20px; display: block; margin-bottom: 10px; } .ingredients-off { box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); text-align: left; padding: 20px; display: none; margin-bottom: 10px; } .modal { background: rgba(0, 0, 0, 0.6); height: 100%; width: 100%; z-index: 1; top: 0; left: 0; position: fixed; display: none; } .modalContent { font-family: 'Karla', helvetica, sans-serif; background: white; padding: 10px; box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.5); border-radius: 5px; width: 80%; margin: 6% auto; } .modalHeader { padding-left: 10px; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .fa-times { float: right; } .modalBody { padding: 20px 10px; text-align: left; } .modalInput { padding: 5px 0px 10px 0px; } .inputBox { padding: 10px 20px; font-family: 'Karla', helvetica, sans-serif; font-size: 16px; width: 60%; color: rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.2); resize: vertical; } .modalButton { padding: 10px; border-radius: 5px; border: none; outline: none; margin-left: 10px; font-size: 14px; } .addRecipeButton { background: linear-gradient(to right, #64DDBB, #00B5B5); color: #eee; box-shadow: 2px 3px 0px rgba(0, 0, 0, 0.3); cursor: pointer; } .addRecipeButton:hover { background: linear-gradient(to right, #4BA68C, #007575); } .addRecipeButton:active { box-shadow: none; background: linear-gradient(to right, #4BA68C, #007575); } .closeButton { background: #D33257; box-shadow: 2px 3px 0px rgba(0, 0, 0, 0.3); color: #eee; cursor: pointer; } .closeButton:hover { background: #913349; } .closeButton:active { box-shadow: none; } .modalFooter { border-top: 1px solid rgba(0, 0, 0, 0.2); padding: 20px 0 10px 0px; text-align: left; } .recipeInputBox { margin-bottom: 10px; } .close { cursor: pointer; } @media all and (max-width:1200px) { .modalContent { width: 60%; margin: 6% auto; } } @media all and (max-width:800px) { .modalContent { width: 90%; margin: 2% auto; } .modalButton { font-size: 18px; } .inputBox { width: 85%; } }</style></head><body> <div id="app"> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><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 >var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) {if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;} 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); } window.CP.exitedLoop(1); window.CP.exitedLoop(1); } 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 _React = React, Component = _React.Component; var _ReactDOM = ReactDOM, render = _ReactDOM.render; var Heading = function (_Component) { _inherits(Heading, _Component); function Heading() { _classCallCheck(this, Heading); return _possibleConstructorReturn(this, (Heading.__proto__ || Object.getPrototypeOf(Heading)).apply(this, arguments)); } _createClass(Heading, [{ key: "render", value: function render() { return React.createElement( "h1", { className: "heading" }, "RECIPE BOX \xA0", React.createElement("i", { className: "fa fa-cutlery" }) ); } }]); return Heading; }(Component); var Button = function (_Component2) { _inherits(Button, _Component2); function Button(props, context) { _classCallCheck(this, Button); var _this2 = _possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).call(this, props, context)); _this2.showModal = _this2.showModal.bind(_this2); return _this2; } _createClass(Button, [{ key: "showModal", value: function showModal() { var modal = document.getElementById('modal'); modal.style.display = 'block'; } }, { key: "render", value: function render() { return React.createElement( "button", { onClick: this.showModal, className: "button" }, "Add Recipe ", React.createElement("i", { className: "fa fa-plus" }) ); } }]); return Button; }(Component); var RecipeDescription = function (_Component3) { _inherits(RecipeDescription, _Component3); function RecipeDescription(props, context) { _classCallCheck(this, RecipeDescription); var _this3 = _possibleConstructorReturn(this, (RecipeDescription.__proto__ || Object.getPrototypeOf(RecipeDescription)).call(this, props, context)); _this3.handleDeleteClick = _this3.handleDeleteClick.bind(_this3); _this3.handleEditClick = _this3.handleEditClick.bind(_this3); return _this3; } _createClass(RecipeDescription, [{ key: "handleDeleteClick", value: function handleDeleteClick(e) { this.props.removeRecipe(e.currentTarget.dataset.id); } }, { key: "handleEditClick", value: function handleEditClick(e) { this.props.editRecipe(e.currentTarget.dataset.id); } }, { key: "render", value: function render() { var styles = { borderBottom: '1px solid rgba(0, 0, 0, 0.1)', paddingRight: '10px' }; var displayStyle = { boxShadow: '0 2px 2px rgba(0, 0, 0, 0.3)', textAlign: 'left', padding: '20px', display: 'none', marginBottom: '10px' }; displayStyle.display = this.props.showIngredients ? 'block' : 'none'; var ingredients = this.props.ingredients.map(function (ingredient, index) { return React.createElement( "p", { style: styles, key: ingredient }, ingredient ); }); return React.createElement( "div", { style: displayStyle }, React.createElement( "h3", { style: { textAlign: 'center', borderBottom: '1px solid rgba(0, 0, 0, 0.1)', paddingBottom: '10px' } }, "Ingredients" ), ingredients, React.createElement( "div", { style: { padding: '15px 0px' } }, React.createElement( "button", { className: "deleteEdit", "data-id": this.props.id, onClick: this.handleDeleteClick }, "Delete" ), React.createElement( "button", { className: "deleteEdit", "data-id": this.props.id, onClick: this.handleEditClick }, "Edit" ) ) ); } }]); return RecipeDescription; }(Component); var Recipe = function (_Component4) { _inherits(Recipe, _Component4); function Recipe(props, context) { _classCallCheck(this, Recipe); var _this4 = _possibleConstructorReturn(this, (Recipe.__proto__ || Object.getPrototypeOf(Recipe)).call(this, props, context)); _this4.state = { id: '' }; _this4.showDescription = _this4.showDescription.bind(_this4); _this4.removeRecipe = _this4.removeRecipe.bind(_this4); _this4.editRecipe = _this4.editRecipe.bind(_this4); return _this4; } _createClass(Recipe, [{ key: "showDescription", value: function showDescription(event) { this.setState({ id: event.currentTarget.dataset.id }); } }, { key: "removeRecipe", value: function removeRecipe(id) { var recipes = this.props.recipes.filter(function (recipe, index) { return id !== String(index); }); this.props.afterDeleteRecipes(recipes); } }, { key: "editRecipe", value: function editRecipe(id) { this.props.editRecipe(id); } }, { key: "render", value: function render() { var _this5 = this; var recipeName = this.props.recipes.map(function (recipe, index) { return React.createElement( "div", { key: index }, React.createElement( "div", { "data-id": index, className: "recipe", onClick: _this5.showDescription }, recipe.name ), React.createElement(RecipeDescription, { editRecipe: _this5.editRecipe, id: _this5.state.id, showIngredients: _this5.state.id === String(index) ? true : false, ingredients: recipe.ingredients, removeRecipe: _this5.removeRecipe }) ); }); return React.createElement( "div", null, " ", recipeName, " " ); } }]); return Recipe; }(Component); var RecipeBox = function (_Component5) { _inherits(RecipeBox, _Component5); function RecipeBox(props, context) { _classCallCheck(this, RecipeBox); var _this6 = _possibleConstructorReturn(this, (RecipeBox.__proto__ || Object.getPrototypeOf(RecipeBox)).call(this, props, context)); _this6.state = { recipes: [{ name: 'Pancakes', ingredients: ['2 spotty bananas', '2 cup almond milk', '3 cups gluten-free rolled oats or oat flour', 'Coconut flakes', 'Berry Maple Syrup', 'Seeds or nuts'] }, { name: 'Avocado Smoothie', ingredients: ['1 Avocado, cubed', '2 frozen banana, chopped', '400 milliliters (14 ounces) milk'] }], recipeName: '', ingredients: '', status: true, recipeID: '' }; _this6.addNewRecipe = _this6.addNewRecipe.bind(_this6); _this6.handleRecipeNameChange = _this6.handleRecipeNameChange.bind(_this6); _this6.handleIngredientsChange = _this6.handleIngredientsChange.bind(_this6); _this6.afterDeleteRecipes = _this6.afterDeleteRecipes.bind(_this6); _this6.editRecipe = _this6.editRecipe.bind(_this6); _this6.changeStatus = _this6.changeStatus.bind(_this6); return _this6; } _createClass(RecipeBox, [{ key: "changeStatus", value: function changeStatus() { this.setState({ recipeName: '', ingredients: '', status: true }); } }, { key: "handleRecipeNameChange", value: function handleRecipeNameChange(value) { this.setState({ recipeName: value }); } }, { key: "handleIngredientsChange", value: function handleIngredientsChange(value) { this.setState({ ingredients: value }); } }, { key: "afterDeleteRecipes", value: function afterDeleteRecipes(newRecipes) { this.setState({ recipes: newRecipes }); } }, { key: "editRecipe", value: function editRecipe(id) { var item = this.state.recipes.filter(function (recipe, index) { return index === Number(id); })[0]; document.getElementById('modal').style.display = 'block'; this.setState({ recipeName: item.name, ingredients: item.ingredients.join(', '), status: false, recipeID: id }); } }, { key: "addNewRecipe", value: function addNewRecipe() { var _this7 = this; var recipeIngredients = this.state.ingredients.split(',').map(function (ingredient) { return ingredient.trim(); }); var recipeName = this.state.recipeName.trim(); if (this.state.status) { this.setState({ recipes: this.state.recipes.concat({ name: recipeName, ingredients: recipeIngredients }), recipeName: '', ingredients: '' }); } else { var newRecipes = this.state.recipes.map(function (recipe, index) { if (index === Number(_this7.state.recipeID)) return { name: recipeName, ingredients: recipeIngredients };else return recipe; }); console.log(newRecipes); this.setState({ status: true, recipes: newRecipes, recipeName: '', ingredients: '' }); } document.getElementById('modal').style.display = 'none'; } }, { key: "render", value: function render() { return React.createElement( "div", { className: "recipeBox" }, React.createElement(Recipe, { editRecipe: this.editRecipe, afterDeleteRecipes: this.afterDeleteRecipes, recipes: this.state.recipes }), React.createElement(Modal, { changeStatus: this.changeStatus, status: this.state.status, handleRecipeNameChange: this.handleRecipeNameChange, handleIngredientsChange: this.handleIngredientsChange, addNewRecipe: this.addNewRecipe, recipeName: this.state.recipeName, recipeIngredients: this.state.ingredients }) ); } }]); return RecipeBox; }(Component); var Modal = function (_Component6) { _inherits(Modal, _Component6); function Modal(props, context) { _classCallCheck(this, Modal); var _this8 = _possibleConstructorReturn(this, (Modal.__proto__ || Object.getPrototypeOf(Modal)).call(this, props, context)); _this8.closeModal = _this8.closeModal.bind(_this8); _this8.handleIngredientsChange = _this8.handleIngredientsChange.bind(_this8); _this8.handleRecipeNameChange = _this8.handleRecipeNameChange.bind(_this8); return _this8; } _createClass(Modal, [{ key: "closeModal", value: function closeModal() { var modal = document.getElementById('modal'); modal.style.display = 'none'; this.props.changeStatus(); } }, { key: "handleRecipeNameChange", value: function handleRecipeNameChange() { var name = this.refs.recipeName.value; this.props.handleRecipeNameChange(name); } }, { key: "handleIngredientsChange", value: function handleIngredientsChange() { var ingredients = this.refs.ingredients.value; this.props.handleIngredientsChange(ingredients); } }, { key: "render", value: function render() { var modalName = this.props.status ? 'Add a Recipe' : 'Edit Recipe'; var modalButton = this.props.status ? 'Add Recipe' : 'Edit Recipe'; return React.createElement( "div", { id: "modal", className: "modal" }, React.createElement( "div", { id: "modalContent", className: "modalContent" }, React.createElement( "div", { className: "modalHeader" }, React.createElement( "h3", null, modalName, React.createElement( "span", { onClick: this.closeModal, className: "close" }, React.createElement("i", { className: "fa fa-times" }) ) ) ), React.createElement( "div", { className: "modalBody" }, React.createElement( "label", null, "Recipe" ), React.createElement( "div", { className: "modalInput recipeInputBox" }, React.createElement("input", { value: this.props.recipeName, ref: "recipeName", onChange: this.handleRecipeNameChange, className: "inputBox", type: "text", placeholder: "Recipe Name" }) ), React.createElement( "label", null, "Ingredients" ), React.createElement( "div", { className: "modalInput" }, React.createElement("textarea", { value: this.props.recipeIngredients, ref: "ingredients", onChange: this.handleIngredientsChange, className: "inputBox", placeholder: "Enter Ingredients seperated by commas" }) ) ), React.createElement( "div", { className: "modalFooter" }, React.createElement( "button", { className: "modalButton addRecipeButton", onClick: this.props.addNewRecipe }, modalButton ), React.createElement( "button", { className: "modalButton closeButton", onClick: this.closeModal }, "Close" ) ) ) ); } }]); return Modal; }(Component); var Container = function (_Component7) { _inherits(Container, _Component7); function Container() { _classCallCheck(this, Container); return _possibleConstructorReturn(this, (Container.__proto__ || Object.getPrototypeOf(Container)).apply(this, arguments)); } _createClass(Container, [{ key: "render", value: function render() { return React.createElement( "div", { className: "container" }, React.createElement(RecipeBox, null), React.createElement(Button, null) ); } }]); return Container; }(Component); var App = function (_Component8) { _inherits(App, _Component8); 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: "appContainer" }, React.createElement(Heading, null), React.createElement(Container, null) ); } }]); return App; }(Component); render(React.createElement(App, null), document.getElementById('app')); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: