css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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 id="container"></div>

            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Lobster');

body {
  background-color: #FF6A00;
}
h1{
  text-align:center;
  font-family: 'Lobster', cursive;
  color: white;
  margin-bottom: 20px;
}

.index-view {
  margin-left: 200px;
  width:65%;
  background-color:#00A3B2;
  color:#FF6A00;
  font-weight: bold;
  font-size: 20px;
  border-radius: 20px;
  overflow: auto;
}
.index-view li {
  list-style: none;
}
li:hover {
  cursor: pointer;
  color: white;
}
h2 {
  display: inline-block;
}
.current-recipe{
  margin-left: 200px;
  width:65%;
  postion:relative;
  margin-top:25px; 
  background: #00A3B2;
  border-radius: 15px;
  color: white;
  margin-top: 15px;
  font-family: 'Lobster', cursive;
}
.flex-container{
  display: flex;
  flex-direction: column;
}
.recipe-info{
  
  color: white;
  font-family: 'Lobster', cursive;
  font-size: 20px;
  margin-left: 10px;
  
}
.recipe-print{
  margin-left: 20px;
  color:white;
}
.recipe{
   margin-left: 200px;
   width:65%;
  background:#FF8F3F;
  overflow:auto;
  border-radius: 20px;
  position:relative;
  bottom:20px;
}
i{
  color: #FF8F3F;
  margin-left: 20px;
  
}
i:hover{
  cursor: pointer;
  color: #FF6A00;
}
.delete{
  margin-left: 200px;
  width:65%;
  background: #00A3B2;;
  border-radius: 20px;
  position: relative;
  bottom: 20px;
  height: 65px;
}
.delete i{
  margin-top:20px;
}
@media only screen and (max-width:1024px) {
  .index-view {
    margin-left: 200px;
    width: 65%;
    }
  .current-recipe{
    margin-left: 200px;
    width: 65%;
  }
  .recipe{
    margin-left: 200px;
    width: 65%;
  }
  .delete{
    margin-left: 200px;
    width: 65%;
  }
  }

@media only screen and (max-width:650px) {
  .index-view {
    margin-left: 100px;
    width: 65%;
    }
  .current-recipe{
    margin-left: 100px;
    width: 65%;
  }
  .recipe{
    margin-left: 100px;
    width: 65%;
  }
  .delete{
    margin-left: 100px;
    width: 65%;
  }
}

  @media only screen and (max-width:425px) {
  .index-view {
    margin-left: 45px;
    width: 80%;
    }
  .current-recipe{
    margin-left: 45px;
    width: 80%;
  }
  .recipe{
    margin-left: 45px;
    width:80%
  }
  .delete{
    margin-left: 45px;
    width:80%
  }
}

@media only screen and (max-width:350px) {
  .index-view {
    margin-left: 45px;
    width: 80%;
    }
  .current-recipe{
    margin-left: 45px;
    width: 80%;
  }
  .recipe{
    margin-left: 45px;
    width:80%
  }
  .delete{
    margin-left: 45px;
    width:80%
  }
  .current-recipe i{
    width: 10px;
  }
}



  
            
          
!
            
              const Modal = ReactBootstrap.Modal;
