React Recipe Box

Developer
Codoer
Size
8,637 Kb
Views
12,144
  1. React Recipe Box Previews
  2. React Recipe Box HTML Codes
  3. React Recipe Box CSS Codes
  4. React Recipe Box JS Codes

How do I make an react recipe box?

What is a react recipe box? How do you make a react recipe box? This script and codes were developed by Codoer 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://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='app'></div> <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 src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

React Recipe Box - Script Codes CSS Codes

.head { background-color: #1e7145; display: center; height: 70px;
}
.maintitle { display: inline-block; margin: 17px 0 17px 30px; font-size: 25px; color: white;
}
.addButtonArea { text-align: right; margin-top: -50px; margin-right: 30px;
}
.area { text-align: center;
}
.title { cursor: pointer; background-color: #cbe86b; padding-top: 15px; padding-bottom: 15px; margin-left: 25%; color: black; width: 50%;
}
.list { background-color: #f2e9e1; padding-top: 12px; padding-bottom: 12px; margin-left: 25%; width: 50%;
}
#delBtn { margin-top: 10px; margin-right: 10px; margin-left: 37%;
}
#myBtn { margin-top: 10px;
}
.ing, .editarea, .addarea { display: none;
}
.tetitle, .teingredients { width: 100%;
}
.teingredients { margin-bottom: 7px;
}
.editsave { margin-right: 10px;
}
.addrecipe, .recip, .ingre { text-align: left;
}
/* The Modal (background) */
.modal1 { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: black; /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ text-align: left;
}
/* Modal Content */
.modal-content1 { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; width: 50%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s;
}
/* Add Animation */
@-webkit-keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; }
}
@keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; }
}
/* The Close Button */
.close1 { color: white; float: right; font-size: 28px; font-weight: bold;
}
.close1:hover,
.close1:focus { color: #000; text-decoration: none; cursor: pointer;
}
.modal-header1 { padding: 2px 16px; background-color: #5cb85c; color: white;
}
.modal-body1 { padding: 2px 16px;
}
.modal-footer1 { text-align: right; padding: 12px 16px; background-color: #5cb85c; color: white;
}

