Skip to content

Commit

Permalink
Order form for the shopping cart page
Browse files Browse the repository at this point in the history 
Doesn't do anything with the data right now. Also doesn't actually complete order when pressing submit! Will add that tomorrow. It's fine if we want to use different field; that's easy to change.
  • Loading branch information
@arc12012
arc12012 committed Jan 26, 2017
1 parent fe05cbc commit a6f9552
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 54 deletions.
48 changes: 48 additions & 0 deletions WebContent/html/css/stylesheet.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,54 @@ div.displayDevice{
left: 300px;
}

div.modal{
display:none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}

div.modal-content{
position: relative;
background-color: #fefefe;
margin: 5% auto;
padding: 10px;
border: 1px solid #888;
width: 80%;
max-height: 80%;
text-align: center;
vertical-align: center;
align-items: center;
}

div.modal-body{
padding: 10px;
overflow: auto;
}

input[type=text]{
width: 60%;
}


span.close{
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
span.close:hover,
span.close:focus{
color: black;
text-decoration: none;
cursor: pointer;
}
ul.nav{
padding: 0px;
}
Expand Down
15 changes: 13 additions & 2 deletions WebContent/html/javascript/shoppingCart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,15 @@ var devices = [dev1, dev2, dev3, dev4, dev5, dev6]; //put them all into
var checked = new Array; //this is the array that will indicate whether a shopping cart item is checked off or not

//adding event listeners to all the options, such as ordering and deleting
document.getElementById('os').addEventListener('click',orderSelected);
document.getElementById('os').addEventListener('click',showPopup);
document.getElementById('ds').addEventListener('click',deleteSelected);
document.getElementById('oa').addEventListener('click',orderAll);
document.getElementById('oa').addEventListener('click',showPopup);
document.getElementById('da').addEventListener('click',deleteAll);

// Shipping form popup---------------------
var orderForm = document.getElementById('orderInfoModal');
var orderFormCloseButton = document.getElementById('closeOrderForm');
orderFormCloseButton.addEventListener('click',hidePopup);
show(); //on load, we want to show everything

function getCartItems(){
Expand Down Expand Up @@ -144,6 +148,13 @@ function changeStatus(){
/**
This function takes all the devices we selected and simulates an order on them.
**/
function showPopup(){
orderForm.style.display = "block";
}
function hidePopup(){
orderForm.style.display = "none";
}

function orderSelected(){
var response = confirm("Are you sure you'd like to order the selected items?");
if(response == true){ //if they confirm
Expand Down
128 changes: 76 additions & 52 deletions WebContent/html/webpages/shoppingCart.html
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,90 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">

<title>Synchrony Financial</title>
<title>Synchrony Financial</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css">
<link rel = "shortcut icon" href = "../imgs/synchrony-financial-logo-dlpx_1.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css">
<link rel = "shortcut icon" href = "../imgs/synchrony-financial-logo-dlpx_1.ico">

<style>
div.ticket{
background-image: url('../imgs/ticket.png');
display: inline-block;
height: 126px;
width: 240px;
}
<style>
div.ticket{
background-image: url('../imgs/ticket.png');
display: inline-block;
height: 126px;
width: 240px;
}

p.tickettext{
text-align: center;
vertical-align: middle;
line-height: 126px;
}
p.tickettext{
text-align: center;
vertical-align: middle;
line-height: 126px;
}

#pup{
background-color: #E9EAEB;
border: solid;
text-align: center;
padding: 10px;
}
#pup{
background-color: #E9EAEB;
border: solid;
text-align: center;
padding: 10px;
}
</style>

</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
</nav>
</head>

<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<h4>Shopping Cart Options</h4>
<li class = "option" id = "os"><a href="#">Order Selected</a></li>
<li class = "option" id = "ds"><a href="#">Remove Selected From Cart</a></li>
<li class = "option" id = "oa"><a href="#">Order All</a></li>
<li class = "option" id = "da"><a href="#">Remove All From Cart</a></li>
</ul>
</div>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" id = "navbaruniversal">
</nav>
<div id="orderInfoModal" class="modal">
<div class="modal-content">
<div class="modal-head">
<span id="closeOrderForm" class="close">&times;</span>
<h4>Please provide additional order information</h4>
</div>
<div class="modal-body">
<form>
<label for="name">Your name</label><br/>
<input type="text" name="name" />
<br/><br/>
<label for="location">Place to ship to</label><br/>
<input type="text" name="location" />
<br/><br/>
<label for="timeNeeded">How many weeks do you think you'll need it?</label><br/>
<input type="text" name="timeNeeded" />
<br/><br/>

<input type="submit" name="Submit">
</form>

<div class = "displayDevice">
<h2>Welcome to your shopping cart!</h2>
<div id="shoppingContainer">
</div>
</div>
</div>
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<h4>Shopping Cart Options</h4>
<li class = "option" id = "os"><a href="#">Order Selected</a></li>
<li class = "option" id = "ds"><a href="#">Remove Selected From Cart</a></li>
<li class = "option" id = "oa"><a href="#">Order All</a></li>
<li class = "option" id = "da"><a href="#">Remove All From Cart</a></li>
</ul>
</div>

<div class = "displayDevice">
<h2>Welcome to your shopping cart!</h2>
<div id="shoppingContainer">
</div>
</div>

<script src="../javascript/shoppingCart.js"></script>
<script src = "../javascript/navbar.js"></script>
<script src = "../javascript/nhpup_1.1.js"></script>
</body>

<script src="../javascript/shoppingCart.js"></script>
<script src = "../javascript/navbar.js"></script>
<script src = "../javascript/nhpup_1.1.js"></script>
</body>
</html>

0 comments on commit a6f9552

Please sign in to comment.