Recipe Book

Developer
Thomas Vaeth
Size
5,375 Kb
Views
26,312
  1. Recipe Book Previews
  2. Recipe Book HTML Codes
  3. Recipe Book CSS Codes
  4. Recipe Book JS Codes

How do I make an recipe book?

Recipe Book for FreeCodeCamp.. What is a recipe book? How do you make a recipe book? This script and codes were developed by Thomas Vaeth on 24 September 2022, Saturday.

Recipe Book Previews
IQ Test

Recipe Book - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Recipe Book</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Coming+Soon'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="freecodecamp"></div>
<div id="recipe"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.2/react-bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Recipe Book - Script Codes CSS Codes

body { font-family: 'Coming Soon', cursive;
}
#freecodecamp { margin-top: 20px;
}
#freecodecamp h1 { text-align: center;
}
#freecodecamp .panel-group { margin-bottom: 10px;
}
#freecodecamp .panel-group .list-group { margin-bottom: 10px;
}

Recipe Book - Script Codes JS Codes

'use strict';
var Accordion = ReactBootstrap.Accordion;
var ButtonToolbar = ReactBootstrap.ButtonToolbar;
var Button = ReactBootstrap.Button;
var Col = ReactBootstrap.Col;
var Input = ReactBootstrap.Input;
var ListGroup = ReactBootstrap.ListGroup;
var ListGroupItem = ReactBootstrap.ListGroupItem;
var Modal = ReactBootstrap.Modal;
var Panel = ReactBootstrap.Panel;
var Row = ReactBootstrap.Row;
var recipes = typeof localStorage['recipeBook'] !== 'undefined' ? JSON.parse(localStorage['recipeBook']) : [{ title: 'Chicken Quesadillas', ingredients: ['Chicken Breast', 'Shredded Cheddar Cheese', 'Shredded Monterey Jack Cheese', 'Flour Tortillas'] }, { title: 'Cereal', ingredients: ['Cinnamon Toast Crunch', 'Milk'] }, { title: 'Baked Ziti', ingredients: ['Ziti Pasta', 'Tomato Sauce', 'Mozzarella Cheese', 'Parmesan Cheese'] }], recipeTitle = '', recipeIngredients = [];
var App = React.createClass({	displayName: 'App',	getInitialState: function getInitialState() {	return { modal: false };	},	openRecipe: function openRecipe() {	this.setState({ modal: true });	// I need to ask Quincy/FCC about this small section because DOM wasn't working.	if (document.getElementById('title') && document.getElementById('ingredients')) {	$('#title').val(recipeTitle);	$('#ingredients').val(recipeIngredients);	if (recipeTitle !== '') {	$('#modalTitle').text('Edit Recipe');	$('#modalButton').text('Edit');	}	} else {	window.requestAnimationFrame(this.openRecipe);	}	},	closeRecipe: function closeRecipe() {	recipeTitle = '';	recipeIngredients = [];	this.setState({ modal: false });	},	addRecipe: function addRecipe() {	var title = document.getElementById('title').value;	var ingredients = document.getElementById('ingredients').value.split(',');	var previousRecipe = false;	recipes.forEach(function (recipe) {	if (recipe.title === title) {	recipe.ingredients = ingredients;	previousRecipe = true;	}	});	// Using ES2015 to push object to the array!	if (!previousRecipe) recipes.push({ title: title, ingredients: ingredients });	renderRecipes();	this.closeRecipe();	},	render: function render() {	return React.createElement(	'div',	null,	React.createElement(	Col,	{ xs: 10, xsOffset: 1, sm: 6, smOffset: 3, md: 4, mdOffset: 4 },	React.createElement(	Button,	{ bsStyle: 'primary', id: 'modal', onClick: this.openRecipe },	'Add Recipe'	)	),	React.createElement(	Modal,	{ bsSize: 'sm', show: this.state.modal, onHide: this.closeRecipe },	React.createElement(	Modal.Header,	{ closeButton: 'true' },	React.createElement(	Modal.Title,	{ id: 'modalTitle' },	'Add Recipe'	)	),	React.createElement(	Modal.Body,	null,	React.createElement(	'form',	null,	React.createElement(Input, { type: 'text', id: 'title', label: 'Name', placeholder: 'Name', autoFocus: 'true' }),	React.createElement(Input, { type: 'textarea', rows: '3', id: 'ingredients', label: 'Ingredients', placeholder: 'Ingredients seperated by commas' })	)	),	React.createElement(	Modal.Footer,	null,	React.createElement(	Button,	{ id: 'modalButton', bsStyle: 'success', onClick: this.addRecipe },	'Add'	),	React.createElement(	Button,	{ onClick: this.closeRecipe },	'Close'	)	)	)	);	}
});
var RecipeBook = React.createClass({	displayName: 'RecipeBook',	render: function render() {	return React.createElement(	Col,	{ xs: 10, xsOffset: 1, sm: 6, smOffset: 3, md: 4, mdOffset: 4 },	React.createElement(	'h1',	null,	'Recipe Box'	),	React.createElement(	Accordion,	null,	this.props.data	)	);	}
});
var IngredientsList = React.createClass({	displayName: 'IngredientsList',	render: function render() {	var ingredientsList = this.props.ingredients.map(function (ingredient, idx) {	return React.createElement(	ListGroupItem,	{ key: idx },	ingredient	);	});	return React.createElement(	ListGroup,	null,	ingredientsList	);	}
});
var Recipe = React.createClass({	displayName: 'Recipe',	editRecipe: function editRecipe() {	recipeTitle = this.props.title;	recipeIngredients = this.props.ingredients;	document.getElementById('modal').click();	},	removeRecipe: function removeRecipe() {	recipes.splice(this.props.index, 1);	renderRecipes();	},	render: function render() {	return React.createElement(	'div',	null,	React.createElement(IngredientsList, { ingredients: this.props.ingredients }),	React.createElement(	ButtonToolbar,	null,	React.createElement(	Button,	{ bsStyle: 'danger', onClick: this.removeRecipe },	'Delete'	),	React.createElement(	Button,	{ bsStyle: 'info', onClick: this.editRecipe },	'Edit'	)	)	);	}
});
function renderRecipes() {	localStorage.setItem('recipeBook', JSON.stringify(recipes));	var recipeArr = [];	recipes.forEach(function (recipe, idx) {	recipeArr.push(React.createElement(	Panel,	{ header: recipe.title, eventKey: idx },	React.createElement(Recipe, { index: idx, title: recipe.title, ingredients: recipe.ingredients })	));	});	ReactDOM.render(React.createElement(RecipeBook, { data: recipeArr }), document.getElementById('freecodecamp'));
}
ReactDOM.render(React.createElement(App, null), document.getElementById('recipe'));
renderRecipes();
Recipe Book - Script Codes
Recipe Book - Script Codes
Home Page Home
Developer Thomas Vaeth
Username thomasvaeth
Uploaded September 24, 2022
Rating 3
Size 5,375 Kb
Views 26,312
Do you need developer help for Recipe Book?

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!

Thomas Vaeth (thomasvaeth) Script Codes
Name
Pomodoro Clock
Button Offset Mixin
Flexbox Flex-Grow Mast
Flexbox Sticky Navigation
Pokemon React
Wikipedia Viewer
Wired Link Mixin
SVG Mouse Animation
Camper Leaderboard
Image Loop on Hover
Create amazing blog posts 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!