class RecipeBox extends React.Component {
  constructor(props) {
    
    super(props);
    this.state = {
      editMode: false,
      editName: "",
      editDirections: "",
      editIngredients: "",
      addName: "",
      addIngredients: "",
      addDirections: "",
      show: false,
      selectedRecipe: {},
      showModal: false,
      editIndex: "",
      recipes: [
        {
          name: "Ground Beef Tacos",

          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."],

          ingredients: ["1 lb. lean ground beef, 1 medium onion (chopped), 1 teaspoon chili powder, 1/2 teaspoon salt, 1/2 teaspoon garlic powder, 1 (8-oz.) can tomato sauce, 12 taco shells, 6 oz. (1 1/2 cups) shredded American or Cheddar cheese, 2 cups shredded lettuce, 2 tomatoes, chopped, 3/4 cup salsa, 3/4 cup sour cream (if desired)"]
        },
        {
          name: "Home Made Pizza",

          directions: ["In large bowl, dissolve yeast and sugar in water; let stand for 5 minutes.", 
                       "Add oil and salt. Stir in flour, a cup at a time, until a soft dough forms.",
                       "Turn onto floured surface; knead until smooth and elastic, about 2-3 minutes.",
                       "Place in a greased bowl, turning once to grease the top. Cover and let rise in a warm place until doubled, about 45 minutes.",
                       "Meanwhile, cook beef and onion over medium heat until no longer pink; drain.",
                       "Punch down dough; divide in half. Press each into a greased 12-in. pizza pan.",
                       "Combine the tomato sauce, oregano and basil; spread over each crust.",
                       "Top with beef mixture, green pepper and cheese., Bake at 400° for 25-30 minutes or until crust is lightly browned. "],

          ingredients: ["1 package (1/4 ounce) active", 
                        "dry yeast,1 teaspoon, sugar",
                        "1-1/4 cups warm water (110° to 115°)",
                        "1/4 cup canola oil 1 teaspoon salt",
                        "3-1/2 cups all-purpose flour",
                        "1/2 pound ground beef, 1 small onion",
                        "chopped, 1 can (15 ounces) tomato sauce",
                        "3 teaspoons dried oregano",
                        "1 teaspoon dried basil",
                        "1 medium green pepper",
                        "diced, 2 cups shredded part-skim mozzarella cheese"]
        }
      ]
    };
  }

  handleChange = (evt) => {
    this.setState({ [evt.target.name]: evt.target.value.split(",").join("/n") });
  }
  //Function for adding the recipe
  handleAddSubmit = () => {
    if(this.state.addName === ''){
      alert("Please Enter a Recipe Name")
    }else if(this.state.addDirections === ''){
      alert("Please Enter The Directions")
    }else if(this.state.addIngredients === ''){
      alert("Please Enter The Ingredients")
    }else{
    const obj = {
      name: this.state.addName,
      directions: this.state.addDirections,
      ingredients: this.state.addIngredients
    };

    const recipes = [...this.state.recipes, obj];
    this.setState({
      recipes,
      addName: "",
      addIngredients: "",
      addDirections: "",
      show: false
    });
    }
  }
  
  //function for deleting the recipe
  deleteRecipe = () => {
    if(this.state.recipes.length == 1){
      alert("You must have one recipe at all times")
    }else{
      
    const newRecipes = this.state.recipes.filter(
      recipe => recipe.name !== this.state.selectedRecipe.name
    );
    this.setState({
      recipes: newRecipes,
      selectedRecipe: {}
    });
    }
  }
 
 
  //Function for editing the recipe
   editRecipe = ()  => {
   const origRecipes = [...this.state.recipes]
   const {selectedRecipe: {name}, editName, editIngredients, editDirections} = this.state
   const replacement = {
     name: editName,
     ingredients: editIngredients,
     directions: editDirections,
     editMode:true
   }
   const recipes = origRecipes.map(recipe => name === recipe.name ? replacement : recipe)
   this.setState({recipes,
                 showModal: false})
  }

  handleRecipeClick = (index) => {
    this.setState({
      selectedRecipe: { ...this.state.recipes[index] }
      
    });
  }

  handleClose = () => {
    this.setState({ show: false });
  }

  handleShow = () => {
    this.setState({ show: true });
  }

  handleModalClose = () => {
    this.setState({ showModal: false });
  }

  handleModalShow = () => {
    let thisDirections = this.state.selectedRecipe.directions.map((d) => { return d }).toString().split(",").join("\n");
    let thisIngred = this.state.selectedRecipe.ingredients.map((d) => { return  d }).toString().split(",").join("\n");
    this.setState({
      showModal: true, 
      editMode: true,
      editName: this.state.selectedRecipe.name,
      editDirections: thisDirections,
      editIngredients: thisIngred
  });
  }


