123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container-fluid">
	<div class="row mt-5">
		<div class="col-12">
			<div id="btn-add"></div>
		</div>
		
		<div class="col-12" id="container"></div>
	</div>
</div>

            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Arvo|Titan+One)

.container
	margin-top: 25px
	
.btn
	font-family: 'Arvo', serif
	font-size: 1.5em

h2, h4 ,h5
	font-family: 'Titan One', cursive

li
	font-size: 1em

textarea
	resize: none
	margin-bottom: 15px
	height: 150px !important
input
	margin-bottom: 15px

.modal-header
	display: block !important
            
          
!
            
              const {
	Card,
	CardImg,
	CardText,
	CardBody,
	CardTitle,
	CardHeader,
	CardSubtitle,
	Button,
	Label,
	Input
} = Reactstrap;
var Modal = ReactBootstrap.Modal
var OverlayTrigger = ReactBootstrap.OverlayTrigger;

// Load Recipe Items or set default Recipe Items
var recipes =
		typeof localStorage["recipeBook"] != "undefined"
			? JSON.parse(localStorage["recipeBook"])
			: [
					{
						title: "Pumpkin Pie",
						ingredients: [
							"1 medium sugar pumpkin",
							"1 tablespoon vegetable oil",
							"1 recipe pastry for a 9 inch single crust pie",
							"1/2 teaspoon ground ginger",
							"1/2 teaspoon ground cinnamon",
							"1 teaspoon salt","4 eggs, lightly beaten",
							"1 cup honey, warmed slightly","1/2 cup milk"
						],
						directions:[
							"Cut pumpkin in half, and remove seeds. Lightly oil the cut surface. Place cut side down on a jelly roll pan lined with foil and lightly oiled. Bake at 325 degrees F (165 degrees C) until the flesh is tender when poked with a fork. Cool until just warm. Scrape the pumpkin flesh from the peel. Either mash, or puree in small batches in a blender.","In large bowl, blend together 2 cups pumpkin puree, spices, and salt. Beat in eggs, honey, milk, and cream. Pour filling into pie shell.","Bake at 400 degrees F ( 205 degrees C) for 50 to 55 minutes, or until a knife inserted 1 inch from edge of pie comes out clean. Cool on a wire rack."
						]
					},
					{
						title: "Spaghetti",
						ingredients: ["Noodles", "1 (6 ounce) can tomato paste", "(Optional) Meatballs or ground beef"],
						directions:[
							"Combine ground beef, onion, garlic, and green pepper in a large saucepan. Cook and stir until meat is brown and vegetables are tender. Drain grease.","Stir diced tomatoes, tomato sauce, and tomato paste into the pan. Season with oregano, basil, salt, and pepper. Simmer spaghetti sauce for 1 hour, stirring occasionally."
						]
					},
					{
						title: "Tacos",
						ingredients: ["1lb. lean ground beef or ground turkey", 
													"1teaspoon chili powder", "1/2teaspoon garlic powder","1/2teaspoon salt", "1(8-oz.) can tomato sauce","12 taco shells","6oz. (1 1/2 cups) shredded American or Cheddar cheese","2cups shredded lettuce", "2 tomatoes, chopped","3/4cup salsa","3/4cup sour cream, if desired"],
						directions:[
							"Heat oven to 250°F. In medium skillet, brown ground beef and onion over medium heat for 8 to 10 minutes or until beef is thoroughly cooked, stirring frequently. Drain.","Stir in chili powder, salt, garlic powder and tomato sauce. Reduce heat to low; cover and simmer 10 minutes.","Meanwhile, place taco shells on ungreased cookie sheet. Heat at 250°F. for 5 minutes.","To assemble tacos, layer beef mixture, cheese, lettuce and tomatoes in each taco shell. Serve with salsa; top with sour cream"
						]
					},
					{
						title: "Choclate Ship Cookie's",
						ingredients: ["1 cup butter, softened", "1 cup white sugar", "1 cup packed brown sugar","2 eggs", "2 teaspoons vanilla extract","1 teaspoon baking soda","2 teaspoons hot water","1/2 teaspoon salt", "3 cups all-purpose flour","2 cups semisweet chocolate chips"],
						directions:[
							"Preheat oven to 350 degrees F (175 degrees C).","Cream together the butter, white sugar, and brown sugar until smooth. Beat in the eggs one at a time, then stir in the vanilla. Dissolve baking soda in hot water. Add to batter along with salt. Stir in flour, chocolate chips, and nuts. Drop by large spoonfuls onto ungreased pans.","Bake for about 10 minutes in the preheated oven, or until edges are nicely browned."	]
					},
					{
						title: "Quiche",
						ingredients: ["1 1/2 cups shredded Swiss cheese", 
													"4 teaspoons all-purpose flour", "1/2 cup cooked ham, diced(optional)","3 eggs", "1 cup milk","1/4 teaspoon salt","1/4 teaspoon ground dry mustard","1 (9 inch) unbaked pie crust", "2 tablespoons chopped fresh parsley, for garnish","2 tablespoons chopped pimento peppers, garnish"],
						directions:[
							"n medium bowl, toss 4 teaspoons flour with the grated cheese. Sprinkle mixture into the pie shell. On top of cheese, sprinkle 1/2 cup of diced ham.","In medium bowl, combine eggs, milk or cream, and then add salt and mustard powder. Beat until smooth and pour over cheese and ham.","Put piece of plastic wrap large enough to overlap sides over top of quiche, then a piece of foil, and seal well around the edges. (plastic keeps the foil from sticking to the food). Place prepared quiche in freezer.","When ready to prepare, preheat oven to 400 degrees F (200 degrees C.) Remove foil and plastic wrap. Put foil around edge of crust to protect it.", "Bake in the preheated oven for 60 minutes, or until filling is set and crust is golden brown. Garnish with parsley and pimiento if desired"
						]
					}
				],
	globalTitle = "",
	globalIngredients = [],
	globalDirections = []; // Define global title,ingredients and directions

