totoyebuilder v1.0.0

#TotoyeBuilder TotoyeBuilder is a small JavaScript library that helps you to create a simple web page.

1) The Page object

The Page object is the principal object or the root parent of a TotoyeBuilder web page.

- Syntax : new TotoyeBuilder.Page()

Methods:
a)	add(element)

	- The /add/ method of the Page object allows the user to add new elements to the viewport of the web page.

b)	setBackground(color or imageURL)

	- The /setBackground/ method gives the user the permission to change the background of the Page. The parameter can be a color or the url of an image.
	
c)	padding("top_padding right_padding bottom_padding left_padding")

	- The /padding/ method takes only one parameter, a string which can contains the top, right, bottom and left padding in pixels.

d) margin("top_margin right_margin bottom_margin left_margin")
	
	- The /margin/ method takes only one parameter, a string which can contains the top, right, bottom and left margin in pixels.
	

2) The Panel object

The Panel object is the second object of a PageBuilder web page. For the ones who know the programming language Java, it can be compared to JPanel, and to the DIV element in JavaScript.

- Syntax: new TotoyeBuilder.Panel(width, height)

Methods:
a)	add(element)
	
	- The /add/ method of the Panel object allows the user to add new elements to the Panel. Can be compared to the method appendChild.
	
b)	setId(id_name)
	
	- This method adds an ID name to the panel.
	
c) setClass(class_name)
	
	- This method adds an Class name to the panel.
	
d)	setWidth(width_size)
	
	- This method is used to define the width of the panel. The parameter is a number(data type) which is defined as pixel value.
	
e)	setHeight(height_size)

	- This method is used to define the height of the panel. The parameter is a number(data type) which is defined as pixel value.
	
f)	changeType(type)
	
	- The method /changeType/ changes the position type of the panel. It can be "absolute", "relative", or "fixed".
	
g)	textAlign(value)
	
	- The /textAlign/ method is used to center, justify or to simply to handle the position of the text or element inside the panel. It is the same as textAlign in CSS.
	
h)	setOuterX(x_value)
	
i)	setInnerX: function(x_value)
	
j)	setOuterY: function(y_value)
	
k)	setInnerY: function(y_value)

l)	setLayoutPriority: function(number)
			
m)	setFontColor: function(color)
	
n)	setBackground: function(style)
	
o)	rounded: function(coef)
	
p)	setBorder: function(width, type, color)
	
q)	eventListener: function(event, method)
	

3) The button object

	- Syntax: new TotoyeBuilder.button(text)

Methods:

	a) setId: function(id)
	
	b) setClass: function(cla)
	
	c) setText: function(t)
	
	d) setWidth: function(w)
	
	e) setHeight: function(h)
	
	f) changeType: function(t)
	
	g) setOuterX: function(x)
	
	h) setInnerX: function(x)
	
	i) setOuterY: function(y)
	
	j) setInnerY: function(y)
	
	k) setLayoutPriority: function(p)
	
	l) setFontColor: function(c)
	
	m) setFont: function(color, size, style)
	
	n) gradient: function(colors)
	
	o) setBackground: function(style)
	
	p) rounded: function(coef)
	
	q) setBorder: function(width, type, color)
	
	r) eventListener: function(event, method)

4) The classElement object

	Can be used just like document.getElementsByClassName. For the ones who don't know it, it can be used as an array or list of all the elements with that specific class name.
	
	- Syntax: new TotoyeBuilder.classElement(class_name)

5) The idElement object

	Can be used just like document.getElementById. For the ones who don't know it, it can be used as another object of an element with that specific id.
	
	- Syntax: new TotoyeBuilder.idElement(id_name)

6) The image object

	This object can be used to manipulate and display an image inside our web page.
	
	- Syntax: new TotoyeBuilder.image(image_url)

Methods:

	a)	setId: function(id)
	
	b)	setClass: function(cla)
	
	c)	changeSrc: function(sr)
	
	d)	setWidth: function(w)
	
	e)	setHeight: function(h)
	
	f)	changeType: function(t)
	
	g)	setX: function(x)
	
	h)	setY: function(y)
	
	i)	setLayoutPriority: function(p)
		- This method defines the priority of an element over another. Between two elements "a" and "b", if "a" layout priority is 3 and "b" layout priority is 1, if they are on the same coordinates or overlap, "a" will be on top of "b". 
	
	j)	rounded: function(coef)
		- Used to round the corner of the element. You can choose it to be in pixel or percentage. The coef parameter belongs to the string data type.
	
	k)	setBorder: function(width, type, color)
	
		Add a border to the element. The parameter "type" can be "dotted", "dashed", "solid", "double", "groove", "ridge", or "none". The width can be pixel or percentage depending on what the user chooses.
	
	l)	eventListener: function(event, method)

7) The Link object

	Create a link to another page or to another website.
	
	- Syntax: new TotoyeBuilder.link(text)

Methods: 

	a)	setId: function(id)
	
	b)	setClass: function(cla)
	
	c)	setUrl: function(url)
	
	d)	setText: function(tex)
	
	e)	add: function(image/button/else)
		Take any element you want to be used as a link.
	
	f)	changeType: function("relative"/"absolute"/"fixed")
	
	g)	gradient: function(colors)
		Take one parameter which is a string which contains all the colors(separated by commas) for the gradient
	
	h)	setFont: function(color, size, style)
	
	i)	setX: function(x)
	
	j)	setY: function(y)
	
	k)	textDecoration: function(dec)	
		Same as textDecoration in CSS.

8) The object screenDimension

	Used to return the inner and the outer sizes of the screen whether the page in the web browser or the screen of your device.
	
	- Syntax : new TotoyeBuilder.screenDimension()
	
	Elements:
	
	a)	innerWidth
	b)	innerHeight
	c)	outerWidth
	d)	outerHeight

9) The object text

	Used to display and manipulate a text.
	
	- Syntax: new TotoyeBuilder.text(the_text)

Methods:

	a)	clear: function()
		To remove all the text.
	
	b)	add: function(t)
		To add or append new text.
	
	c)	changeType: function("absolute"/"relative"/"fixed")
	
	d)	setId: function(id_name)
	
	e)	setClass: function(class_name)
	
	f)	gradient: function(colors)
	
	g)	setFont: function(color, size, style)
	
	h)	setX: function(x)
	
	i)	setY: function(y)