Better popups on request page

arc12012 · Dec 2, 2016 · 37a59f0 · 37a59f0
1 parent c250299
commit 37a59f0
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/html/javascript/request.js b/html/javascript/request.js
@@ -87,9 +87,15 @@ function addToCart(){
 		var cart = getCartItems();					//this is an array
 		cart.push(id);								//push to bottom of cart
 		localStorage.setItem('cart', JSON.stringify(cart));
+		$('#added').fadeIn(1000);
+		$('#added').fadeIn(1000);
+    	$('#added').fadeOut(1000);
+	}
+	else{
+		$('#already').fadeIn(1000);
+		$('#already').fadeIn(1000);
+    	$('#already').fadeOut(1000);
 	}
-	else
-		alert("That item is already in your cart!");
 }
 
 function inCart(id){
@@ -137,4 +143,6 @@ function isUnavailable(id){
 		}
 	}
 	return 0;
-}
+}
+
+//this code allows a message to appear that indicates that the item was successfully placed in the shopping cart.
diff --git a/html/webpages/requestPage.html b/html/webpages/requestPage.html
@@ -10,7 +10,7 @@
     <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://ajax.googleapis.com/ajax/libs/jquery/3.1.1/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">
     <style>
@@ -56,6 +56,20 @@
       background-color: #E9EAEB;
     }
 
+    div.cartConfirm{
+      display: none;
+      top: 50%;
+      left: 50%;
+      position: fixed;
+      width: 100px;
+      height: 70px;
+      line-height: 70px;
+      text-align: center;
+      background-color: #FBC600;
+      border: solid;
+      border-color: #3B3C43;
+    }
+
     ul.nav{
       padding: 0px;
     }
@@ -84,6 +98,14 @@ <h4>Operating Systems</h4>
       <h2>Available Devices</h2>
 		  <div id = "devContainer"></div>   
 	  </div>
+
+    <div class = "cartConfirm" id = "added">
+    <p>Added to Cart</p>
+    </div>
+
+    <div class = "cartConfirm" id = "already">
+    <p>Already in Cart</p>
+    </div>
 
 	  <script src="../javascript/request.js"></script>
     <script src = "../javascript/navbar.js"></script>