HTML and CSS

HTML/JavaScript shopping cart help

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
•
Join Date: Nov 2009
Posts: 12
Reputation: Rblalock is an unknown quantity at this point
Solved Threads: 0
Rblalock
Offline
Newbie Poster
HTML/JavaScript shopping cart help

Nov 8th, 2009
Hello, I'm new to the DaniWeb community and I am in need of some serious help. I am taking a web design class, but the teacher I currently have now has no idea what he is doing; he is an Info Tech teacher, but we have two classes at the same time.

I have to create a shopping cart for my class, and I you can tell, I have no idea how to create a shopping cart with HTML and JavaScript.

I do not have any money to give for anyone's help, but if anyone thinks they might be able to help me create it, I will send them the coding I have at this moment.
•
Join Date: Nov 2009
Posts: 12
Reputation: Rblalock is an unknown quantity at this point
Solved Threads: 0
Rblalock
Offline
Newbie Poster
Nov 8th, 2009
Here is the coding...
 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
<title>Moultrie Technical College - Worth County Campus</title>
 
<style type="text/css" media="all"> 
 
/* Ryan Blalock (ShoppingCart.htm)
9/29/09 */
 
body {
background: transparent url(images/bg.gif) repeat left top; }
 
table {
color:white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-size: 10pt;
font-family: arial,helvetica,sans-serif;
background-color: black; }
 
td#header {
font-size: 16pt;
text-align: center; }
 
td, th {
padding: .3em; }
 
td.align {
vertical-align: top; }
 
h1 {
width: 775px;
height: 125px;
font-size: 20pt;
font-family: "bernhardmod BT",serif;
padding: 15 15 0 40;
background-image: url(logo.png);
background-repeat: no-repeat;
text-align: center;
border-bottom: groove thick;
margin-bottom: 0; }
 
.center {
text-align: center; }
 
tr#black {
color: white;
background-color: black;
font-weight: bold;
text-align: center; }
 
tr#nav {
color: black;
background: #000 url(images/headergradient.png) repeat-x left bottom;
font-weight: bold;
text-align: center; }
 
tr#header {
color: black;
background-color: #FFF;
font-weight: bold;
text-align: center; }
 
td#body {
color: black;
background-color: #FFF;
text-align: justify; }
 
button {
margin-left: 1em; }
 
</style>
 
<script type="text/javascript"> 
 
var imageclock=new Object()
	//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
	imageclock.digits=["images/clock/c0.gif", "images/clock/c1.gif", "images/clock/c2.gif", "images/clock/c3.gif", "images/clock/c4.gif", "images/clock/c5.gif", "images/clock/c6.gif", "images/clock/c7.gif", "images/clock/c8.gif", "images/clock/c9.gif", "images/clock/cam.gif", "images/clock/cpm.gif", "images/clock/colon.gif"]
	imageclock.instances=0
	var preloadimages=[]
	for (var i=0; i<imageclock.digits.length; i++){ //preload images
		preloadimages[i]=new Image()
		preloadimages[i].src=imageclock.digits[i]
	}
 
	imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
		var sections=timestring.split(":")
		if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
			sections[0]="12"
		else if (sections[0]>=13)
			sections[0]=sections[0]-12+""
		for (var i=0; i<sections.length; i++){
			if (sections[i].length==1)
				sections[i]='<img src="'+imageclock.digits[0]+'" /> '+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" /> '
			else
				sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" /> '+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" /> '
		}
		return sections[0]+'<img src="'+imageclock.digits[12]+'" /> '+sections[1]+'<img src="'+imageclock.digits[12]+'" /> '+sections[2]
	}
 
	imageclock.display=function(){
		var clockinstance=this
		this.spanid="clockspan"+(imageclock.instances++)
		document.write('<span id="'+this.spanid+'"> </span> ')
		this.update()
		setInterval(function(){clockinstance.update()}, 1000)
	}
 
	imageclock.display.prototype.update=function(){
		var dateobj=new Date()
		var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
		var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
		document.getElementById(this.spanid).innerHTML=currenttimeHTML
 
	}
 
function checkForm1() {
  if (document.form1.prod.selectedIndex == 0)
    {alert ("Select literature");
     return false;}
  else if (document.form1.qty.selectedIndex == 0)
    {alert ("Select quantity");
     return false;}
  else if (document.form1.ship.value == "0.00")
    {alert ("Select a shipping option");
     return false;}
  else return true;
}
 
</script>
</head>
 
