han85uk/gist:e10944869043e6691692d382e3440f2e

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylequestion1unit14.css">
</head>
<body>
<div id="title">UNIT 14</div>

<div id="slogan">Question One</div>
<div id="maincontent">


<h2>This Page will Evidence the Following:</h2>
<ul>
<li> Create client-side arrays using custom objects  </li>
<li> Create two functions for manipulating client-side arrays </li>
<li> Create two methods for manipulating client-side arrays</li>
<li> Use the prototype property via an object constructor function </li>


</ul>

<h1>Create client-side arrays using custom objects. The array needs three objects, you must have at least two arrays of objects</h1>

<p id="Arrayscustom"></p>

<script>

function paint(type,size,colour) {
this.type = type;
this.size = size;
this.colour = colour;
this.changePaintType = function (newPaintType) {
this.type = newPaintType;
}
}
var arr = [];
arr.push (new paint ("Acrylic", "Large", "Red"));
arr.push (new paint ("Oil", "Medium", "Blue"));
arr.push (new paint ("Watercolour", "Small", "Yellow"));
var i;
for (i=0; i < arr.length; i = i + 1) {
console.log(arr[i].type);

document.getElementById("Arrayscustom").innerHTML += "Paint " + (i + 1) + ":" + arr[i].type + "<br>";
}
</script>

<h1>Create two methods for manipulating client-side arrays</h1>
<h2> Method 1 toString </h2>
<p id="methodsonarrays1"></p>
<h2> Method 2 Pop Method </h2>
<p id="methodsonarrays2"></p>
<script>
var paints = ["Acrylic","Oil","Watercolour","Gloss"];

document.getElementById("methodsonarrays1").innerHTML = paints.toString();

paints.pop();
document.getElementById("methodsonarrays2").innerHTML = paints;

</script>


<h1>Create two Functions for Manipulating Array (Methods as functions)</h1>
<h2> Function 1 reverse method as function </h2>
<p id="functionssonarrays1"></p>
<button onclick="reverseFunction()"> Click To Reverse Order </button>


<script>
// below i now will show two methods invoked as functions upon clicking abutton - the push and reverse
var paints = ["Acrylic","Oil","Watercolour","Gloss"];

document.getElementById("functionssonarrays1").innerHTML = paints;

function reverseFunction() {
	paints.reverse();
	document.getElementById("functionssonarrays1").innerHTML = paints;
	}
</script>

<h2> Function 2 Push Method As Function</h2>
<button onclick="pushFunction()"> Click To add colour </button>
<p id="functionsonarrays2"></p>
<script>

var paintcolours = ["red","blue","green","yellow"];

document.getElementById("functionsonarrays2").innerHTML = paintcolours;

function pushFunction() {
	paintcolours.push("pink");
	document.getElementById("functionsonarrays2").innerHTML = paintcolours;
	}
</script>
<div id="footer">

<div id="copyrightdesign">
Copyright &copy; 2018 Hannah Smythe
</div>


</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="stylequestion1unit14.css">
	</head>
	<body>
	<div id="title">UNIT 14</div>

	<div id="slogan">Question One</div>
	<div id="maincontent">


	<h2>This Page will Evidence the Following:</h2>
	<ul>
	<li> Create client-side arrays using custom objects </li>
	<li> Create two functions for manipulating client-side arrays </li>
	<li> Create two methods for manipulating client-side arrays</li>
	<li> Use the prototype property via an object constructor function </li>


	</ul>

	<h1>Create client-side arrays using custom objects. The array needs three objects, you must have at least two arrays of objects</h1>

	<p id="Arrayscustom"></p>

	<script>

	function paint(type,size,colour) {
	this.type = type;
	this.size = size;
	this.colour = colour;
	this.changePaintType = function (newPaintType) {
	this.type = newPaintType;
	}
	}
	var arr = [];
	arr.push (new paint ("Acrylic", "Large", "Red"));
	arr.push (new paint ("Oil", "Medium", "Blue"));
	arr.push (new paint ("Watercolour", "Small", "Yellow"));
	var i;
	for (i=0; i < arr.length; i = i + 1) {
	console.log(arr[i].type);

	document.getElementById("Arrayscustom").innerHTML += "Paint " + (i + 1) + ":" + arr[i].type + "<br>";
	}
	</script>

	<h1>Create two methods for manipulating client-side arrays</h1>
	<h2> Method 1 toString </h2>
	<p id="methodsonarrays1"></p>
	<h2> Method 2 Pop Method </h2>
	<p id="methodsonarrays2"></p>
	<script>
	var paints = ["Acrylic","Oil","Watercolour","Gloss"];

	document.getElementById("methodsonarrays1").innerHTML = paints.toString();

	paints.pop();
	document.getElementById("methodsonarrays2").innerHTML = paints;

	</script>


	<h1>Create two Functions for Manipulating Array (Methods as functions)</h1>
	<h2> Function 1 reverse method as function </h2>
	<p id="functionssonarrays1"></p>
	<button onclick="reverseFunction()"> Click To Reverse Order </button>



	<script>
	// below i now will show two methods invoked as functions upon clicking abutton - the push and reverse
	var paints = ["Acrylic","Oil","Watercolour","Gloss"];

	document.getElementById("functionssonarrays1").innerHTML = paints;

	function reverseFunction() {
	paints.reverse();
	document.getElementById("functionssonarrays1").innerHTML = paints;
	}
	</script>

	<h2> Function 2 Push Method As Function</h2>
	<button onclick="pushFunction()"> Click To add colour </button>
	<p id="functionsonarrays2"></p>
	<script>

	var paintcolours = ["red","blue","green","yellow"];

	document.getElementById("functionsonarrays2").innerHTML = paintcolours;

	function pushFunction() {
	paintcolours.push("pink");
	document.getElementById("functionsonarrays2").innerHTML = paintcolours;
	}
	</script>
	<div id="footer">

	<div id="copyrightdesign">
	Copyright © 2018 Hannah Smythe
	</div>


	</div>
	</body>
	</html>