SHARE
TWEET

Untitled

a guest Nov 12th, 2019 75 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. ##html
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="ISO-8859-1">
  7. <title>The Pie Shop</title>
  8. <link type="text/css" rel="stylesheet" href="store.css" />
  9. <script type="text/javascript" src="store.js"></script>
  10. </head>
  11.     <body>
  12.         <h1 class= "title">The Pie Shop</h1>
  13.         <img class = "shoppingcart" src = "Images/shoppingcart.png">
  14.         <p class = "tItems">Total Items:</p>
  15.         <p class = "tCost">Total Cost:</p>
  16.             <div class="navbar">
  17.                 <div>
  18.                     <div class="navbardiv" id= "active">
  19.                         <a href= "store.html">
  20.                                 <p>Products</p>
  21.                             </a>
  22.                 </div>
  23.    
  24.                 <div class="navbardiv">
  25.                 <a href="locAndHour.html">
  26.                         <p>Location and Hours</p>
  27.                     </a>
  28.                 </div>
  29.     '
  30.                 <div class="navbardiv">
  31.                 <a href="AbUs.html">
  32.                         <p>About Us</p>
  33.                     </a>               
  34.                 </div>
  35.                 </div>
  36.             </div>
  37.         <h2 class = "activePie">Apple Pie</h2>
  38.         <div class = "mainImage">
  39.         <img src = "Images/applepie.jpg" id= "mainImg"/>
  40.         </div>
  41.  
  42.             <div class="mainImgText">
  43.                 <p id = "mainImgText">Choose a Pie!</p>
  44.             </div>
  45.             <div class = "CartAndPrice">
  46.                 <p id = "Price">Cost:</p>
  47.                 <button id= "CartButton" onclick = "addToCart()">Add to Cart</button>
  48.             </div>
  49.        
  50.    
  51. <!--            <img class = "images" id = "apple" src = "Images/applepie.jpg"> -->
  52. <!--            <img class = "images" id = "banana" src = "Images/bananapie.jpg"> -->
  53. <!--            <img class = "images" id = "lemon" src = "Images/lemonpie.jpg"> -->
  54. <!--            <img class = "images" id = "peach" src = "Images/peachpie.jpg"> -->
  55. <!--            <img class = "images" id = "pumpkin" src = "Images/pumpkinpie.jpeg"> -->
  56. <!--            <img class = "images" id = "rasberry" src = "Images/rasberrypi.jpg"> -->
  57.         <div class = "bottomImages">
  58.             <img onclick="imageFlipper('apple', 0)" id="apple" src="Images/applepie.jpg" />
  59.             <img onclick="imageFlipper('banana', 1)" id="banana" src="Images/bananapie.jpg" />
  60.             <img onclick="imageFlipper('lemon', 2)" id="lemon" src="Images/lemonpie.jpg" />
  61.             <img onclick="imageFlipper('peach', 3)" id="peach" src="Images/peachpie.jpg" />
  62.             <img onclick="imageFlipper('pumpkin', 4)" id="pumpkin" src="Images/pumpkinpie.jpg" />
  63.             <img onclick="imageFlipper('rasberry', 5)" id="rasberry" src="Images/rasberrypi.jpg" />
  64.         </div>
  65.     </body>
  66. </html>
  67.  
  68.  
  69. ## js
  70.  
  71. var caps=[
  72.     "Apple Pie, $20",
  73.     "Banana Pie, $20",
  74.     "Lemon Pie, $20",
  75.     "Peach Pie, $20",
  76.     "Pumpkin Pie, $20",
  77.     "Rasberry Pi, $50"
  78. ]
  79.  
  80. function imageFlipper(anId, x){
  81.     var theSRC = document.getElementById(anId).src;
  82.     document.getElementById("mainImg").src = theSRC;
  83.     updateCap(x)
  84.     document.getElementById("Price").innerHTML = "Cost: $" + displayCost[x];
  85.     document.getElementById("Price").value = displayCost[x];
  86. }
  87.  
  88. function updateCap(x){
  89.     var element = document.getElementById("mainImgText");
  90.     element.innerHTML = caps[x];
  91. }
  92.  
  93. var displayCost = [
  94.     20,
  95.     20,
  96.     20,
  97.     20,
  98.     20,
  99.     50
  100. ]
  101. function addToCart(anId, x){
  102.     var displayCost = document.getElementById("CartButton");
  103.     Math.floor(Math.add("Price"))
  104. }
  105.  
  106.  
  107. ##css
  108.  
  109. .navbardiv{
  110.     display: inline-block;
  111.     padding: 10px;
  112.     font-family: monospace;
  113.     font-size: 18px;
  114.     font-weight: bolder;
  115.     font-color: black;
  116.     text-decoration: none;
  117. }
  118.  
  119. .title{
  120.     text-align: center;
  121. }
  122.  
  123. .activePie{
  124.     text-align: center;
  125. }
  126. .mainImage{
  127.     text-align: center;
  128.     border-radius: 25%;
  129. }
  130. #mainImg{
  131.     border-radius: 25% 10%;
  132.     width: 400px;
  133.     height: 350px;
  134.     padding-bottom: 10px;
  135. }
  136.  
  137. .mainImgText{
  138.     border: 1px solid black;
  139.     text-align: center;
  140.     margin-left: 300px;
  141.     margin-right: 300px;
  142.     padding-top: 10px;
  143.     font-size: 25px;
  144. }
  145.  
  146. .bottomImgTitle{
  147.     display: inline-block;
  148.     width: 900px;
  149.     text-align: center;
  150.    
  151. }
  152. .bottomImgs{
  153.     display: inline-block;
  154.     text-align: center;
  155.     width: 900px;
  156.     height: 150px;
  157.     margin-left: 215px;
  158.     padding-top: 10px;
  159. }
  160.  
  161. .images{
  162.     width: 125px;
  163.     height: 125px;
  164.     display: inline-block;
  165.     border-radius: 25% 10%;
  166.    
  167. }
  168.  
  169. #apple{
  170.     width: 125px;
  171.     height: 125px;
  172.     display: inline-block;
  173. }
  174. #banana{
  175.     width: 125px;
  176.     height: 125px;
  177.     display: inline-block;
  178. }
  179. #lemon{
  180.     width: 125px;
  181.     height: 125px;
  182.     display: inline-block;
  183. }
  184. #peach{
  185.     width: 125px;
  186.     height: 125px;
  187.     display: inline-block;
  188. }
  189. #pumpkin{
  190.     width: 125px;
  191.     height: 125px;
  192.     display: inline-block;
  193. }
  194. #rasberry{
  195.     width: 125px;
  196.     height: 125px;
  197.     display: inline-block;
  198. }
  199.  
  200. .shoppingcart{
  201.     float: right;
  202.     width: 50px;
  203.     height: 50px;
  204.     margin-top: -50px;
  205. }
  206.  
  207. .bottomImages{
  208.     display: inline-block;
  209.     width: 900px;
  210.     text-align: center;
  211.     margin-left: 215px;
  212.     padding-top: 10px;
  213. }
  214.  
  215. #Price{
  216.     text-align: center;
  217. }
  218.  
  219. #CartButton{
  220.     button-align: center;
  221. }
  222.  
  223. .tItems{
  224.     float: right;
  225. }
  226.  
  227. .tCost{
  228.     float: right;
  229. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top