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.

            
              <html>
  <head><link href="https://fonts.googleapis.com/css?family=Domine|Satisfy" rel="stylesheet">
  </head>
<body id = "home">
  <div class='text-center'>
  <h1>Recipe Box</h1>
  </div>
  <div id="container">
  
  </div>
  
</body>
</html>
            
          
!
            
              body {
  background: #D0F3C2;
}
#box {
  max-width:700px;
  min-height:300px;
  background: #116F43;
  margin-left:auto;
  margin-right:auto;
  padding: 15px;
  border-radius:10px;
  opacity:0.8;
}
a {
  color:#2B0080;
}
a.hover {
  color: #2B0080 !important;
}
h3 {
  background:#8EA089;
  padding-top:10px;
  padding-left:10px;
  margin-top:1px;
  margin-bottom: 8px;
  width: 670px;
  height: 50px;
  border-radius:5px;
  opacity:1;
  font-family: 'Satisfy', cursive;
}
button {
  margin-top:10px;
  margin-right:300px;
}
h1 {
  font-family: 'Satisfy', cursive;
  color: #2B0080;
  font-size:50px;
}
h4 {
  font-family: 'Satisfy', cursive;
  color: #2B0080;
}
textarea {
  width:400px;
  height:50px;
}
.lightbox .box {
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
   	min-width:500px;
    margin: 2% auto;
    padding:20px;
    background-color:#FFF;
    box-shadow: 0px 1px 26px -3px #777777;
  border-radius:10px;
    }
    .lightbox .title {
        margin:0;
        padding:0 0 10px 0px;
        border-bottom:1px #ccc solid;
      font-family: 'Satisfy', cursive;
  color: #2B0080;
      font-size:30px;
        }
    .lightbox .content {
        display:block;
        padding:10px 0 0 0px;
        line-height:22px;
        }
    .lightbox .close {
        float:right;
        display:block;
        text-decoration:none;
      font-size:18px;
      color:black;
        }
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    }
.lightbox:target {
    display: block;
    outline: none;
}
.hidden {
  display:none;
}
.hidden:target {
  display: block;
  outline:none;
}
.details {
  background: white;
  color:black;
  border-radius:10px;
  padding: 10px;
  font-family: 'Domine', serif;
  font-size: 20px;
}
#add {
  text-decoration:none;
}
.purple {
  background:#2B0080;
  color:white;
}

            
          
