Question

In: Computer Science

In this weeks assignment you will be sharing your favorite recipe with us via a web...

In this weeks assignment you will be sharing your favorite recipe with us via a web page. The recipe is of your choice and does not have to be a culinary creation, it can be anything! Your web page style and aesthetic should compliment your recipe, do some research for design inspiration if you cannot think of anything.

Requirements:

  • Use an external CSS & JS file, no internal or inline styles & scripts
    • Please comment your JS to break down your understanding of what is happening. For the rest of your programming career you will be commenting your code. Now is a good time to get used to it, make it a habit, and be sure to put your name in your JS code.
  • Choose a recipe with at least 5 items/ingredient
  • Create a JS array to store your recipe ingredients/items
    • Be sure to include the units of measurement
  • Use a JS for or while loop to iterate through your array of recipe ingredients and dynamically add them to you web page inside a table
    • HINT use a HTML DOM table object method
  • Provide either 3+ images or 1 video of your recipe. You can do both if ambitious!
  • Write out the directions to prepare your recipe using an ordered list
  • Style your page
    • Tables should have Header and footer style as well as borders
    • Font, color, spacing and layout should be intentional and not default for all other elements on the page
    • Use classes for styling
    • As always no CSS frameworks all custom creations from your original self

Solutions

Expert Solution

recipeIndex.html:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="recipeMain.css" type="text/css" rel="stylesheet">
</head>
<body onload=insert_data()>
<script type=text/javascript src="main.js"></script>
<div class="header">
  <h1>My Recipes</h1>
  <p>A food website created by me.</p>
</div>

<div class="navbar">
  <a href="#">Home</a>
  <a href="#">Gallery</a>
  <a href="#">Profile</a>
</div>

<div class="row">
  <div class="side">
    <h2>Today's special</h2>
    <h5>Cheese Burst Mushroom Pizza</h5>
    <div class="fakeimg" style="height:200px;">Image</div>
    <h2>INGREDIENTS:</h2>
    <table id="myTable">
    <thead>
       <tr>
        <th>Ingredients</th>
        <th>Quantity</th>
       </tr>
    </thead>
    <tbody id="datas">
    
    </tbody>
        </table>
  </div>
  <div class="main">
    <h2>DIRECTIONS</h2>
    <ol>
        <li>Preheat oven to 450 degrees F. Lightly coat a baking sheet or pizza pan with olive oil.</li>
        <li>Melt butter in a large skillet over medium heat. Add garlic, and cook, stirring frequently, until fragrant, about 1-2 minutes.</li>
        <li>Stir in mushrooms and oregano. Cook, stirring occasionally, until mushrooms are tender and browned, about 5-6 minutes; season with salt and pepper, to taste.</li>
        <li>Working on a surface, roll out the pizza into a 12-inch-diameter round. Transfer to prepared baking sheet or pizza pan.</li>
        <li>Top with mozzarella and mushrooms.</li>
        <li>Place into oven and bake for 15-20 minutes, or until the crust is golden brown and the cheeses have melted.</li>
        <li>Serve immediately.</li>
    </ol>
    <br>
    <div class="fakeimg"></div>
    </div>
</div>

<div class="footer">
  <p>Copyright &copy; 20XX contact-(xxx)-xxx-xxxxxx</p>
</div>

</body>
</html>

recipeMain.css:

* {
    box-sizing: border-box;
  }
  
  /* Style the body */
  body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
  }
  
  /* Header/logo Title */
  .header {
    padding: 80px;
    text-align: center;
    background-image: url('header.jpg');
    background-size: cover;
    color: white;
  }
  
  /* Increase the font size of the heading */
  .header h1 {
    font-size: 40px;
  }
  
  /* Style the top navigation bar */
  .navbar {
    overflow: hidden;
    background-color: rgb(104, 42, 104);
  }
  
  /* Style the navigation bar links */
  .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
  }
  
  /* Change color on hover */
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Column container */
  .row {  
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
  }
  
  /* Create two unequal columns that sits next to each other */
  /* Sidebar/left column */
  .side {
    -ms-flex: 30%; /* IE10 */
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;
  }
  
  /* Main column */
  .main {   
    -ms-flex: 70%; /* IE10 */
    flex: 70%;
    background-color: white;
    padding: 20px;
  }
  
  /* Fake image, just for this example */
  .main .fakeimg {
    background-image: url('pizza2.jpg');
    background-size: cover;
    width: 100%;
    padding: 20px;
    height: 400px;
  }
  .side .fakeimg {
    background-image: url('pizza.jpg');
    background-size: cover;
    width: 100%;
    padding: 20px;
  }
  /* Footer */
  .footer {
    padding: 10px;
    text-align: center;
    color: #fff;
    background: rgb(48, 1, 45);
  }

  li{
      padding: 10px;
  }
  
  td{
  padding-bottom: 10px;
  }
  /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 700px) {
    .row {   
      flex-direction: column;
    }
  }
  
  /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
  @media screen and (max-width: 400px) {
    .navbar a {
      float: none;
      width: 100%;
    }
  }