<body>
<div class="center">
 
<table border="0">
<tr id="header">
  <td colspan="2"><h1>Moultrie Technical College<br />Worth County Campus</td>
</tr>
<tr>
<td align="right">
<script type="text/javascript"> 
 
new imageclock.display()
 
</script>
</td></tr>
<tr id="nav">
 
<td>Navigation:: <a href="index.html">Home</a> | <a href="infotech.html">Information Technology</a> | <a href="webdesign.html">Web Design</a> | <a href="cosmo.html">Cosmetology</a> | <a href="cal.html">Calendar</a> | <a href="comptia.html">CompTIA</a></td>
 
</tr>
<tr>
 
<td id="body">E-mail us at: 
<b><script type="text/javascript"> 
document.write("moultrie@moultrietech.edu");
</script></b></td></tr>
 
<tr>
  <td id="body" colspan="2"><br /><p>Welcome to the Moultrie Tech - Worth County- campus bookstore.  Located on this page, you will find all the literature needed for the Moultrie Tech classes given at the Moultrie Tech - Worth Campus.  If, for some reason, the literature that you need is not available on this page, please try the other Moultrie Tech campuses' bookstores.  Literature needed for each quarter of classes will vary by teacher, and if any questions are to come to mind, feel free to ask.</p>
 
<p><strong><u>Web Design Literature</u></strong></p>
 
<p><img src="HTML.jpg" alt="Quarter One:  HTML Literature" width="75" height="75" /><input type="checkbox" id="HTML" value="HTML" />New Perspectives: Blended HTML, XHTML, and CSS Introductory <strong>$73.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<p><img src="javascript.jpg" alt="Quarter Two: JavaScript Literature" width="75" height="75" /><input type="checkbox" id="javascript" value="javascript" />New Perspectives:  JavaScript <strong>$63.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<p><img src="dreamweaver.jpg" alt="Quarter Three: Dreamweaver literature" width="75" height="75" /><input type="checkbox" id="dreamweaver" value="dreamweaver" />New Perspectives on Adobe Dreamweaver CS4 <strong>$84.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<p><img src="photoshop.jpg" alt="Quarter Four: Photoshop literature" width="75" height="75" /><input type="checkbox" id="photoshop" value="photoshop" />Adobe Photoshop CS4: Complete Concepts and Techniques <strong>$66.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<br />
<br />
 
<p><strong><u>Info Tech Literature</u></strong></p>
 
 
 
<p><strong><u>Cosmetology</u></strong></p>
 
 
 
 
<tr id="black">
  <td colspan="2">1210 North Monroe Street Sylvester, GA 31791.</td>
</tr>
</table>
</div>
</body>
</html>
<html>
<head>
<title>Moultrie Technical College - Worth County Campus</title>
 
<style type="text/css" media="all"> 
 
/* Ryan Blalock (ShoppingCart.htm)
9/29/09 */
 
body {
background: transparent url(images/bg.gif) repeat left top; }
 
table {
color:white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-size: 10pt;
font-family: arial,helvetica,sans-serif;
background-color: black; }
 
td#header {
font-size: 16pt;
text-align: center; }
 
td, th {
padding: .3em; }
 
td.align {
vertical-align: top; }
 
h1 {
width: 775px;
height: 125px;
font-size: 20pt;
font-family: "bernhardmod BT",serif;
padding: 15 15 0 40;
background-image: url(logo.png);
background-repeat: no-repeat;
text-align: center;
border-bottom: groove thick;
margin-bottom: 0; }
 
.center {
text-align: center; }
 
tr#black {
color: white;
background-color: black;
font-weight: bold;
text-align: center; }
 
tr#nav {
color: black;
background: #000 url(images/headergradient.png) repeat-x left bottom;
font-weight: bold;
text-align: center; }
 
tr#header {
color: black;
background-color: #FFF;
font-weight: bold;
text-align: center; }
 
td#body {
color: black;
background-color: #FFF;
text-align: justify; }
 
button {
margin-left: 1em; }
 
</style>
 
<script type="text/javascript"> 
 
