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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource


Babel includes JSX processing.

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


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


  <div id="page">
  <div id="container">
<h1>Recipe Finder:</h1>

<label for="meals">Choose a meal:</label>

<select id="meals">
  <option value="None">-- Select --</option>
  <option value="breakfast">Breakfast</option>
  <option value="lunch">Lunch</option>
  <option value="dinner">Dinner</option>
  <option value="dessert">Dessert</option>
</select> <br>

<label for="difficulties">Choose a difficulty:</label>

<select id="difficulties">
  <option value="None">-- Select --</option>
  <option value="easy">Easy</option>
  <option value="medium">Medium</option>
  <option value="hard">Hard</option>
  <br> <br> 
 <button onclick="myFunction()">Get Recipe!</button>
  <div id = "gooey">
    <p id = "oof">Find a recipe for any meal of the day!!</p>




h1 {
  color: #cc0066;
  font-family: Verdana;

label {
  color: #ff4da6;
  font-family: Verdana;
  font-weight: bold;

div {
  background-color: beige;
  width: 300px;
  border: 15px #d9b38c;
  border-style: inset;
  padding: 50px;
  margin: 15px;
  font-family: georgia;

body {
  background-color:  #ffe6e6;

button {
  background-color: #ff1a8c; 
  border: none;
  color: black;
  padding: 10px 20px;
  font-family: verdana;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  font-size: 16px;

  opacity: 0.6;

  margin-left: -5px;
  font-size: 24px;


                function myFunction() {
   var s= document.getElementById('meals').value;
   var x= document.getElementById('difficulties').value;
  if(s == "breakfast" && x == "easy"){
   document.getElementById('oof').innerHTML = "<h2>Oatmeal Recipe-</h2><p><h3>Ingredients:</h3><ul><li>1 cup old-fashioned rolled oats</li><li>1 cup milk</li><li>1 cup water</li><li>1/8 teaspoon kosher salt</li><li>1/2 teaspoon ground cinnamon</li><li>1 teaspoon honey</li><li>Desired toppings such as sliced almonds, peanut butter, or fresh fruit</li></ul></p><p> <h3>Step 1: </h3>Combine oats, milk, water, salt, and cinnamon in a medium saucepan. Bring to a boil, then reduce heat to low.</p> <p><h3>Step 2: </h3>Simmer uncovered for 3 to 5 minutes until thickened, stirring occasionally. Remove from heat and let cool slightly.</p><p><h3>Step 3: </h3> Divide equally between two bowls. Drizzle each serving with 1/2 teaspoon honey. Add additional desired toppings and serve.</p><p><h5>Recipe from <i>CookingLight</i></h5></p>";
  if(s == "breakfast" && x == "medium"){
   document.getElementById('oof').innerHTML = "<h2>Pancakes Recipe-</h2><p><h3>Ingredients:</h3><ul><li>1 1/2 cups all-purpose flour</li><li>1 1/4 cups milk</li><li>3 1/2 teaspoons baking powder</li><li>1 egg</li><li>1 teaspoon salt</li><li>1 tablespoon white sugar</li><li>3 tablespoons butter, melted</li></ul></p><p> <h3>Step 1: </h3>In a large bowl, sift together the flour, baking powder, salt and sugar. Make a well in the center and pour in the milk, egg and melted butter; mix until smooth.</p><p><h3>Step 2: </h3>Heat a lightly oiled griddle or frying pan over medium high heat. Pour or scoop the batter onto the griddle, using approximately 1/4 cup for each pancake. Brown on both sides and serve hot.</p><p><h5>Recipe from <i>AllRecipes</i></h5></p>";
  if(s == "breakfast" && x == "hard"){
   document.getElementById('oof').innerHTML = "<h2>Cinnamon Roll Recipe-</h2><p><h3>Ingredients for the cinnamon rolls:</h3><ul><li>4 1/2 teaspoons/2 packets active dry yeast</li><li>1 cup lukewarm water</li><li>1 teaspoon granulated sugar, to proof the yeast</li><li> 6 tablespoons shortening or unsalted butter</li><li>1 cup granulated sugar</li><li>9 cups unbleached all-purpose flour</li><li>2 cups hot water</li><li>2 large eggs, beaten</li><li>1 tablespoon salt</li><li>1/2 cup softened butter, divided</li><li>1 1/2 cups brown sugar, divided</li><li>1 cup raisins, optional</li><li>2 tablespoons ground cinnamon, divided</li></ul></p><p><h3>Ingredients for the frosting:</h3><ul><li> 1/4 cup unsalted butter, softened</li><li>4 cups powdered sugar</li><li>4 tablespoons milk, more if necessary</li><li>1 teaspoon vanilla extract</li></ul></p><p> <h3>Step 1: </h3>In a small bowl, combine the yeast and a pinch of the granulated sugar with the lukewarm water and set aside for 5 minutes or until the yeast bubbles up. It will smell “yeasty.”</p> <p><h3>Step 2: </h3>In the bowl of a stand mixer, add shortening or butter, sugar, and salt to the 2 cups of hot water and beat for 30 seconds, using the beater blade. Let cool to lukewarm temperature. Stir in 2 cups of flour and mix until smooth. Add yeast mixture and mix until well combined. Mix in the beaten eggs.</p><p><h3>Step 3: </h3>Gradually stir in the remaining flour and mix with the dough hook for about 2 minutes. Remove dough from the bowl and place on a lightly floured counter. Knead by hand, add a little flour if the dough is still sticky. Knead until dough feels satiny and smooth.</p><p><h3>Step 4: </h3>Cover and let rise for 30 minutes. After the dough has doubled in size, remove it from the bowl and divide it in half. With a rolling pin, roll one half of the dough into a rectangular shape, about 22 X 13 inches. Spread dough evenly with half of the softened butter, about 1/4 cup. Sprinkle dough with half of the brown sugar, raisins, and cinnamon. You can omit the raisins if you would like to.</p><p><h3>Step 5: </h3>Roll up dough into one long roll. Cut rolls, using a piece of dental floss or thread, about two inches thick. Place rolls in greased 9X13-inch baking pans, leaving about 2-inches between the rolls so they have room to rise. Now follow the exact same steps with the other half of the dough.</p><p><h3>Step 6: </h3>Cover the pans with a clean kitchen towel. Let the rolls rise until double in bulk. Preheat oven to 350 degrees F. Bake for 20-30 minutes or until cinnamon rolls are golden brown on top and cooked in the middle. Every oven is different so check at 20 minutes to be safe, but it might take longer. You don't want them to be doughy in the middle. Time will also vary based on how big they get during the second rise. Ours take closer to 28-30 minutes. Remove from the oven and let the rolls cool to room temperature.</p><p><h3>Step 7: </h3>While the rolls are cooling, make the frosting. In a medium bowl, whisk together butter, sugar, milk, and vanilla. Frost the cooled cinnamon rolls generously!</p><p><h5>Recipe from <i>two peas & their pod</i></h5></p>";
  if(s == "lunch" && x == "easy"){
   document.getElementById('oof').innerHTML = "<h2>Grilled Cheese Recipe-</h2><p><h3>Ingredients:</h3><ul><li>4 slices white bread</li><li>3 tablespoons butter, divided</li><li>2 slices cheddar cheese</li></p><p> <h3>Step 1: </h3>Preheat skillet over medium heat. Generously butter one side of a slice of bread. Place bread butter-side-down onto skillet bottom and add 1 slice of cheese. Butter a second slice of bread on one side and place butter-side-up on top of sandwich.</p> <p><h3>Step 2: </h3>Grill until lightly browned and flip over; continue grilling until cheese is melted. Repeat with remaining 2 slices of bread, butter and slice of cheese.</p><p><h5>Recipe from <i>AllRecipes</i></h5></p>";
  if(s == "lunch" && x == "medium"){
   document.getElementById('oof').innerHTML = "<h2>Burger Recipe-</h2><p><h3>Ingredients:</h3><ul><li>2 pieces white sandwich bread, crusts removed and cut into 1/4-inch pieces</li><li>1/3 cup low fat milk</li><li>2-1/2 teaspoons kosher salt</li><li>1 teaspoon freshly ground black pepper</li><li>3 garlic cloves, minced</li><li>1-1/2 tablespoons Worcestershire sauce</li><li>2 tablespoons ketchup</li><li>3 pounds 85% lean ground beef</li><li>3 scallions, finely sliced, optional</li><li>10 hamburger buns</li></ul></p><p> <h3>Step 1: </h3>Preheat the grill to high heat.</p> <p><h3>Step 2: </h3>In a large bowl, mash the bread and milk together with a fork until it forms a chunky paste. Add the salt, pepper, garlic, Worcestershire sauce and ketchup and mix well.</p><p><h3>Step 3: </h3> Add the ground beef and scallions and break the meat up with your hands. Gently mix everything together until just combined. Do not overmix. Divide the mixture into ten equal portions and form loose balls. Flatten the balls into 3/4-inch patties about 4-1/2 inches across. Form a slight depression in the center of each patty to prevent the burgers from puffing up on the grill.</p><p><h3>Step 4: </h3>Grease the grill with non-flammable cooking spray. Grill the burgers, covered, until nicely browned on the first side, 2-4 minutes. Flip burgers and continue cooking for a few minutes more until desired doneness is reached. Before serving, toast the buns on the cooler side of the grill if desired.</p><p><h5>Recipe from <i>once upon a chef</i></h5></p>";
  if(s == "lunch" && x == "hard"){
   document.getElementById('oof').innerHTML = "<h2>Homemade Pizza Recipe-</h2><p><h3>Ingredients:</h3><ul><li>1 package (1/4 ounce) active dry yeast</li><li>1 teaspoon sugar</li><li>1-1/4 cups warm water, 110° to 115°</li><li>1/4 cup canola oil</li><li>1 teaspoon salt</li><li>3-1/2 to 4 cups all-purpose flour</li><li>1/2 pound ground beef</li><li>1 small onion, chopped</li><li>1 can (15 ounces) tomato sauce</li><li>3 teaspoons dried oregano</li><li>1 teaspoon dried basil</li><li>1 medium green pepper, diced</li><li>2 cups shredded part-skim mozzarella cheese</li></p><p> <h3>Step 1: </h3>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.</p> <p><h3>Step 2: </h3>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.</p><p><h3>Step 3: </h3>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.</p><p><h3>Step 4: </h3>Bake at 400° for 25-30 minutes or until crust is lightly browned.</p><p><h5>Recipe from <i>Taste of Home</i></h5></p>";
  if(s == "dinner" && x == "easy"){
   document.getElementById('oof').innerHTML = "<h2>Cheese Quesadilla Recipe-</h2><p><h3>Ingredients:</h3><ul><li>4 (10-inch) flour tortillas</li><li>1 cup grated cheese, sharp Cheddar or Mexican blend</li><li>4 tablespoons butter</li><li>Sour cream, for garnish</li><li>Salsa, for garnish</li><li>Guacamole, for garnish</li></ul></p><p> <h3>Step 1: </h3>Lay the tortillas flat on a cookie sheet. Sprinkle some of the cheese on 1 half of each tortilla. Try not to get it too close to the edge. Fold the tortillas in half over the cheese to make a half-moon.</p> <p><h3>Step 2: </h3> Warm a skillet over low heat and add 1 tablespoon of the butter. Add the tortilla to the skillet and cook until it is lightly brown, about 2 minutes. Using a spatula, gently lift the edge so you can check. When 1 side is brown, turn the tortilla over and cook the other side until brown and the cheese is all gooey. Use a spatula to transfer to individual plates or a large platter. Repeat with remaining butter and tortillas. Top them with the sour cream, salsa and guacamole.</p><p><h5>Recipe from <i>Food Network</i></h5></p>";
  if(s == "dinner" && x == "medium"){
   document.getElementById('oof').innerHTML = "<h2>Spaghetti and Meatballs Recipe-</h2><h3>Ingredients for the pasta:</h3><ul><li>1 pound lean ground beef</li><li> 1 pound ground Italian sausage</li><li> 1 cup seasoned Italian bread crumbs</li><li> 1/2 cup finely grated Parmesan cheese</li><li> 2 cloves garlic minced</li><li>1 tablespoon finely chopped fresh basil</li><li>1 tablespoon finely chopped fresh parsley</li><li>1 teaspoon dried oregano</li><li>2 large eggs beaten</li><li>1 teaspoon black pepper</li><li>3 tablespoons  olive oil</li><li>Marinara sauce for serving</li><li>1 pound spaghetti</li><li>Parmesan cheese and fresh basil for garnish, if desired</li></p><p> <h3>Step 1: </h3>Preheat oven to 400 degrees F.</p> <p><h3>Step 2: </h3>In a large bowl, add beef, sausage, bread crumbs, cheese, garlic, herbs, eggs, salt, and pepper. Stir together until combined. Roll meat mixture into 2-inch sized meatballs.</p><p><h3>Step 3: </h3>In a large, heavy pot heat olive oil over medium-high heat. When the oil shimmers, add meatballs in batches. Do not crowd. Brown well on bottoms before turning or meatballs will break apart. Continue cooking until browned all over. Remove meatballs to a plate that has been lined with Bounty paper towels, as each batch is finished.</p><p><h3>Step 4: </h3>Place meatballs on a large baking sheet and bake for 10 minutes or until meatballs are cooked all the way through. Remove from oven.</p><p><h3>Step 5: </h3>Place a large pot of water on to boil for spaghetti. When it boils, add salt and pasta and cook to al dente.</p><p><h3>Step 6: </h3>While the spaghetti is cooking, put meatballs in a large pot and cover with your favorite marinara sauce. Heat over medium-low heat.</p><p><h3>Step 7: </h3>When the spaghetti is done cooking, drain and place in a large serving bowl. Top with meatballs and marinara sauce. Garnish with Parmesan cheese and chopped fresh basil, if desired. Serve immediately.</p><p><h5>Recipe from <i>two peas & their pod</i></h5></p>";
  if(s == "dinner" && x == "hard"){
   document.getElementById('oof').innerHTML = "<h2>Garlic Butter Steak Recipe-</h2><p><h3>Ingredients:</h3><ul><li>1 ribeye steak, 2 inch (5 cm) thick, preferably USDA Prime</li><li>salt, to taste</li><li>pepper, to taste</li><li>3 tablespoons canola oil</li><li>3 tablespoons butter</li><li>3 cloves garlic, peeled and smashed</li><li>2 sprigs fresh rosemary</li><li>3 sprigs fresh thyme</li></ul></p><p> <h3>Step 1: </h3>Preheat oven to 200°F (95°C).</p> <p><h3>Step 2: </h3>Generously season all sides of the steak with salt and pepper.</p><p><h3>Step 3: </h3>Transfer to a wire rack on top of a baking sheet, then bake for about 45 minutes to an hour until the internal temperature reads about 125°F (51° C) for medium-rare. Adjust the bake time based on if you like your steak more rare or more well-done.</p><p><h3>Step 4: </h3>Heat the canola oil in a pan over high heat until smoking. Do not use olive oil, as its smoke point is significantly lower than that of canola oil and will smoke before reaching the desired cooking temperature.</p><p><h3>Step 5: </h3>Sear the steak for 30 seconds on the first side, then flip.</p><p><h3>Step 6: </h3>Add the butter, garlic, rosemary, and thyme and swirl around the pan.</p><p><h3>Step 7: </h3>Transfer the garlic and herbs on top of the steak and baste the steak with the butter using a large spoon.</p><p><h3>Step 8: </h3>Baste for about 30 seconds, then flip and baste the other side for about 15 seconds.</p><p><h3>Step 9: </h3>Turn the steak on its side and cook to render off any excess fat.</p><p><h3>Step 10: </h3>Rest the steak on a cutting board or wire rack for about 10 minutes. Slicing the steak before the resting period has finished will result in a lot of the juices leaking out, which may not be desirable.</p><p><h3>Step 11: </h3>Slice the steak into ½ -inch (1 cm) strips, then fan out the slices and serve.</p><p><h5>Recipe from <i>Tasty</i></h5></p>";
  if(s == "dessert" && x == "easy"){
   document.getElementById('oof').innerHTML = "<h2>Chocolate Chip Cookie Recipe-</h2><p><h3>Ingredients:</h3><ul><li>1 cup salted butter softened</li><li>1 cup white (granulated) sugar</li><li>1 cup light brown sugar packed</li><li>2 tsp pure vanilla extract</li><li>2 large eggs</li><li>3 cups all-purpose flour</li><li>1 tsp baking soda</li><li>1/2 tsp baking powder</li><li>1 tsp sea salt</li><li>2 cups chocolate chips (or chunks, or chopped chocolate)</li></ul></p><p> <h3>Step 1: </h3>Preheat oven to 375 degrees F. Line a baking pan with parchment paper and set aside.</p> <p><h3>Step 2: </h3> In a separate bowl mix flour, baking soda, salt, baking powder. Set aside.</p><p><h3>Step 3: </h3> Cream together butter and sugars until combined.</p><p><h3>Step 4: </h3> Beat in eggs and vanilla until fluffy.</p><p><h3>Step 5: </h3> Mix in the dry ingredients until combined.</p><p><h3>Step 6: </h3> Add 12 oz package of chocolate chips and mix well.</p><p><h3>Step 7: </h3> Roll 2-3 TBS (depending on how large you like your cookies) of dough at a time into balls and place them evenly spaced on your prepared cookie sheets. (alternately, use a small cookie scoop to make your cookies)!</p><p><h3>Step 8: </h3> Bake in preheated oven for approximately 8-10 minutes. Take them out when they are just BARELY starting to turn brown.</p><p><h3>Step 9: </h3>Let them sit on the baking pan for 2 minutes before removing to cooling rack.</p><p><h5>Recipe from <i>JoyFoodSunshine</i></h5></p>";
  if(s == "dessert" && x == "medium"){
   document.getElementById('oof').innerHTML = "<h2>Apple Pie Recipe-</h2><p><h3>Ingredients:</h3><ul><li>1/2 cup sugar</li><li>1/2 cup packed brown sugar</li><li>3 tablespoons all-purpose flour</li><li>1 teaspoon ground cinnamon</li><li>1/4 teaspoon ground ginger</li><li>1/4 teaspoon ground nutmeg</li><li>6 to 7 cups thinly sliced peeled tart apples</li><li>1 tablespoon lemon juice</li><li>Pastry for double-crust pie</li><li>1 tablespoon butter</li><li>1 large egg white</li><li>Additional sugar</li></ul></p><p> <h3>Step 1: </h3>In a small bowl, combine the sugars, flour and spices; set aside. In a large bowl, toss apples with lemon juice. Add sugar mixture; toss to coat.</p> <p><h3>Step 2: </h3> Line a 9-in. pie plate with bottom crust; trim even with edge. Fill with apple mixture; dot with butter. Roll remaining crust to fit top of pie; place over filling. Trim, seal and flute edges. Cut slits in crust.</p><p><h3>Step 3: </h3> Beat egg white until foamy; brush over crust. Sprinkle with sugar. Cover edges loosely with foil.</p><p><h3>Step 4: </h3> Bake at 375° for 25 minutes. Remove foil and bake until crust is golden brown and filling is bubbly, 20-25 minutes longer. Cool on a wire rack.</p><p><h5>Recipe from <i>Taste of Home</i></h5></p>";
  if(s == "dessert" && x == "hard"){
   document.getElementById('oof').innerHTML = "<h2>Macaron Recipe-</h2><p><h3>Ingredients for the macarons:</h3><ul><li>1 3/4 cups powdered sugar</li><li>1 cup almond flour, finely ground</li><li>1 teaspoon salt, divided</li><li>3 egg whites, at room temperature</li><li>1/4 cup granulated sugar</li><li>1/2 teaspoon vanilla extract</li><li>2 drops gel food coloring, optional</li></ul></p><p><h3>Ingredients for the vanilla buttercream filling:</h3><ul><li>1 cup unsalted butter, 2 sticks, at room temperature</li><li>3 cups powdered sugar</li><li>1 teaspoon vanilla extract</li><li>3 tablespoons heavy cream</li></ul></p><p> <h3>Step 1: </h3>Make the macarons: In the bowl of a food processor, combine the powdered sugar, almond flour, and ½ teaspoon of salt, and process on low speed, until extra fine. Sift the almond flour mixture through a fine-mesh sieve into a large bowl.</p> <p><h3>Step 2: </h3> In a separate large bowl, beat the egg whites and the remaining ½ teaspoon of salt with an electric hand mixer until soft peaks form. Gradually add the granulated sugar until fully incorporated. Continue to beat until stiff peaks form (you should be able to turn the bowl upside down without anything falling out).</p><p><h3>Step 3: </h3> Add the vanilla and beat until incorporated. Add the food coloring and beat until just combined.</p><p><h3>Step 4: </h3> Add about ⅓ of the sifted almond flour mixture at a time to the beaten egg whites and use a spatula to gently fold until combined. After the last addition of almond flour, continue to fold slowly until the batter falls into ribbons and you can make a figure 8 while holding the spatula up.</p><p><h3>Step 5: </h3> Transfer the macaron batter into a piping bag fitted with a round tip.</p><p><h3>Step 6: </h3> Place 4 dots of the batter in each corner of a rimmed baking sheet, and place a piece of parchment paper over it, using the batter to help adhere the parchment to the baking sheet.</p><p><h3>Step 7: </h3> Pipe the macarons onto the parchment paper in 1½-inch (3-cm) circles, spacing at least 1-inch (2-cm) apart.</p><p><h3>Step 8: </h3> Tap the baking sheet on a flat surface 5 times to release any air bubbles.</p><p><h3>Step 9: </h3>Let the macarons sit at room temperature for 30 minutes to 1 hour, until dry to the touch.</p><p><h3>Step 10: </h3>Preheat the oven to 300˚F (150˚C).</p><p><h3>Step 11: </h3>Bake the macarons for 17 minutes, until the feet are well-risen and the macarons don’t stick to the parchment paper.</p><p><h3>Step 12: </h3>Transfer the macarons to a wire rack to cool completely before filling.</p><p><h3>Step 13: </h3>Make the buttercream: In a large bowl, add the butter and beat with a mixer for 1 minute until light and fluffy. Sift in the powdered sugar and beat until fully incorporated. Add the vanilla and beat to combine. Add the cream, 1 tablespoon at a time, and beat to combine, until desired consistency is reached.</p><p><h3>Step 14: </h3>Transfer the buttercream to a piping bag fitted with a round tip.</p><p><h3>Step 15: </h3>Add a dollop of buttercream to one macaron shell. Top it with another macaron shell to create a sandwich. Repeat with remaining macaron shells and buttercream.</p><p><h3>Step 16: </h3>Place in an airtight container for 24 hours to develop flavors.</p><p><h5>Recipe from <i>Tasty</i></h5></p>";