Recipe Box

Developer
Matheus
Size
9,514 Kb
Views
2,024
  1. Recipe Box Previews
  2. Recipe Box HTML Codes
  3. Recipe Box CSS Codes
  4. Recipe Box JS Codes

How do I make an recipe box?

What is a recipe box? How do you make a recipe box? This script and codes were developed by Matheus on 13 January 2023, Friday.

Recipe Box Previews
IQ Test

Recipe Box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Recipe Box</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div id="root"></div>
<div id="addBtn"></div>
<div id="teste"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.1/react-bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Recipe Box - Script Codes CSS Codes

body { background-color: #f0f5f5;
}
.recipeBoxHeader { font-size: 65px; font-weight: bold; color: black;
}
.recipeList { background-color: #ccffb3; font-size: 23px; position: relative; top: 15px; border: 1px solid green; border-radius: 10px; margin-top: 7px; height: 50px;
}
.displayedRecipe { font-family: "Shadows Into Light", cursive; margin-top: 25px;
}
.recipeImage { margin-top: 15px;
}
.recipeInfos { margin-top: 5px;
}
.recipeTitle { font-size: 70px; font-weight: bold; margin-top: 15px;
}
.recipeHeader { font-size: 50px; font-weight: bold; padding-left: 110px;
}
.recipeInformation { font-size: 27px; font-weight: normal; padding-left: 130px;
}
.recipeButtonsDiv { float: right;
}
input { width: 100%;
}
textarea { width: 100%; height: 100px;
}

Recipe Box - Script Codes JS Codes

