React Recipe Box

Developer
Mihkel
Size
5,347 Kb
Views
8,092
  1. React Recipe Box Previews
  2. React Recipe Box HTML Codes
  3. React Recipe Box JS Codes

How do I make an react recipe box?

Add, delete and edit recipes. You can come back later and they are still there.. What is a react recipe box? How do you make a react recipe box? This script and codes were developed by Mihkel on 06 December 2022, Tuesday.

React Recipe Box Previews
IQ Test

React Recipe Box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Recipe Box</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
</head>
<body> <!--<div id="main"></div>-->
<h1 class="text-center"><a href="https://krokodilll.github.io/react-recipe-box/" target="_blank">https://krokodilll.github.io/react-recipe-box/</a></h1> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js'></script>
<script src='https://cdn.jsdelivr.net/refluxjs/0.2.11/reflux.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

React Recipe Box - Script Codes JS Codes

"use strict";
var Actions = Reflux.createActions(["createRecipe", "removeRecipe", "editRecipe", "getRecipes"]);
var RecipeStore = Reflux.createStore({	listenables: [Actions],	getRecipes: function getRecipes() {	this.trigger(localStorage);	},	createRecipe: function createRecipe(body) {	localStorage.setItem(body.title, body.ingredients);	this.trigger(localStorage);	},	removeRecipe: function removeRecipe(item) {	localStorage.removeItem(item);	this.trigger(localStorage);	},	editRecipe: function editRecipe(old, updated, ingredients) {	localStorage.removeItem(old);	localStorage.setItem(updated, ingredients);	this.trigger(localStorage);	}
});
var ListItem = React.createClass({	displayName: "ListItem",	render: function render() {	return React.createElement(	"li",	{ className: "list-group-item" },	this.props.ingredient	);	}
});
var Modal = React.createClass({	displayName: "Modal",	getInitialState: function getInitialState() {	return {	nameVal: this.props.name || "",	ingredientsVal: this.props.ingredients || ""	};	},	onChange: function onChange(e) {	this.setState({ ingredientsVal: e.target.value });	},	onChange2: function onChange2(e) {	this.setState({ nameVal: e.target.value });	},	clearFields: function clearFields() {	this.setState({	nameVal: "",	ingredientsVal: ""	});	},	render: function render() {	var areaStyle = { resize: "none" };	var margin = { marginLeft: 14 };	return React.createElement(	"div",	{ className: "modal fade", id: this.props.id },	React.createElement(	"div",	{ className: "modal-dialog" },	React.createElement(	"div",	{ className: "modal-content" },	React.createElement(	"div",	{ className: "modal-header" },	React.createElement(	"button",	{ type: "button", className: "close", "data-dismiss": "modal" },	"×"	),	React.createElement(	"h3",	{ style: margin, className: "modal-title" },	this.props.title	)	),	React.createElement(	"div",	{ className: "modal-body col-sm-12" },	React.createElement(	"div",	{ className: "col-sm-6" },	React.createElement(	"h4",	null,	"Recipe Name"	),	React.createElement("input", {	type: "text",	className: "form-control",	placeholder: "Recipe name..",	onChange: this.onChange2,	value: this.state.nameVal	})	),	React.createElement(	"div",	{ className: "col-sm-12" },	React.createElement(	"h4",	null,	"Ingredients"	),	React.createElement("textarea", {	style: areaStyle,	rows: "5",	className: "form-control",	placeholder: "Ingredients.. separated by comma",	onChange: this.onChange,	value: this.state.ingredientsVal })	)	),	React.createElement(	"div",	{ className: "modal-footer" },	React.createElement(	"button",	{ type: "button", className: "btn btn-default", "data-dismiss": "modal" },	"Close"	),	React.createElement(	"button",	{ type: "button", onClick: this.props.callback, className: "btn btn-success", "data-dismiss": "modal" },	this.props.method	)	)	)	)	);	}
});
var Panel = React.createClass({	displayName: "Panel",	delete: function _delete() {	Actions.removeRecipe(this.props.recipeName);	},	edit: function edit() {	if (localStorage.hasOwnProperty(this.refs.modal.state.nameVal) && this.refs.modal.state.nameVal !== this.props.recipeName) {	alert("You already have a recipe with that name!");	} else if (!this.refs.modal.state.nameVal || !this.refs.modal.state.ingredientsVal) {	alert("Form can't be empty you dummy!");	} else {	Actions.editRecipe(this.props.recipeName, this.refs.modal.state.nameVal, this.refs.modal.state.ingredientsVal);	}	},	render: function render() {	var center = {	textAlign: "center"	};	var id = new Date().getMilliseconds();	var arr = this.props.ingredients.split(",");	var ingredients = arr.map(function (item, index) {	return React.createElement(ListItem, { key: index, ingredient: item });	});	return React.createElement(	"div",	null,	React.createElement(Modal, {	ref: "modal",	name: this.props.recipeName,	ingredients: this.props.ingredients,	id: id + 1000, method: "Edit",	callback: this.edit,	title: this.props.recipeName	}),	React.createElement(	"div",	{ className: "panel panel-default" },	React.createElement(	"div",	{ className: "panel-heading" },	React.createElement(	"h4",	{ className: "panel-title" },	React.createElement(	"a",	{ href: "#" + id, "data-toggle": "collapse", "data-parent": "#panel-parent" },	this.props.recipeName	)	)	),	React.createElement(	"div",	{ id: id, className: "panel-collapse collapse" },	React.createElement(	"div",	{ className: "panel-body" },	React.createElement(	"h4",	{ style: center },	"Ingredients"	),	React.createElement(	"ul",	{ className: "list-group" },	ingredients	),	React.createElement(	"button",	{ onClick: this.delete, type: "button", className: "btn btn-danger btn-md" },	"Delete"	),	React.createElement(	"button",	{	type: "button",	className: "btn btn-default btn-md",	"data-toggle": "modal",	"data-target": "#" + (id + 1000) },	"Edit"	)	)	)	)	);	}
});
var MainContainer = React.createClass({	displayName: "MainContainer",	mixins: [Reflux.listenTo(RecipeStore, "onTrigger")],	getInitialState: function getInitialState() {	return { recipes: {} };	},	componentWillMount: function componentWillMount() {	Actions.getRecipes();	},	create: function create() {	if (localStorage.hasOwnProperty(this.refs.modal.state.nameVal)) {	alert("You already have a recipe with that name");	} else if (!this.refs.modal.state.nameVal || !this.refs.modal.state.ingredientsVal) {	alert("Form can't be empty you dummy!");	} else {	var body = {	title: this.refs.modal.state.nameVal,	ingredients: this.refs.modal.state.ingredientsVal	};	Actions.createRecipe(body);	this.refs.modal.clearFields();	}	},	onTrigger: function onTrigger(data) {	this.setState({ recipes: data });	},	render: function render() {	document.body.style.background = "#FAFAFA";	var panels = [];	for (var k in this.state.recipes) {	panels.push([React.createElement(Panel, { key: k, ingredients: this.state.recipes[k], recipeName: k })]);	}	return React.createElement(	"div",	{ className: "container" },	React.createElement(Modal, { id: "mymodal", method: "Add", ref: "modal", callback: this.create, title: "New Recipe" }),	React.createElement(	"div",	{ className: "col-sm-12 well" },	React.createElement(	"div",	{ className: "panel-group", id: "panel-parent" },	panels	)	),	React.createElement(	"button",	{ type: "button", className: "btn btn-primary btn-md", "data-toggle": "modal", "data-target": "#mymodal" },	"Add new recipe"	)	);	}
});
ReactDOM.render(React.createElement(MainContainer, null), document.getElementById("main"));
React Recipe Box - Script Codes
React Recipe Box - Script Codes
Home Page Home
Developer Mihkel
Username Krokodill
Uploaded December 06, 2022
Rating 3
Size 5,347 Kb
Views 8,092
Do you need developer help for React 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!

Mihkel (Krokodill) Script Codes
Name
Slide out navigation
Pomodoro Timer
Form validation with jQuery
React.js Game of Life
Snake Game
React Markdown Preview
Tic-Tac-Toe
Local Weather
Random Quote Machine
Twitch Status 2.0
Create amazing art & images 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!