var imageclock=new Object()
	//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
	imageclock.digits=["images/clock/c0.gif", "images/clock/c1.gif", "images/clock/c2.gif", "images/clock/c3.gif", "images/clock/c4.gif", "images/clock/c5.gif", "images/clock/c6.gif", "images/clock/c7.gif", "images/clock/c8.gif", "images/clock/c9.gif", "images/clock/cam.gif", "images/clock/cpm.gif", "images/clock/colon.gif"]
	imageclock.instances=0
	var preloadimages=[]
	for (var i=0; i<imageclock.digits.length; i++){ //preload images
		preloadimages[i]=new Image()
		preloadimages[i].src=imageclock.digits[i]
	}
 
	imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
		var sections=timestring.split(":")
		if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
			sections[0]="12"
		else if (sections[0]>=13)
			sections[0]=sections[0]-12+""
		for (var i=0; i<sections.length; i++){
			if (sections[i].length==1)
				sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
			else
				sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
		}
		return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
	}
 
	imageclock.display=function(){
		var clockinstance=this
		this.spanid="clockspan"+(imageclock.instances++)
		document.write('<span id="'+this.spanid+'"></span>')
		this.update()
		setInterval(function(){clockinstance.update()}, 1000)
	}
 
	imageclock.display.prototype.update=function(){
		var dateobj=new Date()
		var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
		var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
		document.getElementById(this.spanid).innerHTML=currenttimeHTML
 
	}
 
function checkForm1() {
  if (document.form1.prod.selectedIndex == 0)
    {alert ("Select literature");
     return false;}
  else if (document.form1.qty.selectedIndex == 0)
    {alert ("Select quantity");
     return false;}
  else if (document.form1.ship.value == "0.00")
    {alert ("Select a shipping option");
     return false;}
  else return true;
}
 
</script>
</head>
 
<body>
<div class="center">
 
<table border="0">
<tr id="header">
  <td colspan="2"><h1>Moultrie Technical College<br />Worth County Campus</td>
</tr>
<tr>
<td align="right">
<script type="text/javascript"> 
 
new imageclock.display()
 
</script>
</td></tr>
<tr id="nav">
 
<td>Navigation:: <a href="index.html">Home</a> | <a href="infotech.html">Information Technology</a> | <a href="webdesign.html">Web Design</a> | <a href="cosmo.html">Cosmetology</a> | <a href="cal.html">Calendar</a> | <a href="comptia.html">CompTIA</a></td>
 
</tr>
<tr>
 
<td id="body">E-mail us at: 
<b><script type="text/javascript"> 
document.write("moultrie@moultrietech.edu");
</script></b></td></tr>
 
<tr>
  <td id="body" colspan="2"><br /><p>Welcome to the Moultrie Tech - Worth County- campus bookstore.  Located on this page, you will find all the literature needed for the Moultrie Tech classes given at the Moultrie Tech - Worth Campus.  If, for some reason, the literature that you need is not available on this page, please try the other Moultrie Tech campuses' bookstores.  Literature needed for each quarter of classes will vary by teacher, and if any questions are to come to mind, feel free to ask.</p>
 
<p><strong><u>Web Design Literature</u></strong></p>
 
<p><img src="HTML.jpg" alt="Quarter One:  HTML Literature" width="75" height="75" /><input type="checkbox" id="HTML" value="HTML" />New Perspectives: Blended HTML, XHTML, and CSS Introductory <strong>$73.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<p><img src="javascript.jpg" alt="Quarter Two: JavaScript Literature" width="75" height="75" /><input type="checkbox" id="javascript" value="javascript" />New Perspectives:  JavaScript <strong>$63.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<p><img src="dreamweaver.jpg" alt="Quarter Three: Dreamweaver literature" width="75" height="75" /><input type="checkbox" id="dreamweaver" value="dreamweaver" />New Perspectives on Adobe Dreamweaver CS4 <strong>$84.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<p><img src="photoshop.jpg" alt="Quarter Four: Photoshop literature" width="75" height="75" /><input type="checkbox" id="photoshop" value="photoshop" />Adobe Photoshop CS4: Complete Concepts and Techniques <strong>$66.49</strong></p>
  <select id="quantity" size="1">
    <option>Quantity</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
  </select>
  <button type="submit">Add to Cart</button>
 
<br />
<br />
 
<p><strong><u>Info Tech Literature</u></strong></p>
 
 
 
<p><strong><u>Cosmetology</u></strong></p>
 
 
 
 
<tr id="black">
  <td colspan="2">1210 North Monroe Street Sylvester, GA 31791.</td>
</tr>
</table>
</div>
</body>
</html>
Last edited by peter_budo; Nov 13th, 2009 at 5:31 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
Thread Tools	Search this Thread
Show Printable Version Email this Page
DaniWeb Message

Cancel Changes