  render() {
    const ITEMS = this.state.recipes.map(({ name }, index) => (
      <li>
        <div onClick={() => this.handleRecipeClick(index)}>{name}</div>
      </li>
    ));
    
    return (
      <div>
        <h1> Biggs Recipe Box</h1>
        
        <div className="index-view">
          <ul> {ITEMS}</ul>
        </div>
       
        <div className="current-recipe">
        <h2> Current Recipe </h2>
        <i className="far fa-plus-square fa-2x" onClick={this.handleShow}></i>
          <i className="far fa-edit fa-lg" onClick={this.handleModalShow}></i>
        </div>
        <br />
        
       
        <div className="recipe">
        <div className="recipe-info">
        Name:
          </div>
        <div ref="recipeName" className="recipe-print">{this.state.selectedRecipe.name}</div>
        <hr />
         <div className="recipe-info">
        Directions:
        </div>
        <div ref="cookDirections" className="recipe-print">
          <List items= {this.state.selectedRecipe.directions || []} />
         </div>
        <hr />
         
         <div className="recipe-info">
        Ingredients: 
           </div>
        <div className="recipe-print">
 <List items= {this.state.selectedRecipe.ingredients || []} />
          </div>
       
        <br />
        </div>
        
        <AddRecipe
          show={this.handleShow}
          close={this.handleClose}
          realShow={this.state.show}
          recName={this.state.addName}
          recIng={this.state.addIngredients}
          recDir={this.state.addDirections}
          handleChange={this.handleChange}
          addSubmit={this.handleAddSubmit}
        />
        <DeleteRecipe delete={this.deleteRecipe} />
        <EditRecipe
          shows={this.handleModalShow}
          closes={this.handleModalClose}
          theshow={this.state.showModal}
          edName={this.state.editName}
          edInstructions={this.state.editDirections}
          edIngredients={this.state.editIngredients}
          handleChange={this.handleChange}
          edit={this.editRecipe}
        />
       
      </div>
    );
  }
}
  
   const  List = props => {
    const liElems = props.items.map((item, i) =>  <li key={i}>{item}</li>);
       return <ul>{liElems}</ul>
  }

class AddRecipe extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
     <form>
      <div>
        <Modal show={this.props.realShow} onHide={this.props.close}>
          <Modal.Header closeButton>
            <Modal.Title>Add Recipe</Modal.Title>
          </Modal.Header>
          <Modal.Body>
             <div className="flex-container">
            <label> Recipe Name:  </label>
            <input
              type="text"
              value={this.props.recName}
              name="addName"
              onChange={this.props.handleChange}
              placeholder="Enter Recipe Name"
              required
            />
            <br />
            <label> Directions: </label>
            <textarea rows="4" cols="50"             
              type="text"
              value={this.props.recDir}
              name="addDirections"
              onChange={this.props.handleChange}
              placeholder="Enter directions seperated by a comma"
              required
            />
            <br />
           
            <label> Ingredients: </label>
            <textarea rows="4" cols="50"
              type="text"
              value={this.props.recIng}
              name="addIngredients"
              onChange={this.props.handleChange}
              placeholder="Enter ingredients seperated by a comma"
              required
            />
            
            <br />
            <button onClick={this.props.addSubmit}>ADD</button>
            </div>
          </Modal.Body>
          
        </Modal>
      </div>
      </form>
    );
  }
}

class DeleteRecipe extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div className="delete">
        <i className="fas fa-trash-alt fa-2x" onClick={this.props.delete}></i>
      </div>
    );
  }
}

class EditRecipe extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Modal show={this.props.theshow} onHide={this.props.closes}>
          <Modal.Header closeButton>
            <Modal.Title>Edit Recipe</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div className="flex-container">
            <label>Recipe Name: </label>
            <input
              type="text"
              value={this.props.edName}
              name="editName"
              onChange={this.props.handleChange}
              placeholder="Enter Recipe Name"
            />
            <br />
            <label>Directions: </label>
            <textarea rows="4" cols="50"
              type="text"
              value={this.props.edInstructions}
              name="editDirections"
              onChange={this.props.handleChange}
              placeholder="Enter directions seperated by a comma"
            />
            <br />
            <label>Ingredients: </label>
            <textarea rows="4" cols="50"
              type="text"
              value={this.props.edIngredients}
              name="editIngredients"
              onChange={this.props.handleChange}
              placeholder="Enter Ingredient seperated by a comma"
            />
            <button onClick={this.props.edit}>Edit</button>
            </div>
          </Modal.Body>
        </Modal>
      </div>
    );
  }
}
ReactDOM.render(<RecipeBox />, document.getElementById("container"));

            
          
!
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.
Loading ..................

Console