main.js

var details = [
    {ingredients:"olive oil", quantity:"2 tablespoon"},
    {ingredients:"unsalted butter", quantity:"2 tablespoon"},
    {ingredients:"garlic",   quantity:"3 cloves, minced"},
    {ingredients:"portebello mushrooms",   quantity:"16 ounces, thinly sliced"},
    {ingredients:"dried oregano",   quantity:"1/2 teaspoon"},
    {ingredients:"back pepper",   quantity:"as per taste"},
    {ingredients:"pizza crust",   quantity:"medium size"},
    {ingredients:"mozzarella cheese",   quantity:"1 ounce slices"},
    {ingredients:"cheddar cheese",   quantity:"1 cup"}
]

function insert_data(){
var table = document.getElementById("datas");
table.innerHTML="";
  var tr="";
  details.forEach(x=>{
     tr+='<tr>';
     tr+='<td>'+x.ingredients+'</td>'+'<td>'+x.quantity+'</td>';
     tr+='</tr>';
  })
  table.innerHTML+=tr;
}

images:

header.jpg

pizza.jpg

pizza2.jpg

output screenshots:

venereology answered 1 year ago
Next > < Previous

Related Solutions

For this assignment you are required to create a web page displaying a recipe of your...
For this assignment you are required to create a web page displaying a recipe of your choosing. Your submission should appropriately use the basic head and body construction of an HTML document. Additionally you are required to appropriately use at least three different HTML element types. For example you might use an unordered list for your ingredients, an ordered list for the steps of your recipe, and an image to show the final result. If you choose to use an...
In this assignment you will create a web page about your favorite sports to play or...
In this assignment you will create a web page about your favorite sports to play or teams to watch. If you don’t watch or play sports, please make up your favorite sports to play or teams to watch. You will be incorporating images into your web page, as well as other concepts learned in this unit. Create an external style sheet using a text editor of your choosing. In the CSS file add the following style rules: A background image...
In this weeks assignment you will creating some character cards on a web page. These character...
In this weeks assignment you will creating some character cards on a web page. These character cards can be similar to a baseball card, Magic The Gathering Card. It is your choice and anything is fair game. Requirements: Use an external CSS & JS file, no internal or inline styles & scripts Please comment your JS to break down your understanding of what is happening. Please put your name in your code. Create at least 3 character card elements (div's...
AWS screenshot of a view of the web browser connection to your web server via the...
AWS screenshot of a view of the web browser connection to your web server via the load balancer (step 5 of this lab document).
What are three of your favorite Web 2.0 technologies or Web sites? Explain what is so...
What are three of your favorite Web 2.0 technologies or Web sites? Explain what is so great about each of them and how they might be improved. (Dont copy previous answers)
Tell us your favorite social media platform and explain why it is your favorite. Our book...
Tell us your favorite social media platform and explain why it is your favorite. Our book tells us that certain platforms are preferred the most by different age groups.Which do you dislike and why? Feel free to refer to other platforms not specifically mentioned in our text if it is your favorite and you use it the most.
You are dining at your favorite restaurant and eating your favorite meal when you start to...
You are dining at your favorite restaurant and eating your favorite meal when you start to think about the digestion process (sorry to ruin your meal). Briefly explain this process when food enters your stomach then in your small intestine. Include the following terms/structures in your explanation: stomach; chyme; hydrochloric acid; 3 basic tasks of stomach; length of time in stomach; 3 structural parts of small intestine; describe what happens in the first 25 centimeters of the small intestine; role...
Assignment Details Scenario: While reading a news article on your favorite athletic shoes, you are surprised...
Assignment Details Scenario: While reading a news article on your favorite athletic shoes, you are surprised to learn the company uses child labor in Pakistan. Living in the United States, it is hard to imagine children working in factories. What is child labor? According to Fairtrade International, child labor is “work that is harmful to a child’s physical and mental health and wellbeing, and/or interferes with their education, leisure and development” (2017). The exploitation of child labor continues to be...
Conduct a web search on "The best and worst PowerPoint presentations" using your favorite search engine......
Conduct a web search on "The best and worst PowerPoint presentations" using your favorite search engine... which is google. give two reasons why this website was your choice of either the best or worst PowerPoint presentation and discuss what should or should not be done when creating a PowerPoint presentation. At the end of the oaragraph put the URL of the website.
In this assignment, you will develop a simple Web server in Python that is capable of...
In this assignment, you will develop a simple Web server in Python that is capable of processing only one request. Specifically, your Web server will (i) create a connection socket when contacted by a client (browser); (ii) receive the HTTP request from this connection; (iii) parse the request to determine the specific file being requested; (iv) get the requested file from the server’s file system; (v) create an HTTP response message consisting of the requested file preceded by header lines;...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT