EMB Elizabeth Best's professional logo

Elizabeth M Best

Web Portfolio

Elizabeth Best's portrait

Soda Vending Machine App - JavaScript Files

vending.js File


/** Soda Vending Machine App - Main file
*** Created by Elizabeth Best for WEB115

	REQUIRES: definition file vending_library.js for Object Contructors and Methods
			HTML components to visually interact with user
	NEEDS:	CSS styling for visual effects and appeal

***/

//variable declarations
var vendAccount;
var coke = new Beverage ();
var diet_coke = new Beverage ();
var mtn_dew = new Beverage ();
var dr_pepper = new Beverage ();
var root_beer = new Beverage ();
var water = new Beverage ();

//variable to get HTML input elements
var $ = function(id) { return document.getElementById(id); }


//function to set initial values for defined Object propeties
var stock_machine = function () {
	var money = $("deposit");
	money.disabled = true;

	coke.beverage_name = ( $("coke").value );
	diet_coke.beverage_name = ( $("dietcoke").value );
	mtn_dew.beverage_name = ( $("dew").value );
	dr_pepper.beverage_name = ( $("pepper").value );
	root_beer.beverage_name = ( $("rootbeer").value );
	water.beverage_name = ( $("water").value );
}

//functions to add money in vending machince
var deposit_dollar = function () {
	vendAccount.add_money( $("dollar").value );
	update_display();
}

var deposit_quarter = function () {
	vendAccount.add_money( $("quarter").value );
	update_display();
}

var deposit_dime = function () {
	vendAccount.add_money( $("dime").value );
	update_display();
}

var deposit_nickel = function () {
	vendAccount.add_money( $("nickel").value );
	update_display();
}

//function to display total amount of 'money' input into machine
var update_display = function () {
	$("deposit").value = vendAccount.balance.toFixed(2);
}

//function to change button appearance for after beverages are depleted
var outOfStock = function (beverage) {
	beverage.setAttribute("class", "disabled");
	beverage.disabled = true;
	beverage.setAttribute("title", "Out of Stock");
}

/*functions to vend each type of beverage defined calling its method 'purchase_soda',
  then comparing money input to cost with 'Money' object method 'make_change',
  then checking if flag for out-of-stock changed to force CSS visual change and call function to send user response **/
var vend_coke = function () {
	coke.purchase_soda(vendAccount.balance);
	vendAccount.make_change(coke.cost);
	
	if ( coke.out_of_stock == true ) {
		var beverage = $("coke");
		outOfStock(beverage);
	}
	create_message(coke.beverage_name);
}

var vend_dietcoke = function () {
	diet_coke.purchase_soda(vendAccount.balance);
	vendAccount.make_change(diet_coke.cost);
	
	if ( diet_coke.out_of_stock == true ) {
		var beverage = $("dietcoke");
		outOfStock(beverage);
		}
	create_message(diet_coke.beverage_name);
}

var vend_dew = function () {
	mtn_dew.purchase_soda(vendAccount.balance);
	vendAccount.make_change(mtn_dew.cost);
	
	if ( mtn_dew.out_of_stock == true ) {
		var beverage = $("dew");
		outOfStock(beverage);
	}
	create_message(mtn_dew.beverage_name);
}

var vend_pepper = function () {
	dr_pepper.purchase_soda(vendAccount.balance);
	vendAccount.make_change(dr_pepper.cost);
	
	if ( dr_pepper.out_of_stock == true ) {
		var beverage = $("pepper");
		outOfStock(beverage);
	}
	create_message(dr_pepper.beverage_name);
}

var vend_rootbeer = function () {
	root_beer.purchase_soda(vendAccount.balance);
	vendAccount.make_change(root_beer.cost);
	
	if ( root_beer.out_of_stock == true ) {
		var beverage = $("rootbeer");
		outOfStock(beverage);
	}
	create_message(root_beer.beverage_name);
}

var vend_water = function () {
	water.purchase_soda(vendAccount.balance);
	vendAccount.make_change(water.cost);
	
	if ( water.out_of_stock == true ) {
		var beverage = $("water");
		outOfStock(beverage);
	}
	create_message(water.beverage_name);
}

//function to generate a message to the user based on money amount input and beverage selection
var create_message = function (beverage_name) {
	var message = "";
	if (vendAccount.change < 0 ) {
		message = "You need an additional $" + Math.abs(vendAccount.change).toFixed(2) + " to buy " + beverage_name + ".";
	} else if (vendAccount.change > 0) {
		message = "Please enjoy your " + beverage_name + " and take your $" + vendAccount.change.toFixed(2) + " change.";
	} else {
		message = "Please enjoy your " + beverage_name + ".";
	}
	$("message").firstChild.nodeValue = message;
	update_display();
}

//function to clear money input
var refund_money = function () {
	var message = vendAccount.refund();
	$("message").firstChild.nodeValue = message;
	update_display();
}

//function to gather user input and call appropriate functions
window.onload = function () {
	stock_machine();
	vendAccount = new Money();
	
	$("dollar").onclick = deposit_dollar;
	$("quarter").onclick = deposit_quarter;
	$("dime").onclick = deposit_dime;
	$("nickel").onclick = deposit_nickel;
	
	$("coke").onclick = vend_coke;
	$("dietcoke").onclick = vend_dietcoke;
	$("dew").onclick = vend_dew;
	$("pepper").onclick = vend_pepper;
	$("rootbeer").onclick = vend_rootbeer;
	$("water").onclick = vend_water;
	
	$("refund").onclick = refund_money;
}				

vending_library.js File


/** Soda Vending Machine App - Object Constructors and Methods file
*** Created by Elizabeth Best for WEB115

	NEEDS: vending.js file to utilize the objects and methods defined
***/

//Object Constructor for defining type 'Beverage'
var Beverage = function () {
	this.beverage_name;
	this.cost = 0.75;
	this.num_in_stock = 2;
	this.out_of_stock = false;
}

//Object Method for 'Beverage' to handle the act of its purchase, requires 
Beverage.prototype.purchase_soda = function (balance) {
	var balance = balance;
	if ( balance >= this.cost ) {
		this.num_in_stock--;
		
		if (this.num_in_stock == 0) {
			this.out_of_stock = true;
		}
	}
}


//Object Constructor for defining type 'Money'
var Money = function () {
	this.balance = 0;
	this.change = 0;
}

//Object Method for 'Money' to add value to vending machine deposit based on user input 
Money.prototype.add_money = function (deposit) {
	var amount = 0;
	var deposit_amt = deposit;
		
	switch (deposit_amt) {
		case "Dollar":
			amount = 1.00;
			break;
		
		case "Quarter":
			amount = 0.25;
			break;
		
		case "Dime":
			amount = 0.10;
			break;
			
		case "Nickel":
			amount = 0.05;
			break;		
	}
	
	this.balance += parseFloat(amount);
}

//Object Method for 'Money' to calculate difference in money deposited and beverage cost
Money.prototype.make_change = function (cost) {
	this.change = this.balance - cost;
	
	if ( this.change >= 0 ) {
		this.balance = 0;
	}
}

//Object Method for 'Money' to clear deposited money and 'return' it upon user request
Money.prototype.refund = function () {
	this.change = this.balance;
	this.balance = 0;
	
	var message = "Please take your $" + this.change.toFixed(2) + " refund.";
	return message;
}