// RecipeBook class. This holds all recipes.
var RecipeBook = React.createClass({
	render: function() {
		return (
			<div className="card-columns">{this.props.data}</div>
		);
	}
});

// Recipe class. This is the display for a recipe in RecipeBook
var Recipe = React.createClass({
	remove: function() {
		recipes.splice(this.props.index, 1);
		update();
	},
	edit: function() {
		globalTitle = this.props.title;
		globalIngredients = this.props.ingredients;
		globalDirections = this.props.directions;
		document.getElementById("show").click();
	},
	render: function() {
		return (
			<CardBody>
				<h4 className="text-center">Ingredients</h4>
				<hr />
				<CardText>
					<IngredientList ingredients={this.props.ingredients} />
				</CardText>
				<hr />
				<h4 className="text-center">Directions</h4>
				<hr />
				<CardText>
					<DirectionsList directions={this.props.directions}  />
				</CardText>

				<Button
					class="delete"
					color="danger"
					id={"btn-del" + this.props.index}
					onClick={this.remove}
				>
					Delete
				</Button>
				<Button
					color="success"
					className="pull-right"
					id={"btn-edit" + this.props.index}
					onClick={this.edit}
				>
					Edit
				</Button>
			</CardBody>
		);
	}
});

// IngredientList class. This lists all ingredients for a Recipe
var IngredientList = React.createClass({
	render: function() {
		var ingredientList = this.props.ingredients.map(function(ingredient) {
			return <li>{ingredient}</li>;
		});
		return <ul>{ingredientList}</ul>;
	}
});

// DirectionsList class. This lists all directions for a Recipe
var DirectionsList = React.createClass({
	render: function() {
		if(this.props.directions){
		var directionsList = this.props.directions.map(function(directions) {
			return <li className="p-3">{directions}</li>;
		});
		}
		return <ol>{directionsList}</ol>;
	}
});

// RecipeAdd class. This contains the Modal and Add Recipe button
var RecipeAdd = React.createClass({
	getInitialState: function() {
		return { showModal: false };
	},
	close: function() {
		globalTitle = "";
		globalIngredients = [];
		this.setState({ showModal: false });
	},
	open: function() {
		this.setState({ showModal: true });
		if (
			document.getElementById("title") &&
			document.getElementById("ingredients")&&
			document.getElementById("directions")
		) {
			$("#title").val(globalTitle);
			$("#ingredients").val(globalIngredients);
			$("#directions").val(globalDirections);
			if (globalTitle != "") {
				$("#modalTitle").text("Edit Recipe");
				$("#addButton").text("Edit Recipe");
			}
		} else requestAnimationFrame(this.open);
	},
	add: function() {
		var title = document.getElementById("title").value;
		var ingredients = document.getElementById("ingredients").value.split(",");
		var directions = document.getElementById("directions").value.split(",");
		var exists = false;
		for (var i = 0; i < recipes.length; i++) {
			if (recipes[i].title === title) {
				recipes[i].ingredients = ingredients;
				recipes[i].directions = directions;
				exists = true;
				break;
			}
		}
		if (!exists) {
			if (title.length < 1) title = "Untitled";
			recipes.push({
				title: title,
				ingredients: document.getElementById("ingredients").value.split(","),
				directions:  document.getElementById("directions").value.split(",")
			});
		}
		update();
		this.close();
	},
	render: function() {
		return (
			<div>
				<Button color="primary" className="mb-5" size="lg" onClick={this.open} id="show">
					Add Recipe
				</Button>
				<Modal show={this.state.showModal} onHide={this.close}>
					<Modal.Header closeButton>
						<h2 id="modalTitle" className="text-uppercase">Add a Recipe</h2>
					</Modal.Header>
					<Modal.Body>
						<form>
							<Input type="text" label="Recipe" placeholder="Recipe Name" id="title" />
							<Input
								type="textarea"
								label="Ingredients"
								placeholder="Enter Ingredients,Separated,By Commas"
								id="ingredients"
							/>
							<Input
								type="textarea"
								label="Directions"
								placeholder="Enter Directions,Separated,By Commas and in order"
								id="directions"
							/>
						</form>
					</Modal.Body>
					<Modal.Footer>
						<Button onClick={this.add} color="success" id="addButton">
							Add Recipe
						</Button>
						<Button onClick={this.close} color="primary">
							Close
						</Button>
					</Modal.Footer>
				</Modal>
			</div>
		);
	}
});

// Update function to display all the recipes
function update() {
	localStorage.setItem("recipeBook", JSON.stringify(recipes));
	var rows = [];
	for (var i = 0; i < recipes.length; i++) {
		rows.push(
			<Card className="border-info">
				<CardHeader className="text-white bg-info">
					<h2 className="text-center">{recipes[i].title}</h2>
				</CardHeader>

				<Recipe
					title={recipes[i].title}
					ingredients={recipes[i].ingredients}
					directions={recipes[i].directions}
					index={i}
				/>
			</Card>
		);
	}
	ReactDOM.render(
		<RecipeBook data={rows} />,
		document.getElementById("container")
	);
}

// Render the add button (and modal)
ReactDOM.render(<RecipeAdd />, document.getElementById("btn-add"));
update(); // Initially render the recipe book

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console