Jump to content


Check out our Community Blogs

cabalsun

Member Since 01 Jan 2009
Offline Last Active Apr 17 2012 07:04 PM
-----

Topics I've Started

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

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>

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