Recipe Book

Developer
Ajala Comfort
Size
4,813 Kb
Views
8,096
  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 built with Reactjs and Sass. What is a recipe book? How do you make a recipe book? This script and codes were developed by Ajala Comfort on 11 January 2023, Wednesday.

Recipe Book Previews
IQ Test

Recipe Book - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Recipe Book </title> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'> <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> <body> <div id="space"></div>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.25.1/react-bootstrap.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js'></script> <script src="js/index.js"></script>
</body>
</html>

Recipe Book - Script Codes CSS Codes

body { width: 100%; height: 700px;
}
div { width: 80%; margin: auto; font-family: 'Roboto', sans-serif;
}
div h4 { cursor: pointer;
}
.modal-container { position: relative;
}
.modal-container .modal, .modal-container .modal-backdrop { position: absolute;
}
#addingRecipue { display: none;
}
.title { cursor: pointer;
}
button { margin-left: 2%;
}

Recipe Book - Script Codes JS Codes

"use strict";
var RecipeBook = React.createClass({ displayName: "RecipeBook", getInitialState: function getInitialState() { var recipes = localStorage.getItem("_RecipeBOOK"); recipes = JSON.parse(recipes); if (recipes == null) { recipes = {}; } return { recipes: recipes, showModal: false }; }, close: function close() { this.setState({ showModal: false }); }, open: function open() { this.setState({ showModal: true }); }, updateLocalStorage: function updateLocalStorage(recipes) { recipes = JSON.stringify(recipes); localStorage.setItem("_RecipeBOOK", recipes); }, delete: function _delete(name) { var myRecipes = this.state.recipes; delete myRecipes[name]; this.setState({ recipes: myRecipes }); this.updateLocalStorage(myRecipes); console.log(myRecipes); }, changeIngredients: function changeIngredients(e) { var id = $(e.target).attr("id"); var ingredients = e.target.value; ingredients = ingredients.split(","); var recipes = this.state.recipes; recipes[id] = ingredients; this.setState({ recipes: recipes }); this.updateLocalStorage(recipes); }, addNewRecipe: function addNewRecipe() { var recipe_name = $("#newrecipename").val(); var recipe_ingred = $("#newrecipeingredients").val(); recipe_ingred = recipe_ingred.split(","); var recipes = this.state.recipes; recipes[recipe_name] = recipe_ingred; this.setState({ recipes: recipes }); this.updateLocalStorage(recipes); }, render: function render() { var self = this; var RecipeNames = Object.keys(this.state.recipes); var ButtonGroup = ReactBootstrap.ButtonGroup, Button = ReactBootstrap.Button, Modal = ReactBootstrap.Modal; return React.createElement( "div", null, React.createElement( "button", { className: "btn btn-success", id: "addNewRecipe" }, "Add New Recipe" ), React.createElement( "div", { id: "addingRecipue", className: "input-group" }, React.createElement("input", { type: "text", placeholder: "add recipe name", id: "newrecipename", className: "form-control" }), React.createElement("input", { type: "text", placeholder: "add recipe ingredients seperated by comma", id: "newrecipeingredients", className: "form-control" }), React.createElement( "button", { onClick: self.addNewRecipe, id: "clossnewRecl", className: "btn btn-default" }, "Save" ) ), RecipeNames.map(function (recipename) { return React.createElement( "div", null, React.createElement( "h2", { className: "title" }, recipename ), React.createElement( "div", { className: "ingredients " }, React.createElement( "ul", { className: "list-group" }, self.state.recipes[recipename].map(function (recipe) { return React.createElement( "li", { className: "list-group-item" }, recipe ); }) ), React.createElement( "button", { onClick: self.delete.bind(self, recipename), className: "btn btn-danger" }, "Delete" ), React.createElement( Button, { bsStyle: "primary", bsSize: "small", onClick: self.open }, "Edit" ), React.createElement( Modal, { show: self.state.showModal, onHide: self.close }, React.createElement( Modal.Header, { closeButton: true }, React.createElement( Modal.Title, null, "Edit Recipe: ", recipename ) ), React.createElement( Modal.Body, null, React.createElement("input", { type: "text", placeholder: "Type in Ingredients seperated by comma", onChange: self.changeIngredients, id: recipename }) ), React.createElement( Modal.Footer, null, React.createElement( Button, { onClick: self.close }, "Close" ) ) ) ) ); }) ); }
});
React.render(React.createElement(RecipeBook, null), document.getElementById("space"));
$(document).ready(function () { $(".ingredients").hide(); $(document).on("click", ".title", function () { $(this).siblings(".ingredients").slideToggle(); }); $("#addNewRecipe").on("click", function () { $("#addingRecipue").slideToggle(); }); $("#clossnewRecl").on("click", function () { $("#addingRecipue").slideToggle(); });
});
Recipe Book - Script Codes
Recipe Book - Script Codes
Home Page Home
Developer Ajala Comfort
Username AJALACOMFORT
Uploaded January 11, 2023
Rating 3
Size 4,813 Kb
Views 8,096
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!

Ajala Comfort (AJALACOMFORT) Script Codes
Name
Slide Show with ReactJs
Intermediate Todo List with React.js
COLOR PICKER
Basic ReactJs Form
Material Chat app Interface with ReactJS
Calender Update
Hashtables
Palindrome Word
Second Website
Bill Splitting App
Create amazing marketing copy 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!