Recipe Box

Developer
Beau Carnes
Size
5,955 Kb
Views
26,312
  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 Beau Carnes on 13 September 2022, Tuesday.

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.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container" class="center"> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://fb.me/react-15.1.0.js'></script>
<script src='https://fb.me/react-dom-15.1.0.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.29.5/react-bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Recipe Box - Script Codes CSS Codes

body { background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/food.png");
}
.center { width: 500px; margin: auto; padding-top: 30px;
}
h2 { font-size: large; margin-top: 0; font-style: italic;
}
h1 { font-family: Georgia;
}
.ingredient { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border: 1px solid lightgrey; padding: 5px;
}
.list { margin-bottom: 10px;
}
button { margin-right: 10px; margin-top: 10px;
}
#accordion { margin-bottom: 20px;
}
.ui-accordion-header { background: orange;
}

Recipe Box - Script Codes JS Codes

"use strict";
var Panel = ReactBootstrap.Panel, Accordion = ReactBootstrap.Accordion;
var Recipe = React.createClass({ displayName: "Recipe", delete: function _delete() { this.props.delete(this.props.index); }, render: function render() { var ingredientList = []; console.log(this.props.index); this.props.recipe.ingredients.forEach(function (ingredient) { ingredientList.push(React.createElement( "div", { key: ingredient, className: "ingredient" }, ingredient )); }); return React.createElement( Panel, { header: this.props.recipe.title, eventKey: this.props.index, bsStyle: "success", collapsible: "true", key: this.props.index }, React.createElement( "div", null, React.createElement( "h2", null, "Ingredients" ), ingredientList, React.createElement( "button", { className: "btn btn-danger", onClick: this.delete }, "Delete" ), React.createElement( "button", { className: "btn btn-default", "data-toggle": "modal", "data-index": this.props.index, "data-target": "#recipeModal", "data-addedit": "Edit", "data-title": this.props.recipe.title, "data-ingredients": this.props.recipe.ingredients }, "Edit" ) ) ); }
});
var RecipeBox = React.createClass({ displayName: "RecipeBox", render: function render() { var panels = []; var deleting = this.props.delete; this.props.recipes.forEach(function (recipe, index) { panels.push(React.createElement(Recipe, { key: recipe.title, recipe: recipe, "delete": deleting, index: index })); }); return React.createElement( Accordion, null, panels ); }
});
var AddNew = React.createClass({ displayName: "AddNew", add: function add() { $("#dialog").dialog("open"); }, render: function render() { return React.createElement( "div", null, React.createElement( "button", { className: "btn btn-primary", "data-toggle": "modal", "data-target": "#recipeModal", "data-index": "-1", "data-addedit": "Add", "data-title": "", "data-ingredients": "" }, "Add Recipe" ) ); }
});
var RecipeBoxContainer = React.createClass({ displayName: "RecipeBoxContainer", getInitialState: function getInitialState() { return { recipes: JSON.parse(localStorage.getItem("recipeBox")) }; }, edit: function edit() { var title = document.getElementById("recipeTitle-name").value; var ingredients = document.getElementById("message-text").value; ingredients = ingredients.split(","); console.log("title" + ingredients); var tempRecipe = { "title": title, "ingredients": ingredients }; console.log("tempRecipe" + tempRecipe); if (index !== -1) { this.state.recipes[index] = tempRecipe; } else { this.state.recipes.push(tempRecipe); } this.setState({ recipes: this.state.recipes }); localStorage.setItem("recipeBox", JSON.stringify(this.state.recipes)); $('#recipeModal').modal('hide'); }, delete: function _delete(index) { this.state.recipes.splice(index, 1); this.setState({ recipes: this.state.recipes }); localStorage.setItem("recipeBox", JSON.stringify(this.state.recipes)); }, render: function render() { return React.createElement( "div", null, React.createElement( "h1", null, "Recipes!" ), React.createElement(RecipeBox, { recipes: this.state.recipes, "delete": this.delete }), React.createElement(AddNew, null), React.createElement( "div", { className: "modal fade", id: "recipeModal", tabindex: "-1", role: "dialog", "aria-labelledby": "recipeModalLabel" }, React.createElement( "div", { className: "modal-dialog", role: "document" }, React.createElement( "div", { className: "modal-content" }, React.createElement( "div", { className: "modal-header" }, React.createElement( "button", { type: "button", className: "close", "data-dismiss": "modal", "aria-label": "Close" }, React.createElement( "span", { "aria-hidden": "true" }, "×" ) ), React.createElement( "h4", { className: "modal-title", id: "recipeModalLabel" }, "Recipe" ) ), React.createElement( "div", { className: "modal-body" }, React.createElement( "form", null, React.createElement( "div", { className: "form-group" }, React.createElement( "label", { "for": "recipeTitle-name", className: "control-label" }, "Name:" ), React.createElement("input", { type: "text", className: "form-control", id: "recipeTitle-name", placeholder: "Recipe name" }) ), React.createElement( "div", { className: "form-group" }, React.createElement( "label", { "for": "message-text", className: "control-label" }, "Ingredients:" ), React.createElement("textarea", { className: "form-control", id: "message-text", placeholder: "Enter ingredients,seperated,by commas" }) ) ) ), React.createElement( "div", { className: "modal-footer" }, React.createElement( "button", { type: "button", className: "btn btn-default", "data-dismiss": "modal" }, "Close" ), React.createElement( "button", { type: "button", className: "btn btn-primary", onClick: this.edit }, "Save Recipe" ) ) ) ) ) ); }
});
var defaultRecipes = [{ "title": "Spaghetti", "ingredients": ["Noodles", "Tomato Sauce", "(Optional) Meatballs"]
}, { "title": "Onion Pie", "ingredients": ["Onion", "Pie Crust", "Sounds Yummy right?"]
}, { "title": "Cereal", "ingredients": ["cereal", " milk"]
}];
if (localStorage.getItem("recipeBox") === null) { localStorage.setItem("recipeBox", JSON.stringify(defaultRecipes));
}
var localRecipes = JSON.parse(localStorage.getItem("recipeBox"));
var index = -1;
$(function () { $("#accordion").accordion({ heightStyle: "content", collapsible: true }); $('#recipeModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget); // Button that triggered the modal var recipeTitle = button.data('title'); // Extract info from data-* attributes var addEdit = button.data('addedit'); var ingredients = button.data('ingredients'); index = button.data('index'); var modal = $(this); modal.find('.modal-title').text(addEdit + ' Recipe!'); modal.find('.modal-body input').val(recipeTitle); modal.find('.modal-body textarea').val(ingredients.toString()); });
});
ReactDOM.render(React.createElement(RecipeBoxContainer, null), document.getElementById('container'));
Recipe Box - Script Codes
Recipe Box - Script Codes
Home Page Home
Developer Beau Carnes
Username beaucarnes
Uploaded September 13, 2022
Rating 3
Size 5,955 Kb
Views 26,312
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!

Beau Carnes (beaucarnes) Script Codes
Name
Hash Table
Weather app
Calculator
Functions
Hoisting
String Methods
Camper Leaderboard
Heaps
Wikipedia Viewer
Array iteration
Create amazing video scripts 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!