!
            
              function app() {
  let splitIngred = '';
  let index2 = 0;
  let newIndex = '';
  let whichRecipe;
  let index = '';
  let rec = '';
  let result = '';
  
  let newRecipe = '';
  let title = '';
  let ingredients = '';
  let directions = '';
  
  let recipes = [{
    name: "Pumpkin Pie Bars",
    ingredients: '1 - 18 oz. box yellow cake mix,1/2 cup butter, melted,4 eggs,1 - 30 oz. can solid packed pumpkin, or 3 cups pureed pumpkin,1 1/2 cups brown sugar, divided,2/3 cup evaporated milk,2 tsp. cinnamon,1/2 cup chopped nuts (optional),1/4 cup butter, softened',
    directions: 'Preheat oven to 350*F. Grease a 13X9 inch baking pan.  Remove 1 cup of dry cake mix and place in a small bowl; set aside.  In another bowl, beat one egg, then add remaining cake mix and melted butter.  Mix well. Press into bottom of prepared pan.  In a large bowl, lightly beat remaining 3 eggs. Stir in pumpkin, 1 cup of sugar, evaporated milk and cinnamon. Pour over cake mixture in pan. To the reserved cake mix, add 1/2 cup sugar, nuts if desired and softened butter.  Mix until crumbly. Sprinkle over pumpkin mixture. Bake for 50 - 60 minutes, or until completely done. Serve warm or cold with a dollop of whipped cream!',
    index: 0
  }, {
    name: "Washington Apple Cake",
    ingredients: 'Batter,4 cups thinly sliced apples,3 eggs,2 cups brown sugar,1 cup oil,2 cups whole wheat flour,2 teaspoons cinnamon,1 tsp. baking soda,1/2 tsp. salt,1 teaspoon vanilla,1 cup nuts, Icing,2 - 3oz. packages cream cheese softened,1/4 cup melted butter,2 cups powdered sugar',
    directions: "Beat the eggs - add sugar and oil and mix on medium speed. Stir in dry ingredients. Add vanilla and nuts - stir until combined.  Layer apple slices in a greased 9X13 inch pan.  Pour batter over apples.  Bake at 350*F. for 55 - 60 minutes until apples are soft and cake is done.  Cool cake before icing.Beat cream cheese and melted butter together until combined.  Add powdered sugar and mix well till smooth.  Spread over cooled cake.",
    index: 1
  }, {
    name: "Mama's Ginger Snaps",
    ingredients: "4 1/2 cups whole wheat flour,4 tbsp. ground ginger (you can cut this back to as low as 4 tsp. if you don't want the heat :),2 teaspoons baking soda,1 1/2 teaspoons cinnamon,1 cup oil,2 cups brown sugar,2 eggs,1/2 cup molasses",
    directions: ' Preheat the oven to 350*F.  In a large mixing bowl, mix together the eggs, oil, molasses and brown sugar.  Add the baking soda, cinnamon and ginger and mix well.  Lastly, thoroughly mix in the flour until mixture forms a nice dough.  You should be able to form the dough into a ball in your hands.  If it seems a little too dry, add a small amount of oil - a tablespoon at a time.  The dough should not be overly oily or too sticky. Roll into one inch balls and place on a parchment lined cookie sheet. Bake on 350 for 5-6 minutes.',
    index: 2
  }];
  
var Component = React.createClass({
getInitialState: function() {
  return {
  recipes: recipes,
    del:false,
    edit:false,
    add:false,
    titleValue:'',
    inValue:'',
    dirValue:'',
    keyed:''
} 
},
  edit: function (event) {
    rec = localStorage.getItem('JessiW_recipes');
    result = JSON.parse(rec); 
    if(!result) {
      result = this.state.recipes;
    }
    whichRecipe = event.target.value;
    
    this.setState({
      edit:true,
      add:false,
      titleValue:result[whichRecipe].name,
      inValue:result[whichRecipe].ingredients,
      dirValue:result[whichRecipe].directions
    });
  },
  add: function(event) {
    rec = localStorage.getItem('JessiW_recipes');
    result = JSON.parse(rec); 
    if(!result) {
      result = this.state.recipes;
    }
  this.setState({
    edit: false,
    add: true,
    titleValue: '',
    inValue: '',
    dirValue: ''
    })
   
    newIndex = result.length;
    title = document.getElementById('title').value;
    ingredients = document.getElementById('ingred').value;
    directions = document.getElementById('ingred').value;
    whichRecipe = newIndex;
    newRecipe = {
      name: title,
      ingredients: ingredients,
      directions: directions,
      index: newIndex
    };
    result.push(newRecipe);
    rec = JSON.stringify(result);
    localStorage.setItem('JessiW_recipes', rec);
  },
  save: function(event) {
    rec = localStorage.getItem('JessiW_recipes');
    result = JSON.parse(rec); 
    if(!result) {
      result = this.state.recipes;
    }
  if(this.state.edit ==true) {
    result[whichRecipe].name = document.getElementById('title').value;
    result[whichRecipe].ingredients = document.getElementById('ingred').value;
    result[whichRecipe].directions = document.getElementById('direct').value;
    this.setState({
      titleValue:result[whichRecipe].name,
      inValue:result[whichRecipe].ingredients,
      dirValue:result[whichRecipe].directions
    });
  }
    else if(this.state.add==true) {
    whichRecipe = newIndex;
    result[whichRecipe].name = document.getElementById('title').value;
    result[whichRecipe].ingredients = document.getElementById('ingred').value;
    result[whichRecipe].directions = document.getElementById('direct').value;
      this.setState({
      titleValue:result[whichRecipe].name,
      inValue:result[whichRecipe].ingredients,
      dirValue:result[whichRecipe].directions
    });
    }
      //your input box values for your add modal must be empty strings...otherwise, it will get your last value thru document.getElementById, because when using document.getElementById, you are actually hard setting the value in your HTML.
      //you must either reset value to "" after add, or maybe have it set at "" upon initializing your add modal, like this:
      //document.getElementById('title').value = "";
      //.....
      //.....
      //then create a copy of your recipe object like your edit function, and get the values again from your modal.
      //then set state like below:
    
     rec = JSON.stringify(result);
    localStorage.setItem('JessiW_recipes', rec);
  },
  onType: function(event) {
    this.setState({
    titleValue: document.getElementById('title').value,
    inValue: document.getElementById('ingred').value,
    dirValue: document.getElementById('direct').value
    })
  },
 
  delete: function(event){
     this.setState({
      del: true,
      titleValue:'',
      inValue:'',
      dirValue:''
    });
    var indexer = event.target.value;
    result.splice(indexer, 1);
    localStorage.removeItem(indexer);
    this.setState({
      recipes: result
    });
    rec = JSON.stringify(result);
    localStorage.setItem('JessiW_recipes', rec);
  },
  
  render:function() {
    rec = localStorage.getItem('JessiW_recipes');
    result = JSON.parse(rec); 
    if(!result) {
      result = this.state.recipes;
    }
     var save = this.save;
     var add=this.add;
     var edit = this.edit;
     var del = this.delete;
      var type = this.onType;
    var recipe = result.map(function(recipes,indexR) {
      var title = recipes.name;
      splitIngred = recipes.ingredients;
      var removeComma = splitIngred.split(/,/g);
      var replacement = removeComma.map(function (d, i) {
        return <li key={i}>{d}</li>;
      });
      ingredients = replacement;
      directions = recipes.directions;
      index = "#" + indexR;
      index2 = indexR;

      return(<div><h3><a key={index2} href={index}>{title}</a></h3><div className = "details hidden" id = {index2}><p id = "ingredients">{ingredients}</p><p>{directions}</p><a href="#">
            <button className = "btn btn-success"  id = "close">Close</button>
          </a>
          <button className='btn btn-neutral' id={index} value = {index2} onClick={del}>Delete</button>
          <a href="#text">
            <button className="btn purple" id = "edit" value = {index2} onClick={edit}>Edit</button>
          </a></div></div>);
    });
    return (
      <div id = "box">
        <div>{recipe}</div>
        <a href="#text">
       <button id ="add" className="btn btn-success" onClick={add}>Add Recipe</button>
          </a>
<div className="lightbox" id="text">
    <div className="box">
        <a className="close" href="#">X</a>
      <p className="title">Recipes</p>
        <div className="content">
          <h4>Title:</h4>
          <textarea id="title" onChange={type} value={this.state.titleValue}></textarea>
          <h4>Ingredients:</h4><p>List ingredients seperated by commas :)</p>
          <textarea id = "ingred" onChange={type} value={this.state.inValue}></textarea>
          <h4>Directions:</h4>
          <textarea id = "direct" onChange={type} value={this.state.dirValue}></textarea>
        </div>
      <a href="#"><button className="btn btn purple" value = {index2} onClick={save}>Save</button></a>
      <button className = "btn btn-success">
        <a className="close" href="#">Close</a>
      </button>
    </div>
  </div>
</div>  
    );
  }
});
  ReactDOM.render(<Component/>, document.getElementById("container"));
}
app();
            
          
!
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