A Four-Function Calculator in JavaScript

The code shown below implements a simple four-function calculator in JavaScript. It’s not quite finished, and does not yet support decimal points.

<html>
<body>

<script type='text/javascript'>

function Calculator()
{
	this.main = function()
	{
		var size = new Coords(32, 32);

		var buttonDigitFunction = function(event)
		{
			var button = event.target.button;

			console.displayNext.value_Set
			(
				console.displayNext.value * 10 
				+ button.argumentForClick
			);
		}

		var buttonOperationFunction = function(event) 
		{ 
			var button = event.target.button;
			var console = button.console;

			console.operationInProgress.perform(console);
			console.displayNext.value_Set(0);
			console.operationInProgress = button.argumentForClick;
		}

		var console = new Console
		(
			"Calculator",
			new Display
			(
				new Coords(1, 1).multiply(size),
				new Coords(5, 1).multiply(size)
			),
			new Display
			(
				new Coords(1, 3).multiply(size),
				new Coords(5, 1).multiply(size)
			),
			[
				new Button("1", "1", 	new Coords(1, 5).multiply(size), size, buttonDigitFunction, 1),
				new Button("2", "2", 	new Coords(2, 5).multiply(size), size, buttonDigitFunction, 2),
				new Button("3", "3", 	new Coords(3, 5).multiply(size), size, buttonDigitFunction, 3),
				new Button("4", "4", 	new Coords(1, 6).multiply(size), size, buttonDigitFunction, 4),
				new Button("5", "5", 	new Coords(2, 6).multiply(size), size, buttonDigitFunction, 5),
				new Button("6", "6", 	new Coords(3, 6).multiply(size), size, buttonDigitFunction, 6),
				new Button("7", "7", 	new Coords(1, 7).multiply(size), size, buttonDigitFunction, 7),
				new Button("8", "8", 	new Coords(2, 7).multiply(size), size, buttonDigitFunction, 8),
				new Button("9", "9", 	new Coords(3, 7).multiply(size), size, buttonDigitFunction, 9),
				new Button("0", "0", 	new Coords(2, 8).multiply(size), size, buttonDigitFunction, 0),
				new Button(".", ".", 	new Coords(1, 8).multiply(size), size, function(event) { /* todo */ }, "."),

				new Button("Equals", 	"=", new Coords(3, 8).multiply(size), size, buttonOperationFunction, 	Operation.Instances.Equals),
				new Button("Add", 	"+", new Coords(5, 5).multiply(size), size, buttonOperationFunction, 	Operation.Instances.Add),
				new Button("Divide", 	"/", new Coords(5, 6).multiply(size), size, buttonOperationFunction, 	Operation.Instances.Divide),
				new Button("Multiply", 	"*", new Coords(5, 7).multiply(size), size, buttonOperationFunction, 	Operation.Instances.Multiply),
				new Button("Subtract", 	"-", new Coords(5, 8).multiply(size), size, buttonOperationFunction, 	Operation.Instances.Subtract),
			]
		);

		document.body.appendChild
		(
			console.toHTMLElement()
		);
	}
}

function Button(name, text, pos, size, methodForClick, argumentForClick)
{
	this.name = name;
	this.text = text;
	this.pos = pos;
	this.size = size;
	this.methodForClick = methodForClick;
	this.argumentForClick = argumentForClick;
}
{
	Button.prototype.toHTMLElement = function()
	{
		var returnValue = document.createElement("button");

		returnValue.style.position = "absolute";
		returnValue.style.left = this.pos.x;
		returnValue.style.top = this.pos.y;
		returnValue.style.width = this.size.x;
		returnValue.style.height = this.size.y;
		returnValue.button = this;
		returnValue.innerHTML = this.text;
		returnValue.onclick = this.methodForClick;

		this.htmlElement = returnValue;

		return returnValue;
	}
}

function Console(name, displayCurrent, displayNext, buttons)
{
	this.name = name;
	this.displayCurrent = displayCurrent;
	this.displayNext = displayNext;
	this.buttons = buttons;

	this.operationInProgress = Operation.Instances.Add;

	this.displayCurrent.console = this;
	this.displayNext.console = this;

	for (var b = 0; b < this.buttons.length; b++)
	{
		this.buttons[b].console = this;
	}
}
{
	Console.prototype.toHTMLElement = function()
	{
		var returnValue = document.createElement("div");

		returnValue.appendChild(this.displayCurrent.toHTMLElement());
		returnValue.appendChild(this.displayNext.toHTMLElement());

		for (var b = 0; b < this.buttons.length; b++)
		{
			var button = this.buttons[b];

			var buttonAsHTMLElement = button.toHTMLElement();

			returnValue.appendChild(buttonAsHTMLElement);
		}

		this.htmlElement = returnValue;

		return returnValue;		
	}
}

function Coords(x, y)
{
	this.x = x;
	this.y = y;
}
{
	Coords.prototype.add = function(other)
	{
		this.x += other.x;
		this.y += other.y;

		return this;
	}

	Coords.prototype.clone = function()
	{
		return new Coords(this.x, this.y);
	}

	Coords.prototype.multiply = function(other)
	{
		this.x *= other.x;
		this.y *= other.y;

		return this;
	}

	Coords.prototype.subtract = function(other)
	{
		this.x -= other.x;
		this.y -= other.y;

		return this;
	}
}

function Display(pos, size)
{
	this.pos = pos;
	this.size = size;
	this.value = 0;
}
{
	Display.prototype.toHTMLElement = function()
	{
		var returnValue = document.createElement("div");

		returnValue.style.position = "absolute";
		returnValue.style.left = this.pos.x;
		returnValue.style.top = this.pos.y;
		returnValue.style.width = this.size.x;
		returnValue.style.height = this.size.y;
		returnValue.style.border = "1px solid";

		this.htmlElement = returnValue;

		return returnValue;
	}

	Display.prototype.value_Set = function(valueToSet)
	{
		this.value = valueToSet;
		this.htmlElement.innerHTML = this.value;
	}
}

function Operation(name, perform)
{
	this.name = name;
	this.perform = perform;
}
{
	Operation.Instances = new Operation_Instances();

	function Operation_Instances()
	{
		this.Add = new Operation
		(
			"Add", 		
			function(console) 
			{ 
				console.displayCurrent.value_Set
				( 
					console.displayCurrent.value
					+ console.displayNext.value
				)
			}
		);

		this.Divide = new Operation
		(
			"Divide", 
			function(console) 
			{ 
				console.displayCurrent.value_Set
				( 
					console.displayCurrent.value
					/ console.displayNext.value
				)
			}
		);

		this.Equals = new Operation
		(
			"Equals",
			function(console) 
			{
				// do nothing? 
			}
		);

		this.Multiply = new Operation
		(
			"Multiply", 
			function(console) 
			{ 
				console.displayCurrent.value_Set
				( 
					console.displayCurrent.value
					* console.displayNext.value
				)
			}
		);

		this.Subtract = new Operation
		(
			"Subtract", 
			function(console) 
			{ 
				console.displayCurrent.value_Set
				( 
					console.displayCurrent.value
					- console.displayNext.value
				) 
			}
		);
	}
}

// run

new Calculator().main();

</script>

</body>
</html>
Advertisements
This entry was posted in Uncategorized and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s