Skip to content

Commit

Permalink
Added Files
Browse files Browse the repository at this point in the history
  • Loading branch information
Richard Hpa committed Sep 20, 2017
0 parents commit 25672d1
Show file tree
Hide file tree
Showing 9 changed files with 205 additions and 0 deletions.
11 changes: 11 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# CartFunctionality

Add to cart functionality using Local Storage.

You can use this JS file for your Summative 1.

You will have to do some changes to the JavaScript code for it to be able to fully work with your project. When you are ready to add this to your project then let me know and I will help you out to get it working.

Github Pages example bellow

[Add to Cart Example](https://17wdwu02.github.io/CartFunctionality.github.io/)
1 change: 1 addition & 0 deletions _config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
theme: jekyll-theme-cayman
62 changes: 62 additions & 0 deletions cart.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<html>
<head>
<title>Cart Example</title>
<style type="text/css">
table, td, th {
border: 1px solid black;
}

table {
border-collapse: collapse;
width: 100%;
display: none;
}

th {
text-align: left;
}

#template{
display: none;
}

img{
width: 130px;
}
</style>
</head>
<body>

<p>What is in my cart</p>
<div id="cart">
<table id="cartTable">
<thead>
<tr>
<th></th>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Subtotal</th>
<th></th>
</tr>
</thead>
<tbody id="CartContainer">
<tr id="template" class="product">
<td><img class="product_image" src=".//"></td>
<td class="product_title"></td>
<td class="product_quantity"></td>
<td>$<span class='product_price'></span></td>
<td>$<span class='sub_price'></span></td>
<td><button class='add'>Add</button><button class='remove'>Remove</button></td>
</tr>
</tbody>
</table>
</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/cartFunction.min.js"></script>
</body>
</html>
Binary file added images/blueDye.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/greenLimes.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/greyDuck.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/redRoses.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
130 changes: 130 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
<html>
<head>
<title>adding Cart Example</title>
<style type="text/css">
.box{
width: 150px;
min-height: 150px;
float: left;
margin-left: 10px;
text-align: center;
color: white;
}

.row:after{
content: "";
clear: both;
display: table;
}

.redBox{
background-color: red;
}

.greenBox{
background-color: green;
}

.blueBox{
background-color: blue;
}

.greyBox{
background-color: grey;
}
table, td, th {
border: 1px solid black;
}

table {
border-collapse: collapse;
}

#cartTable{
display: none;
}

th {
text-align: left;
}

#template{
display: none;
}
img{
width: 100px;
}
</style>
</head>
<body>
<h1>add New Items to Cart</h1>

<div class="row">
<div class="box redBox product">
<p class="product_title">red roses</p>
<p>$<span class="product_price">5.00</span></p>
<button class="add">+</button>
<button class="remove">-</button>
<img class="product_image" src="images/redRoses.jpg">
</div>
<div class="box greenBox product">
<p class="product_title">green</p>
<p>$<span class="product_price">10.99</span></p>
<button class="add">+</button>
<button class="remove">-</button>
<img class="product_image" src="images/greenLimes.jpg">
</div>
<div class="box blueBox product">
<p class="product_title">blue</p>
<p>$<span class="product_price">20.00</span></p>
<button class="add">+</button>
<button class="remove">-</button>
<img class="product_image" src="images/blueDye.jpg">
</div>
<div class="box greyBox product">
<p class="product_title">grey</p>
<p>$<span class="product_price">5.25</span></p>
<button class="add">+</button>
<button class="remove">-</button>
<img class="product_image" src="images/greyDuck.jpg">
</div>


</div>
</div>

<hr>
<button id="clear">Clear Cart</button>
<p>What is in my cart</p>
<strong><p>Cart Count (<span class="cartCount"></span>)</p></strong>
<div id="cart">
<table id="cartTable">
<thead>
<tr>
<th>Product Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Subtotal</th>
<th></th>
</tr>
</thead>
<tbody id="CartContainer">
<tr id="template" class="product">
<td class="product_title"></td>
<td class="product_quantity"></td>
<td>$<span class='product_price'></span></td>
<td>$<span class='sub_price'></span></td>
<td><button class='add'>Add</button><button class='remove'>Remove</button></td>
</tr>
</tbody>
</table>
</div>
<strong><p>Total Order Price ($<span class="priceCount"></span>)</p></strong>
<hr>
<a href="cart.html">Go to Cart</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/cartFunction.min.js"></script>

</body>
</html>
1 change: 1 addition & 0 deletions js/cartFunction.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 25672d1

Please sign in to comment.