"use strict";
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; }
//References: https://react-bootstrap.github.io/components.html (react modal)
//window.localStorage.removeItem('freecodecamp_recipes');
var Button = ReactBootstrap.Button;
var Modal = ReactBootstrap.Modal;
var ModalHeader = ReactBootstrap.ModalHeader;
var ModalBody = ReactBootstrap.ModalBody;
var ModalFooter = ReactBootstrap.ModalFooter;
var Popover = ReactBootstrap.Popover;
var Tooltip = ReactBootstrap.Tooltip;
var OverlayTrigger = ReactBootstrap.OverlayTrigger;
//===set default initial recipes, if local storage is empty===
function getInitialRecipes() { var recipes = []; if (window.localStorage.getItem('freecodecamp_recipes') == null) { var nuggets = { title: "Quick Chicken Nuggets", ingredients: ["1 cup bread crumbs", "1/2 teaspoon garlic powder", "1/2 teaspoon dried thyme", "1/4 cup Dijon mustard", "1/3 cup light mayonnaise", "1 1/2 pounds chicken tenders, cut into 1-inch pieces", "3/4 pound green beans, washed, trimmed and steamed"], directions: ["Heat oven to broil. Coat baking rack with nonstick cooking spray. Place rack over baking sheet; set aside.", "Stir together bread crumbs, garlic powder and thyme in a pie plate; set aside. Stir together mustard and mayonnaise.", "Reserve about 1/2 cup of mustard mixture for dipping sauce. Brush chicken pieces with remaining mustard mix; place chicken in pie plate with bread crumb mixture, spooning crumbs on top of pieces and pressing to adhere. Transfer to prepared baking rack. Broil for 10 minutes or until cooked through. Serve with reserved dipping sauce and green beans on the side."], img: "http://images.meredith.com/bhg/images/recipe/p_R115589.jpg" }; recipes.push(nuggets); var lasagna = { title: "Crockpot Lasagna", ingredients: ["Nonstick cooking spray", "1 26 ounce jar pasta sauce", "3/4 cup water", "1 15 ounce carton light ricotta cheese", "1/2 cup shredded carrot", "6 lasagna noodles", "1 1/2 cups shredded mozzarella cheese (6 oz.)"], directions: ["Coat a 4-quart slow cooker with cooking spray. In a large microwave-safe bowl stir together pasta sauce and water. Cover bowl with waxed paper and microwave on high for 3 minutes. Meanwhile, in a medium bowl stir together ricotta cheese and carrot; set aside.", "Spoon 1/2 cup of the sauce mixture in the bottom of prepared slow cooker. Break half of the noodles to fit the bottom of the slow cooker and arrange over the sauce in the slow cooker. Spoon mounds of half of the ricotta mixture over the noodles. Top with 1/2 cup of the mozzarella. Spoon half of the remaining sauce over the layers. Top with remaining noodles, breaking to fit, remaining ricotta mixture, and 1/2 cup mozzarella. Spoon remaining sauce over and top with remaining mozzarella.", "Cover; cook on low heat setting for 3 hours (noodles should be tender). Remove crockpot from liner and let stand covered for 20 minutes. Makes 6 servings."], img: "http://images.parents.mdpcdn.com/sites/parents.com/files/styles/width_360/public/recipe/images/R156920.jpg" }; recipes.push(lasagna); window.localStorage.setItem('freecodecamp_recipes', JSON.stringify(recipes)); } else { recipes = JSON.parse(window.localStorage.getItem('freecodecamp_recipes')); } console.log(recipes); return recipes; //
}
var RecipeBox = function (_React$Component) { _inherits(RecipeBox, _React$Component); function RecipeBox(props) { _classCallCheck(this, RecipeBox); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.state = { recipes: getInitialRecipes(), displayedRecipe: false, showModal: false, showModalEdition: false, recipeBeeingEdited: "", newRecipeName: "", newRecipeIngredients: "", newRecipeDirections: "", newRecipeImg: "", editRecipeName: "", editRecipeIngredients: "", editRecipeDirections: "", editRecipeImg: "" }; _this.mapRecipes = _this.mapRecipes.bind(_this); _this.showTargetRecipe = _this.showTargetRecipe.bind(_this); _this.renderRecipe = _this.renderRecipe.bind(_this); _this.deleteRecipe = _this.deleteRecipe.bind(_this); _this.editRecipe = _this.editRecipe.bind(_this); _this.saveEditedRecipe = _this.saveEditedRecipe.bind(_this); _this.close = _this.close.bind(_this); _this.open = _this.open.bind(_this); _this.modalRecipeForm = _this.modalRecipeForm.bind(_this); _this.newRecipe = _this.newRecipe.bind(_this); return _this; } RecipeBox.prototype.open = function open() { this.setState({ showModal: true }); }; RecipeBox.prototype.close = function close() { this.setState({ showModal: false, showModalEdition: false }); }; RecipeBox.prototype.deleteRecipe = function deleteRecipe(event) { //===UPDATE REACT STATE WITHOUT TARGET RECIPE=== var updatedRecipesBox = []; for (var i = 0; i < this.state.recipes.length; i++) { if (this.state.recipes[i].title != event.currentTarget.dataset.title) updatedRecipesBox.push(this.state.recipes[i]); } this.setState({ displayedRecipe: this.state.displayedRecipe == event.currentTarget.dataset.title ? false : this.state.displayedRecipe, recipes: updatedRecipesBox }); //===UPDATE LOCAL STORAGE=== window.localStorage.removeItem('freecodecamp_recipes'); window.localStorage.setItem('freecodecamp_recipes', JSON.stringify(updatedRecipesBox)); }; RecipeBox.prototype.editRecipe = function editRecipe(event) { var recipeToBeEdited; for (var i = 0; i < this.state.recipes.length; i++) { if (this.state.recipes[i].title == event.currentTarget.dataset.title) { recipeToBeEdited = this.state.recipes[i]; break; } } this.setState({ showModalEdition: true, recipeBeeingEdited: recipeToBeEdited.title, editRecipeName: recipeToBeEdited.title, editRecipeIngredients: recipeToBeEdited.ingredients.join(), editRecipeDirections: recipeToBeEdited.directions.join(), editRecipeImg: recipeToBeEdited.img }); }; RecipeBox.prototype.saveEditedRecipe = function saveEditedRecipe(event) { //===UPDATE REACT STATE WITH EDITED RECIPE=== var updatedRecipesBox = []; var editedRecipe = { title: this.state.editRecipeName, ingredients: this.state.editRecipeIngredients.split(','), directions: this.state.editRecipeDirections.split(','), img: this.state.editRecipeImg }; for (var i = 0; i < this.state.recipes.length; i++) { if (this.state.recipes[i].title != this.state.recipeBeeingEdited) updatedRecipesBox.push(this.state.recipes[i]);else updatedRecipesBox.push(editedRecipe); } this.setState({ showModalEdition: false, displayedRecipe: this.state.displayedRecipe == this.state.recipeBeeingEdited ? false : this.state.displayedRecipe, recipes: updatedRecipesBox }); //===UPDATE LOCAL STORAGE=== window.localStorage.removeItem('freecodecamp_recipes'); window.localStorage.setItem('freecodecamp_recipes', JSON.stringify(updatedRecipesBox)); }; RecipeBox.prototype.modalRecipeForm = function modalRecipeForm(event) { var _setState; var name = event.target.name; var value = event.target.value; this.setState((_setState = {}, _setState[name] = value, _setState)); }; RecipeBox.prototype.newRecipe = function newRecipe(event) { //===UPDATE REACT STATE WITH NEW RECIPE=== var newUserRecipe = { title: this.state.newRecipeName, ingredients: this.state.newRecipeIngredients.split(','), directions: this.state.newRecipeDirections.split(','), img: this.state.newRecipeImg }; var updatedRecipesBox = this.state.recipes; updatedRecipesBox.push(newUserRecipe); this.setState({ recipes: updatedRecipesBox, showModal: false, newRecipeName: "", newRecipeIngredients: "", newRecipeDirections: "", newRecipeImg: "" }); //===UPDATE LOCAL STORAGE=== window.localStorage.removeItem('freecodecamp_recipes'); window.localStorage.setItem('freecodecamp_recipes', JSON.stringify(updatedRecipesBox)); }; RecipeBox.prototype.showTargetRecipe = function showTargetRecipe(event) { this.setState({ displayedRecipe: event.currentTarget.dataset.title }); }; RecipeBox.prototype.mapRecipes = function mapRecipes(event) { var _this2 = this; var jsxExpression = this.state.recipes.map(function (item) { return React.createElement( "div", { className: "text-left col-md-10 col-md-offset-1 recipeList", "data-title": item.title }, React.createElement( "div", { className: "recipeInfos" }, React.createElement( "span", null, item.title ), React.createElement( "div", { className: "recipeButtonsDiv" }, React.createElement( "button", { className: "btn btn-danger recipe-btn", title: "delete recipe", "data-title": item.title, onClick: _this2.deleteRecipe }, React.createElement("span", { className: "glyphicon glyphicon-trash" }) ), React.createElement( "button", { className: "btn btn-success recipe-btn", title: "edit recipe", "data-title": item.title, onClick: _this2.editRecipe }, React.createElement("span", { className: "glyphicon glyphicon-pencil" }) ), React.createElement( "button", { className: "btn btn-default recipe-btn", title: "view recipe", "data-title": item.title, onClick: _this2.showTargetRecipe }, React.createElement("span", { className: "glyphicon glyphicon-eye-open" }) ) ) ) ); }); return jsxExpression; }; RecipeBox.prototype.renderRecipe = function renderRecipe() { console.log("Render " + this.state.displayedRecipe); var targetRecipe; console.log(this.state.recipes); for (var i = 0; i < this.state.recipes.length; i++) { if (this.state.recipes[i].title == this.state.displayedRecipe) { targetRecipe = this.state.recipes[i]; console.log(targetRecipe); break; } } var ingredientsList = targetRecipe.ingredients.map(function (item) { return React.createElement( "li", null, item ); }); var directionsList = targetRecipe.directions.map(function (item) { return React.createElement( "li", null, item ); }); var jsxExpression = React.createElement( "div", { className: "text-center" }, React.createElement( "div", { className: "row" }, React.createElement( "span", { className: "recipeTitle" }, targetRecipe.title ) ), React.createElement( "div", { className: "row recipeImage" }, React.createElement("img", { src: targetRecipe.img }) ), React.createElement( "div", { className: "row text-left" }, React.createElement( "span", { className: "recipeHeader" }, " Ingredients:" ), React.createElement("br", null), React.createElement( "div", { className: "recipeInformation" }, React.createElement("br", null), React.createElement( "ul", null, ingredientsList ) ), React.createElement("br", null) ), React.createElement( "div", { className: "row text-left" }, React.createElement( "span", { className: "recipeHeader" }, " Directions:" ), React.createElement("br", null), React.createElement( "div", { className: "recipeInformation" }, React.createElement("br", null), React.createElement( "ul", null, directionsList ) ), React.createElement("br", null) ) ); return jsxExpression; }; RecipeBox.prototype.render = function render() { return React.createElement( "div", { className: "container" }, React.createElement( "div", { className: "row" }, React.createElement( "div", { className: "recipeBoxHeader text-center" }, "Recipe Box" ) ), React.createElement( "div", { className: "row" }, this.mapRecipes() ), React.createElement( "div", { className: "row displayedRecipe" }, !this.state.displayedRecipe ? null : this.renderRecipe() ), React.createElement( "div", { className: "text-center" }, React.createElement( "button", { className: "btn btn-primary", onClick: this.open }, "Add recipe" ) ), React.createElement("br", null), React.createElement("br", null), React.createElement( Modal, { show: this.state.showModal, onHide: this.close }, React.createElement( Modal.Header, { closeButton: true }, React.createElement( Modal.Title, null, "Add new recipe" ) ), React.createElement( Modal.Body, null, React.createElement( "h4", null, "Recipe" ), React.createElement("input", { type: "text", name: "newRecipeName", value: this.state.newRecipeName, onChange: this.modalRecipeForm, placeholder: "Recipe name" }), React.createElement( "h4", null, "Ingredients" ), React.createElement("textarea", { type: "text", name: "newRecipeIngredients", value: this.state.newRecipeIngredients, onChange: this.modalRecipeForm, placeholder: "Ingredients, separated by comma" }), React.createElement( "h4", null, "Directions" ), React.createElement("textarea", { type: "text", name: "newRecipeDirections", value: this.state.newRecipeDirections, onChange: this.modalRecipeForm, placeholder: "Directions, separated by comma" }), React.createElement( "h4", null, "Illustrative image" ), React.createElement("input", { type: "text", name: "newRecipeImg", value: this.state.newRecipeImg, onChange: this.modalRecipeForm, placeholder: "Insert url with illustrative image" }) ), React.createElement( Modal.Footer, null, React.createElement( "button", { className: "btn btn-success", onClick: this.newRecipe }, "Save" ), React.createElement( Button, { onClick: this.close }, "Close" ) ) ), React.createElement( Modal, { show: this.state.showModalEdition, onHide: this.close }, React.createElement( Modal.Header, { closeButton: true }, React.createElement( Modal.Title, null, this.state.editRecipeName ) ), React.createElement( Modal.Body, null, React.createElement( "h4", null, "Recipe" ), React.createElement("input", { type: "text", name: "editRecipeName", value: this.state.editRecipeName, onChange: this.modalRecipeForm, placeholder: "Recipe name" }), React.createElement( "h4", null, "Ingredients" ), React.createElement("textarea", { type: "text", name: "editRecipeIngredients", value: this.state.editRecipeIngredients, onChange: this.modalRecipeForm, placeholder: "Ingredients, separated by comma" }), React.createElement( "h4", null, "Directions" ), React.createElement("textarea", { type: "text", name: "editRecipeDirections", value: this.state.editRecipeDirections, onChange: this.modalRecipeForm, placeholder: "Directions, separated by comma" }), React.createElement( "h4", null, "Illustrative image" ), React.createElement("input", { type: "text", name: "editRecipeImg", value: this.state.editRecipeImg, onChange: this.modalRecipeForm, placeholder: "Insert url with illustrative image" }) ), React.createElement( Modal.Footer, null, React.createElement( "button", { className: "btn btn-success", onClick: this.saveEditedRecipe }, "Save" ), React.createElement( Button, { onClick: this.close }, "Close" ) ) ) ); }; return RecipeBox;
}(React.Component);
ReactDOM.render(React.createElement(RecipeBox, null), document.getElementById("root"));
Recipe Box - Script Codes
Recipe Box - Script Codes
Home Page Home
Developer Matheus
Username MatheusLima92
Uploaded January 13, 2023
Rating 3
Size 9,514 Kb
Views 2,024
Do you need developer help for Recipe Box?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matheus (MatheusLima92) Script Codes
Name
VotingApp - Authenticated
Test environment
Wikipedia viewer
A Pen by Matheus
Markdown Previewer
Quote Machine
Alumni ECA
Tic-Tac-Toe Game - v3
Game of Life
Voting App
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!