work in progress on cut & code for elance storey

lancecaraccioli · Apr 27, 2012 · 52f1575 · 52f1575
1 parent 38a5d4f
commit 52f1575
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 6 deletions.
diff --git a/test_code_problems/task_5_feature_test/index.php b/test_code_problems/task_5_feature_test/index.php
@@ -6,8 +6,49 @@
 	<script language="JavaScript" type="text/javascript" src="store.js"></script>
 </head>
 <body>
+<div id="content-wrapper">
+	<h1 id="title">Elance Store</h1>
+	<div id="content">
+		<form action="#" id = "add_to_cart">
+			<div id="left-column">
+			
+				<label id="category-label">Select a Category:</label>
+				<select id="category" name="catid">
+				</select>
+				<label id="item-label">Select an Item:</label>
+				<select id="item" name="item_id">
+				</select>
+				<label id="shopping-cart-label">Shopping Cart</label>
+				<table id="shopping-cart" cellpadding="0" cellspacing="0">
+					<thead>
+						<tr>
+							<th>Item</th>
+							<th>Price</th>
+							<th></th>
+						</tr>
+					</thead>
+					<tbody>
+						
+					</tbody>
+				</table>
+			</div>
+			
+			<div id = "right-column">
+				<div id="product-image" >
+					<div id="name-footer">
+					</div>
+				</div>
+				<div id="description">
+				</div>
+			</div>
+		</form>
+	</div>
+</div>
 
-<!-- html code here -->
+
+<ul>
+	
+</ul>
 
 </body>
 </html>
diff --git a/test_code_problems/task_5_feature_test/processAHR.php b/test_code_problems/task_5_feature_test/processAHR.php
@@ -1,5 +1,5 @@
 <?php
-
+$action = $_REQUEST['action'];
 /* this file should process an incoming ajax request */
 
 $categories = array(
@@ -10,10 +10,27 @@
 $storeData = array(
 	array('item_id' => 1, 'catid' => 0, 'name' => 'Elance T-Shirt', 'description' => 'Be cool in your very own Elance T-Shirt!', 'price' => 15, 'image' => 'images/tshirt.png'),
 	array('item_id' => 2, 'catid' => 0,'name' => 'Elance Polo', 'description' => 'Represent Elance with a classic polo shirt!', 'price' => 25, 'image' => 'images/polo.png'),
-	array('item_id' => 3, 'catid' => 1,'name' => 'Elance Mug', 'description' => 'Taste success with an Elance mug!', 'price' => 10, 'images' => 'images/mug.png'),
-	array('item_id' => 4, 'catid' => 1,'name' => 'Elance Mousepad', 'description' => 'Custom Elance mousepad!', 'price' => 5, 'images' => 'images/mousepad.png')
+	array('item_id' => 3, 'catid' => 1,'name' => 'Elance Mug', 'description' => 'Taste success with an Elance mug!', 'price' => 10, 'image' => 'images/mug.png'),
+	array('item_id' => 4, 'catid' => 1,'name' => 'Elance Mousepad', 'description' => 'Custom Elance mousepad!', 'price' => 5, 'image' => 'images/mousepad.png')
 );
 
+switch($action){
+	case 'load':
+		$jsonData = array(
+			'categories'=>$categories,
+			'storeData'=>$storeData,
+		);
+		break;
+	case 'checkout':
+		break;
+	default:
+		break;
+}
+
+header('Cache-Control: no-cache, must-revalidate');
+header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
+header('Content-type: application/json');
+echo json_encode($jsonData);
 
 
 
diff --git a/test_code_problems/task_5_feature_test/store.css b/test_code_problems/task_5_feature_test/store.css
@@ -1 +1,44 @@
-/* put your css here */
+body{
+	font-family:sans-serif;
+}
+
+#content-wrapper{
+	width:80%;
+	margin-left:10%;
+}
+
+#title{
+	display:block;
+	border-bottom:3px solid #000;
+}
+
+#left-column{
+	width:50%;
+	float:left;
+}
+
+#right-column{
+	width:50%;
+	float:left;
+}
+
+#left-column label{
+	display:block;
+	font-weight:bold;
+}
+
+#shopping-cart{
+	border:3px solid #CCC;
+
+}
+
+#shopping-cart th{
+	background-color:#CCC;
+	font-size:.7em;
+}
+
+#product-image{
+	width:300px;
+	height:303px;
+	background-repeat:no-repeat;
+}
diff --git a/test_code_problems/task_5_feature_test/store.js b/test_code_problems/task_5_feature_test/store.js
@@ -1,2 +1,39 @@
 //Javascript file for question #5
-//MooTools documentation can be found at www.mootools.net
+//MooTools documentation can be found at www.mootools.net
+function init(){
+	var myRequest = new Request({
+		url:'processAHR.php?action=load',
+		format:'json',
+		onSuccess:function(responseText){
+			var jsonResponse = JSON.decode(responseText);
+			Array.each(jsonResponse.categories, function(item,index,object){
+				var option = new Element('option', {value:index});
+				option.appendText(item);
+				$('category').appendChild(option);
+				$('category').addEvent('change', function(){
+					$('item').getElements('option').destroy();
+					var catid = $('category').get('value');
+					Array.each(jsonResponse.storeData, function(item,index,object){
+						if (catid == item.catid){
+							var option = new Element('option', {value:item.item_id});
+							option.appendText(item.name);
+							$('item').appendChild(option);
+						}
+
+					});
+					$('item').fireEvent('change');
+				});
+				$('item').addEvent('change', function(){
+					var itemId = $('item').get('value');
+					var product = jsonResponse.storeData[itemId-1];
+					$('description').set('html',product.description);
+					$('product-image').setStyle('background-image', 'url('+product.image+')');
+				});
+			});
+			$('category').fireEvent('change');
+		}
+	});
+	myRequest.send();
+};
+
+window.addEvent('domready',init);