Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

HTML/JAVASCRIPT Use your editor to open the tc_cart txt.html, tc cart_txt.js and

ID: 3699492 • Letter: H

Question

HTML/JAVASCRIPT

Use your editor to open the tc_cart txt.html, tc cart_txt.js and tc order txt.js files from the htmllo casel folder. Enter your name and the date in the comment section of each file, and save them as tc_cart.html, tc_ cart.js and te_ order.js respectively. Go to the tc cart.html file in your editor. Directly above the closingtag, insert script elements to link the page to the tc order.js and tc cart.is files in that order. Defer the loading and running of both script files until after the page has loaded. Scroll down the file and directly below the hl heading titled "Shopping Cart" insert a div element with the ID cart. 4 Save your changes to the file and go to the tc order.js file in your editor Within the tc_order.js file, you will create arrays containing information on a sample customer order. Create an array named item that will contain the ID numbers of the items purchased by the customer. Add the following four item numbers to the array: 10582, 23015, 41807, and 10041. Create an array named itemDescription containing the following item descriptions: 1975 Green Bay Packers Football (signed), Item 10582 Tom Landry 1955 Football Card (unsigned), Item 23015 1916 Army-Navy Game, Framed Photo (signed), Item 41807 Protective Card Sheets, Item 10041 7 Create an array named itemPrice containing the following item prices: 149.93, 89.98, 334.93, and 22.67

Explanation / Answer

tc_cart.html

<!DOCTYPE html>
<html lang="en">
<head>
  
    <title>Trophy Case Sports Shopping Cart</title>
    <meta charset="utf-8" />
    <link href="css/tc_reset.css" rel="stylesheet" />
    <link href="css/tc_styles.css" rel="stylesheet" />
    <script src="tc_order.js" defer></script>
    <script src="tc_cart.js" defer></script>
</head>

<body>
   <header>
      <nav id="topList">
         <ul>
            <li><a href="#">Daily Specials</a></li>
            <li><a href="#">Shipping &amp; Returns</a></li>
            <li><a href="#">View My Account</a></li>
            <li><a href="#"><img src="images/tc_cart.png" alt="cart" /></a></li>
         </ul>
      </nav>
      <img src="images/tc_logo.png" alt="Trophy Case Sports" id="imgLogo" />
      <nav id="middleList">
         <ul>
            <li><a href="#">NFL</a></li>
            <li><a href="#">NBA</a></li>
            <li><a href="#">MLB</a></li>
            <li><a href="#">NHL</a></li>
            <li><a href="#">College</a></li>
            <li><a href="#">Others</a></li>
            <li><a href="#">Search</a></li>          
         </ul>
      </nav>    
   </header>

   <section>
       <h1>Shopping Cart</h1>

       <div id="cart"></div>

       <label>
           <img src="images/tc_button.png" alt="" />
           <span>Proceed to Checkout</span>
       </label>

   </section>

   <footer>
      <nav id="bottom">
         <ul>
            <li><a href="#"><img id="fbicon" src="images/tc_fbicon.png" alt="" />facebook</a></li>
            <li><a href="#">Home Page</a></li>
            <li><a href="#">FAQs</a></li>
            <li><a href="#">Merchandise Search</a></li>
         </ul>
         <ul>
            <li><a href="#">Signed Cards</a></li>
            <li><a href="#">Display Cases</a></li>
            <li><a href="#">Signed Jerseys</a></li>
            <li><a href="#">Signed Photos</a></li>
         </ul>
         <ul>
            <li><a href="#">Sports</a></li>
            <li><a href="#">Teams</a></li>
            <li><a href="#">Players</a></li>
            <li><a href="#">Eras</a></li>
         </ul>       
         <ul>
            <li><a href="#">Authenticity Guarantee</a></li>
            <li><a href="#">Customer Service</a></li>
            <li><a href="#">Trade Ins</a></li>
            <li><a href="#">Contact Us</a></li>
         </ul>
      </nav>
      <p>Trophy Case Sports &copy; 2018 All Rights Reserved</p>
   </footer>
</body>
</html>


tc_reset.css

@charset "utf-8";


/* Basic styles to be used with all devices and under all conditions */

article, aside, figcaption, figure,
footer, header, main, nav, section {
   display: block;
}

address, article, aside, blockquote, body, cite,
div, dl, dt, dd, em, figcaption, figure, footer,
h1, h2, h3, h4, h5, h6, header, html, img,
li, main, nav, nav a, ol, p, section, span, ul {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}


/* Set the default page element styles */

body {
   line-height: 1.2em;
}

ul, ol {
   list-style: none;
}

nav ul {
   list-style: none;
   list-style-image: none;
}

nav a {
   text-decoration: none;
}

tc_styles.css

@charset "utf-8";


/* HTML and Body Styles */

html {
   background: white;
   font-family: Verdana, Geneva, sans-serif;
   font-size: 12px;
}

body {
   position: relative;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   background: white;
   max-width: 1024px;
   min-width: 420px;
   margin: 0px auto;
   border: 1px solid rgb(221, 221, 221);
}

p {
   font-size: 1.2em;
   line-height: 1.4em;
   margin: 15px;
}


/* Top Navigation Styles */

nav#topList ul {
   position: absolute;
   top: 20px; right: 0px;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row nowrap;
   flex-flow: row nowrap;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
   -webkit-align-items: center;
   align-items: center;
   background-color: transparent;
   height: 50px;
}

nav#topList ul li {
   -webkit-flex: 0 1 80px;
   flex: 0 1 80px;
   margin: 10px;
}

nav#topList ul li a {
   color: rgb(141, 33, 12);
   display: block;
   font-size: 1.1em;
   text-align: center;
   padding: 50% 0%;
}

nav#topList ul li a:hover, nav#topList ul li a:active {
   color: rgb(255, 0, 0);
   text-shadow: 0px 0px 2px rgb(172, 128, 84), 0px 0px 15px rgb(172, 128, 84);
}

/* Header Styles */

body > header {
   width: 100%;
}

body > header > img#imgLogo {
   display: block;
   width: 100%;
}


/* Middle Navigation Styles */

nav#middleList ul {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row nowrap;
   flex-flow: row nowrap;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-align-items: center;
   align-items: center;
   background-color: rgb(109, 80, 53);
   height: 40px;
}

nav#middleList ul li {
   -webkit-flex: 0 1 80px;
   flex: 0 1 80px;
   margin: 10px;
}

nav#middleList ul li a {
   color: white;
   display: block;
   font-size: 1.2em;
   text-align: center;
   padding: 50% 0%;
}

nav#middleList ul li a:hover, nav#middleList ul li a:active {
   color: rgba(255, 255, 255, 0.9);
   text-shadow: 0px 0px 2px black, 0px 0px 8px black;
}


/* Section Styles */

section {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   -webkit-align-items: center;
   align-items: center;
   margin: 20px 40px;
}

section h1 {
   font-size: 2.9em;
   font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
   color: rgb(159, 31, 7);
   letter-spacing: 0.1em;
   margin: 20px 0px;
   width: 100%;
}

/* Cart Table Styles */

div#cart {
   -webkit-flex: 1 1 600px;
   flex: 1 1 600px;
}

div#cart table {
   font-size: 1.4em;
   border-collapse:collapse;
}


div#cart table th, div#cart table td {
vertical-align: top;
font-weight: normal;
line-height: 1.3em;
}

div#cart table tr:nth-of-type(even) {
   background-color: rgb(221, 204, 177);
}

div#cart table tr td:nth-of-type(3), div#cart table tr td:nth-of-type(4), div#cart table tr td:nth-of-type(5) {
   text-align: right;
}

div#cart table th {
   background-color: rgb(109, 80, 53);
   color: rgb(231, 231, 231);
   padding: 10px;
}

div#cart table td {
   padding: 10px;
}

div#cart table tr:last-of-type {
   border-top: 6px double rgb(109, 80, 53);
   background-color: white;
   font-size: 1.3em;
}

div#cart table tr:last-of-type td:first-of-type {
   text-align: right;
}


/* Button Style */

section label {
   -webkit-flex: 1 1 100px;
   flex: 1 1 100px;
}

section label img {
   display: block;
   width: 100px;
   margin: 0px auto 10px;
}

section label span {
   display: block;
   font-size: 1.2em;
   text-align: center;
   color: rgb(141, 33, 12);
}


/* Footer Styles */

footer {
   width: 100%;
}

footer p {
   color: rgb(211, 211, 211);
   font-size: 0.9em;
   text-align: center;
   background-color: rgb(52, 55, 49);
   margin: 0px;
   padding: 10px 0px;
}

/* Bottom Navigation Styles */

nav#bottom {
   color: rgb(211, 211, 211);
   padding: 15px;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row nowrap;
   flex-flow: row nowrap;
   -webkit-justify-content: center;
   justify-content: center;
   background: linear-gradient(to bottom left, rgb(109, 80, 53) 50%, rgb(141, 33, 12));
}

nav#bottom ul {
   flex: 0 1 150px;
}

nav#bottom ul li {
   font-size: 1em;
   line-height: 1.8em;
}

nav#bottom ul a {
   color: white;
}


tc_order.js

"use strict";


var item = [10582, 23015, 41807, 10041];

var itemDescription = ["1975 Green Bay Packers Football (signed), Item 10582",
    "Tom Landry 1955 Football Card (unsigned), Item 23015",
    "1916 Army-Navy Game, Framed Photo (signed), Item 41807",
    "Protective Card Sheets, Item 10041"];

var itemPrice = [149.93, 89.98, 334.93, 22.67];

var itemQty = [1, 1, 1, 4];


tc_cart.js

"use strict";

/*
   New Perspectives on HTML5 and CSS3, 7th Edition
   Tutorial 10
   Case Problem 1

   Author: Aaron Beyer
   Date: 3/5/2018

   Filename: tc_cart.js
  
*/

// Initialize order total variable
var orderTotal = 0.0;

// Initialize cartHTML string that will hold the table for cart
var cartHTML = "<table>" +
    "<tr><th>Item</th><th>Description</th><th>Price</th><th>Qty</th><th>Total</th></tr>";

// Loop through each item in the order
for (var i = 0; i < item.length; i++) {
    // Add order properties to the cart
    cartHTML += "<tr><td><img src="images/tc_" + item[i] + ".png" alt='" + item[i] + "' /></td>";
    cartHTML += "<td>" + itemDescription[i] + "</td>" +
        "<td>$" + itemPrice[i] + "</td>" +
        "<td>" + itemQty[i] + "</td>";

    // Calculate item cost
    var itemCost = itemPrice[i] * itemQty[i];
    cartHTML += "<td>$" + itemCost + "</td></tr>";

    // Add item cost to order total
    orderTotal += itemCost;
}

// Add order total to end of cart
cartHTML += "<tr><td colspan='4'>Subtotal</td><td>$" + orderTotal + "</td></tr></table>"

// Write the cart to the element with the id "cart"
document.getElementById("cart").innerHTML = cartHTML;

Related Questions

HSCI - Strength & Conditioning Class Problem 1 A 33-year-old female long-distanc
Question #320461
HSCI - Strength & Conditioning Class Problem 2 A collegiate cross-country runner
Question #320462
HSCI - Strength & Conditioning Class Problem 3 Parents of an 8-year-old boy and
Question #320466
HSCI - Strength & Conditioning Class Problem 4 A 66-year-old nationally ranked s
Question #320468
HSCI 390 -Biostatistics lead to high blood pressure, stroke, heart failure, kidn
Question #3061347
HSO 3 NH 2 + NaNO 2 ------> N 2 + NaHSO 4 + H 2 O a. When N 2 was collected over
Question #882231
HSS Industrial has estimated that production for the next five quarters will be:
Question #2564846
HSyllabus-2017 Fall Term X CHAPTER 7 Recitation 11192017-2] C O ezto.mheducation
Question #2592775

Navigate

Previous
HTML/JAVASCRIPT - Find the average of 25 students for a test. Its okay to use a
Next
HTML/JavaScript Template to use for the Midterm The template below should be use

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.