React 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; }
var data = localStorage['_c0d0er_recipes'] ? JSON.parse(localStorage['_c0d0er_recipes']) : [{ title: "Pumpkin Pie", ingredients: ["Pumpkin Puree", "Sweetened Condensed Milk", "Eggs", "Pumpkin Pie Spice", "Pie Crust"] }, { title: "Spaghetti", ingredients: ["Noodles", "Tomato Sauce", "(Optional) Meatballs"] }, { title: "Onion Pie", ingredients: ["Onion", "Pie Crust", "Sounds Yummy right?"] }];
var localdata = function localdata() { localStorage.setItem('_c0d0er_recipes', JSON.stringify(data)); return JSON.parse(localStorage['_c0d0er_recipes']);
};
var ti = ''; //edit title area value;
var te = ''; //edit ingredients area value;
var addTit = ''; //title textarea value under add;
var addIng = ''; // ingredients textarea value under add;
var Footer = function Footer(props) { return React.createElement( 'footer', null, React.createElement( 'p', null, 'Coded by ', React.createElement( 'a', { className: 'bill', href: 'https://codepen.io/c0d0er/' }, 'Bill' ) ) );
};
var List = function List(props) { var lnodes = props.name.map(function (val, ind) { return React.createElement( 'h4', { className: 'list' }, val ); }); return React.createElement( 'div', { className: 'ing ing1' }, lnodes, React.createElement( 'button', { type: 'button', id: 'delBtn', className: 'btn btn-danger', onClick: props.onClickD }, 'Delete' ), React.createElement( 'button', { type: 'button', id: 'myBtn', className: 'btn btn-info', onClick: props.onClickE }, 'Edit' ) );
};
var Edit = function Edit(props) { return React.createElement( 'div', { className: 'editarea modal1', id: 'myModal1' }, React.createElement( 'div', { className: 'modal-content1' }, React.createElement( 'div', { className: 'modal-header1' }, React.createElement( 'span', { className: 'close1', onClick: props.close }, '×' ), React.createElement( 'h3', null, 'Edit Recipe' ) ), React.createElement( 'div', { className: 'modal-body1' }, React.createElement( 'h5', null, 'Recipe' ), React.createElement( 'textarea', { className: 'tetitle', rows: '2', onChange: props.changeTit }, props.title ), React.createElement( 'h5', null, 'Ingredients' ), React.createElement( 'textarea', { className: 'teingredients', rows: '2', onChange: props.changeIng }, props.data ), React.createElement('br', null) ), React.createElement( 'div', { className: 'modal-footer1' }, React.createElement( 'button', { type: 'button', className: 'btn btn-primary editsave', onClick: props.save }, 'Save' ), React.createElement( 'button', { type: 'button', className: 'btn btn-default editclose', onClick: props.close }, 'Close' ) ) ) );
};
var Add = function Add(props) { return React.createElement( 'div', { className: 'addButtonArea' }, React.createElement( 'button', { type: 'button', className: 'btn btn-info', 'data-toggle': 'modal', 'data-target': '#myModal', onClick: props.add }, 'Add Recipe' ), React.createElement( 'div', { className: 'modal fade addarea', id: 'myModal', role: 'dialog' }, 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', onClick: props.addclose }, '×' ), React.createElement( 'h3', { className: 'addrecipe' }, 'Add a Recipe' ) ), React.createElement( 'div', { className: 'modal-body' }, React.createElement( 'h4', { className: 'recip' }, 'Recipe' ), React.createElement('textarea', { id: 'texttitid', className: 'tetitle', rows: '1', cols: '50', placeholder: 'Recipe Name', onChange: props.addtit }), React.createElement( 'h5', { className: 'ingre' }, 'Ingredients' ), React.createElement('textarea', { id: 'textingid', className: 'teingredients', rows: '2', cols: '50', placeholder: 'Enter Ingredients,Separated,By Commas', onChange: props.adding }), React.createElement('br', null) ), React.createElement( 'div', { className: 'modal-footer' }, React.createElement( 'button', { type: 'button', className: 'btn btn-info', 'data-dismiss': 'modal', onClick: props.addsave }, 'Save' ), React.createElement( 'button', { type: 'button', className: 'btn btn-default', 'data-dismiss': 'modal', onClick: props.addclose }, 'Close' ) ) ) ) ) );
};
var Box = function (_React$Component) { _inherits(Box, _React$Component); function Box(props) { _classCallCheck(this, Box); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.handleClick = function (e) { // click on the recipe title to toggle show and hide; var x = e.target.nextSibling; $(x).toggleClass('ing'); }; _this.handleClickD = function (e) { //click delete button; var h3title = $(e.target).parent().prev().text(); //get h3 text; var i = $(e.target).parent().prev().attr('id'); data.splice(i, 1); _this.setState({ recipes: localdata() }); $('.ing1').addClass('ing'); }; _this.handleClickE = function (e) { //click edit button; var z = $(e.target).parent().next(); $(z).css('display', 'block'); }; _this.handleTextTitle = function (e) { //get textarea title value under edit; ti = e.target.value; }; _this.handleTextIng = function (e) { //get textarea ingredients value under edit; te = e.target.value; }; _this.handleSave = function (e) { //click save button under edit; if (!ti && !te) { //user doesnt change anything and click save; ti = $(e.target).parent().parent().parent().parent().children().eq(0).text(); //h3 text; te = $(e.target).parent().prev().children().eq(3).text(); //ingredients text area text; } else if (!te && ti) { te = $(e.target).parent().prev().children().eq(3).text(); } //user only changes title and save; ingredients text area text; else if (!ti && te) { ti = $(e.target).parent().parent().parent().parent().children().eq(0).text(); } //user only changes ingredients and save;//h3 text; var s = $(e.target).parent().parent().parent().parent().children().eq(0).text(); //show title text; user changes both title and ingredients;//h3 text; var tearr = te.split(','); //ingredients array; var i = 5; // title text index; data.forEach(function (val, ind) { if (val.title === s) { i = ind; } }); data[i].title = ti; data[i].ingredients = tearr; $('.editarea').css('display', 'none'); _this.setState({ recipes: localdata() }); }; _this.handleClose = function (e) { //click close button under edit; var c = $(e.target).parent().parent().parent().parent().children().eq(0).text(); //get title text from h3 tag; var i = 5; data.forEach(function (val, ind) { if (val.title === c) { i = ind; } }); $(e.target).parent().prev().children().eq(1).val(data[i].title); //change textarea title text; $(e.target).parent().prev().children().eq(3).val(data[i].ingredients.join(', ')); //change textarea ingredients text; ti = data[i].title; te = data[i].ingredients.join(','); $('.editarea').css('display', 'none'); }; _this.handleAdd = function (e) { //click add button; $('.addarea').css('display', 'block'); }; _this.handleAddTitle = function (e) { //get textarea title text under add button; addTit = e.target.value; }; _this.handleAddIng = function (e) { //get textarea title text under add button; addIng = e.target.value; }; _this.handleAddSave = function (e) { //click save button under add; if (!addTit) { addTit = 'Untitled'; } var addIngArr = addIng.split(','); var addObj = { title: addTit, ingredients: addIngArr }; data.push(addObj); _this.setState({ recipes: localdata() }); $('.addarea').css('display', 'none'); $('#textingid').val(''); $('#texttitid').val(''); addIng = '';addTit = ''; }; _this.handleAddClose = function (e) { $('#textingid').val(''); $('#texttitid').val(''); addIng = '';addTit = ''; $('.addarea').css('display', 'none'); }; _this.state = { recipes: localdata() }; return _this; } Box.prototype.render = function render() { var _this2 = this; var nodes = this.state.recipes.map(function (val, ind) { return React.createElement( 'div', { className: 'area' }, React.createElement( 'h3', { className: 'title', id: ind, onClick: _this2.handleClick }, val.title ), React.createElement(List, { name: val.ingredients, onClickD: _this2.handleClickD, onClickE: _this2.handleClickE }), React.createElement(Edit, { title: val.title, data: val.ingredients.join(', '), changeTit: _this2.handleTextTitle, changeIng: _this2.handleTextIng, save: _this2.handleSave, close: _this2.handleClose }) ); }); return React.createElement( 'div', null, React.createElement( 'div', { className: 'head' }, React.createElement( 'div', { className: 'maintitle' }, 'Recipe Box' ), React.createElement(Add, { add: this.handleAdd, addtit: this.handleAddTitle, adding: this.handleAddIng, addsave: this.handleAddSave, addclose: this.handleAddClose }) ), nodes ); }; return Box;
}(React.Component);
ReactDOM.render(React.createElement(Box, null), document.getElementById('app'));
React Recipe Box - Script Codes
React Recipe Box - Script Codes
Home Page Home
Developer Codoer
Username c0d0er
Uploaded December 06, 2022
Rating 3
Size 8,637 Kb
Views 12,144
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!

Codoer (c0d0er) Script Codes
Name
Pomodoro Clock
Random Quote Machine
Visualize Meteorites Map Data Across the Globe
Calculator
Nikola Tesla Tribute Page
Visualize National Contiguity with a Force Directed Graph
React photo carousel
React Camper Leaderboard
Jd wiki
Pomodoro 1 timer
Create amazing sales emails 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!