cmoscardi/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Shop</title>
    </head>
    <body>
        <div id="header">
            <h1>Williamsburg Headphones</h1>
        </div>
        <div id="products">
            <div id="product_buttons_box">
                <h4>Product List</h4>
                <ul id="product_list">
                    <li>
                        <button id="product1_button">Beats By Dre</button>
                    </li>
                    <li>
                        <button id="product2_button">Product 2</button>
                    </li>
                    <li>
                        <button id="product3_button">Product 3</button>
                    </li>
                    <li>
                        <button id="product4_button">Product 4</button>
                    </li>
                </ul>
            </div>
            <div id="product_display">
                <img src="https://s16.postimg.org/hgdibkl6d/please_select_a_product.png" id="product_image">
                <p id="product_text"></p>
            </div>
            <div id="shipping_info">
                <h3> Enter Your Shipping Address</h3>
                <textarea></textarea>
                <button id="order"> Place your order</button>
            </div>
            <div id="shipping_options">
                <h4> Choose your shipping method </h4>
                <label>regular ($0)</label>
                <input type="radio" name="qq" value="0"/>
                <label>express ($10)</label>
                <input type="radio" name="qq" value="10" />
            </div>
        </div>
    </body>
</html>

## popcode.json
{"enabledLibraries":["jquery"]}

## script.js

// This is an example for product 1, copy and paste everything below for each product
$("#product1_button").click(function(){

    $("#product_image").attr("src","http://www.cratekings.com/wp-content/uploads/2010/03/Beats-Spin-dr-dre-headphones-White.JPG"); // Sets the product image

    $("#product_text").html("Beats By Dre - White $<span>299</span>"); // Sets the product text

});

$("#order").click(function(){
    alert("Your item " + $("#product_text").text() + " will be shipped to " + $("#shipping_info textarea").val());
    alert("it will cost " + $("#product_text span").text() + "and " +  $("input[name=qq]").val() + " shipping");
});

## styles.css
body{
    margin: 0px;
    padding: 0px;
}

#header{
    background-color: #ccc;
    padding: 10px;
    width: 100%;
    text-align: center;
    margin: 0px;
}

#products{
    margin: 0px;
    padding: 10px;
    width: 100%;
}

#product_buttons_box{
    float: left;
    width: 200px;
    padding: 2px;
    border: 1px solid #000;
    background-color: #ddd;
    margin-right: 20px;
}

#product_display{
    width: 100%;
    padding: 20px;
    text-align: center;
}

#product_image{
    height: 400px;
    width: 400px;
}

#product_text{
    font-weight: bold;
}

li{
    margin: 6px;
}
#shipping_info {
    float:left;
    width: 50%;
}
#shipping_options {
    float:left;
    width: 49%;
    border-left: 1px solid black;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Shop</title>
	</head>
	<body>
	<div id="header">
	<h1>Williamsburg Headphones</h1>
	</div>
	<div id="products">
	<div id="product_buttons_box">
	<h4>Product List</h4>
	<ul id="product_list">
	<li>
	<button id="product1_button">Beats By Dre</button>
	</li>
	<li>
	<button id="product2_button">Product 2</button>
	</li>
	<li>
	<button id="product3_button">Product 3</button>
	</li>
	<li>
	<button id="product4_button">Product 4</button>
	</li>
	</ul>
	</div>
	<div id="product_display">
	<img src="https://s16.postimg.org/hgdibkl6d/please_select_a_product.png" id="product_image">
	<p id="product_text"></p>
	</div>
	<div id="shipping_info">
	<h3> Enter Your Shipping Address</h3>
	<textarea></textarea>
	<button id="order"> Place your order</button>
	</div>
	<div id="shipping_options">
	<h4> Choose your shipping method </h4>
	<label>regular ($0)</label>
	<input type="radio" name="qq" value="0"/>
	<label>express ($10)</label>
	<input type="radio" name="qq" value="10" />
	</div>
	</div>
	</body>
	</html>

	// This is an example for product 1, copy and paste everything below for each product
	$("#product1_button").click(function(){

	$("#product_image").attr("src","http://www.cratekings.com/wp-content/uploads/2010/03/Beats-Spin-dr-dre-headphones-White.JPG"); // Sets the product image

	$("#product_text").html("Beats By Dre - White $<span>299</span>"); // Sets the product text

	});

	$("#order").click(function(){
	alert("Your item " + $("#product_text").text() + " will be shipped to " + $("#shipping_info textarea").val());
	alert("it will cost " + $("#product_text span").text() + "and " + $("input[name=qq]").val() + " shipping");
	});
	body{
	margin: 0px;
	padding: 0px;
	}

	#header{
	background-color: #ccc;
	padding: 10px;
	width: 100%;
	text-align: center;
	margin: 0px;
	}

	#products{
	margin: 0px;
	padding: 10px;
	width: 100%;
	}

	#product_buttons_box{
	float: left;
	width: 200px;
	padding: 2px;
	border: 1px solid #000;
	background-color: #ddd;
	margin-right: 20px;
	}

	#product_display{
	width: 100%;
	padding: 20px;
	text-align: center;
	}

	#product_image{
	height: 400px;
	width: 400px;
	}

	#product_text{
	font-weight: bold;
	}

	li{
	margin: 6px;
	}
	#shipping_info {
	float:left;
	width: 50%;
	}
	#shipping_options {
	float:left;
	width: 49%;
	border-left: 1px solid black;
	}