Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Vending Machine - JS, jQuery, HTML5, XML, JSON

HTML5 HTML JSON jQuery xml html5 json jquery

  • Please log in to reply
1 reply to this topic

#1 cabalsun

cabalsun

    CC Lurker

  • New Member
  • Pip
  • 9 posts

Posted 27 February 2012 - 08:21 PM

Hi all experts

as you all can see the topic. I am taking the web programing class, which i'm totally new to this. The project is to create a vending machine with the combination of web languages above. I would like to have some web experts to explain codes below in detail of what it does. By the way, this project is due on March 4, 2012. Thank you so much

sample codes from instructor:

--------------------------------------------------Inheritance------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function Vehicle(vehicleID, vehicleName) {
this.setVehicleID(vehicleID);
this.setVehicleName(vehicleName);
}
Vehicle.method('setVehicleID', function () {
this.vehicleID = vehicleID;
return this;
});
Vehicle.method('getVehicleID', function () {
return this.vehicleID;
});
Vehicle.method('setVehicleName', function () {
this.vehicleName = vehicleName;
return this;
});
Vehicle.method('getVehicleName', function () {
return this.vehicleName;
});

function Car(vehicleID, vehicleName, vehicleStyle) {
this.setVehicleID(vehicleID);
this.setVehicleName(vehicleName);
this.setVehicleStyle(vehicleStyle);
}

function Truck(vehicleID, vehicleName, vehicleTowing) {
this.setVehicleID(vehicleID);
this.setVehicleName(vehicleName);
this.setVehicleTowing(vehicleTowing);
}

Car.inherits(Vehicle);
Truck.inherits(Vehicle);

Car.method('getVehicleID', function () {
return this.uber('vehicleID');
});

Car.method('getVehicleID', function () {
return this.uber('vehicleName');
});

Truck.method('getVehicleID', function () {
return this.uber('vehicleID');
});

Truck.method('getVehicleID', function () {
return this.uber('vehicleName');
});

Car.method('setVehicleID', function (vehicleID) {
this.uber(vehicleID);
});

Car.method('setVehicleID', function (vehicleName) {
this.uber(vehicleName);
});

Truck.method('setVehicleID', function (vehicleID) {
this.uber(vehicleID);
});

Truck.method('setVehicleID', function (vehicleName) {
this.uber(vehicleName);
});

//Enums
var vehicleStyle = { "coupe": 1, "sedan": 2, "convertible": 3 };
var vehicleTowing = { "halfTon": 1, "OneTon": 2, "TwoTon": 3 };

//Create the Objects
myCar = new Car(1, "Camaro", vehicleStyle.coupe);
myCar2 = new Car(2, "Chevelle", vehicleStyle.convertible);
myTruck = new Truck(3, "Mudder", vehicleTowing.halfTon);



});
</script>
</head>
<body>
</body>
</html>

---------------------------------------------JSON--------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {

//Enums
var vehicleStyle = { "coupe": 1, "sedan": 2, "convertible": 3 };
var vehicleTowing = { "halfTon": 1, "OneTon": 2, "TwoTon": 3 };

//Build the JSON object
var JSONObject = { "vehicleID": "", "vehicleName": "", "vehicleStyle": "" };

//Fill it with values
JSONObject.vehicleID = 1;
JSONObject.vehicleName = "Camaro";
JSONObject.vehicleStyle = vehicleStyle.coupe;

//Set the Values on the Form
$("#vehicleID").val(JSONObject.vehicleID);
$("#vehicleName").val(JSONObject.vehicleName);
$("#vehicleStyle").val(JSONObject.vehicleStyle);

//When the button is clicked
$("#submit").click(function () {
JSONObject.vehicleID = $("#vehicleID").val();
JSONObject.vehicleName = $("#vehicleName").val();
JSONObject.vehicleStyle = $("#vehicleStyle").val();
});

});
</script>
</head>
<body>
Vehicle ID: <input type="text" id="vehicleID" /><br />
Vehicle Name: <input type="text" id="vehicleName" /><br />
Vehicle Style: <input type="text" id="vehicleStyle" /><br />
<input type="submit" id="submit" />
</body>
</html>

---------------------------------------------------BANK----------------------------------------------------------------

function BankService(productCost, amountDeposited)
{
var CC = { "Nickel": 0, "Dime": 0, "Quarter": 0 };
TotalChange = amountDeposited - productCost;
if (TotalChange <= .0)
{
CC.Nickel = 0;
CC.Dime = 0;
CC.Quarter = 0;
}
else if (TotalChange < .06)
CC.Nickel = 1;
else if (TotalChange < .11)
CC.Dime = 1;
else if (TotalChange < .16)
{
CC.Dime = 1;
CC.Nickel = 1;
}
else if (TotalChange < .21)
CC.Dime = 2;
else if (TotalChange < .26)
CC.Quarter = 1;
else if (TotalChange < .31)
{
CC.Quarter = 1;
CC.Nickel = 1;
}
else if (TotalChange < .36)
{
CC.Quarter = 1;
CC.Dime = 1;
}
else if (TotalChange < .41)
{
CC.Quarter = 1;
CC.Dime = 1;
CC.Nickel = 1;
}
else if (TotalChange < .46)
{
CC.Quarter = 1;
CC.Dime = 2;
}
else if (TotalChange < .51)
CC.Quarter = 2;
else if (TotalChange < .56)
{
CC.Quarter = 2;
CC.Nickel = 1;
}
else if (TotalChange < .61)
{
CC.Quarter = 2;
CC.Dime = 1;
}
else if (TotalChange < .66)
{
CC.Quarter = 2;
CC.Dime = 1;
CC.Nickel = 1;
}
else if (TotalChange < .71)
{
CC.Quarter = 2;
CC.Dime = 2;
}
else if (TotalChange < .76)
CC.Quarter = 3;
else if (TotalChange < .81)
{
CC.Quarter = 3;
CC.Nickel = 1;
}
return CC;
};

--------------------------------------------VENDING MACHINE-----------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Vending Machine</title>
<script src="Bank.js" type="text/javascript"
language="javascript"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//productCost, amountDeposited
var CCR = BankService(.60, .90);
alert("Nickel: " + CCR.Nickel.toString() + "\n\r" +
"Dime: " + CCR.Dime.toString() + "\n\r" +
"Quarter: " + CCR.Quarter.toString() + "\n\r");
});
</script>

</head>
<body>
</body>
</html>

Edited by cabalsun, 28 February 2012 - 05:54 AM.

  • 0

#2 Orjan

Orjan

    CC Mentor

  • Moderator
  • 2918 posts
  • Location:Karlstad, Sweden
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, Pascal
  • Learning:Java, C#

Posted 29 February 2012 - 03:22 PM

Eh, I don't intend to explain about 100 lines of code, where many rows that is so simple as simple can be. But some basic input: the first two files seem to be about cars, not vending machines at all, so what they do here, I have no idea. The bank file is about calculating how much to pay back on a purchase in the three different coin types, nickel, dime and quarter. The last file just calls the bank calculation with some set values, more or less, and alerts with the answer.

By the way, there is no html 5 in those files, it's only xhtml 1.0, and the bank calculation seem very odd to me... It could have easily been done it with say 10-15 code lines...
  • 0

I'm a System developer at XLENT Consultant Group mainly working with SugarCRM.
Please DO NOT send mail or PM to me with programming questions, post them in the appropriate forum instead, where I and others can answer you.






Also tagged with one or more of these keywords: HTML5, HTML, JSON, jQuery, xml, html5, json, jquery

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download