fitosegrera/index.html

## index.html
<!--
///////////////////////////////////////
// example_1 web class bootcamp 2014 //
///////////////////////////////////////
//////////// Parsons MFADT ////////////
///////////////////////////////////////
//Created by: fito_segrera
//fii.to
-->
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css"> <!--This line loads the css file: style.css from the css folder -->
	<script src="script.js"></script> <!--This line loads the javascript file: script.js from the js folder -->
	<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'> <!--This line loads a google font -->
</head>
<body>
	<div id = "wrapper">
		<div id = "bigBox">
			<div id = "littleBox">
			</div>
		</div>
		<div class = "buttons">
			<button onclick="colorChangelittle()">color</button>
			<button onclick="sizeChangeLittle()">size</button>
			<button onclick ="contentChange()">content</button>
			<button onclick ="glitchBackGround()">glitch</button>
			<button onclick ="reset()">reset</button>
		</div>
		<div id = "text">
			<p>Text Area:</p>
			<p id = "paragraph"></p>
		</div>
	</div>
</body>
</html>

## script.js
///////////////////////////////////////
// example_1 web class bootcamp 2014 //
///////////////////////////////////////
//////////// Parsons MFADT ////////////
///////////////////////////////////////
//Created by: fito_segrera
//fii.to

//Lets declare some variables first
var colorLittleRed = 0;
var colorLittleGreen = 0;
var colorLittleBlue = 0;
var littleBoxSize = 0;
var randomController = 0;
var interval;
//------------------------------------
//------------------------------------
//This first function modifies the color of the little box every time the user clicks the button called "color 1"
function colorChangelittle() {
	/*
	LETS SEE WHAT IS HAPPENING HERE!!!
	We first declare the color variables that are used later as RGB color values.

	1. Math.random() is a javascript native function that generates a random float between 0.0 and 1.0
		example: 0.2, 0.342, 0.802, etc...

	2. Math.round() is a javascript native fuuntion that converts a float(decimal number) into an int(whole number)
		example: Math.round(3.35) will give a result of 3 --- Math.round(5.1243) will result as 5

	So ----> Math.round(Math.random() * 255) is basically taking the result of a random number between 0.0 and 1.0 (which is a decimal),
	multiply it by 255 (so it can be used as a color value between 0 and 255) and making it a whole number(int)...
		example: imagine that Math.randome() was equal to 0.45, if we multiply that by 255 ---> 0.45 * 255 = 114.75 ---> The we could say
		that ---> Math.round(114.75) = 115

	The reason why we do this proces is because since we want to modify randomly the color of the little box every time we click the
	color 1 button, we ned it first to be a value between 0 and 255 and second an int (whole number) because the css property rgb()
	only accepst int numbers no decimals...

	I hope this is clear enough!
	*/

	colorLittleRed = Math.round(Math.random() * 255);
	colorLittleGreen = Math.round(Math.random() * 255);
	colorLittleBlue = Math.round(Math.random() * 255);
    document.getElementById("littleBox").style.cssText = 'background-color: rgb('+colorLittleRed+','+colorLittleGreen+','+colorLittleBlue+');'
}
//The first function ends here
//------------------------------------
//------------------------------------
//Function to randomly change the size of the little box
function sizeChangeLittle() {
	littleBoxSize = Math.round(Math.random() * 300);
    document.getElementById("littleBox").style.cssText = 'width:'+littleBoxSize+'px; height:'+littleBoxSize+'px;'
}
//The second function ends here
//------------------------------------
//------------------------------------
//This function adds text content to the id = "paragraph" element on the html file
function contentChange(){
	document.getElementById("paragraph").innerHTML = "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto";
	document.getElementById("paragraph").style.cssText = 'font-size:12px; font-family:"arial";'
}
//The third Function ends here
//------------------------------------
//------------------------------------
//This function randomizes the color of the div with the id = "wrapper"
function glitchBackGround(){
		interval = setInterval(function(){
		bgColorRed = Math.round(Math.random() * 255);
		bgColorGreen = Math.round(Math.random() * 255);
		bgColorBlue = Math.round(Math.random() * 255);
		console.log(bgColorBlue);
		document.getElementById("wrapper").style.cssText = 'background-color: rgb('+bgColorRed+','+bgColorGreen+','+bgColorBlue+');'
	},100);
}
//The fourth Function ends here
//------------------------------------
//------------------------------------
//This function resets everything when the reset button is pressed
function reset(){
	clearTimeout(interval);
	document.getElementById("wrapper").style.cssText = 'background-color: rgb(255,255,255);'
	document.getElementById("paragraph").innerHTML = "";
	document.getElementById("littleBox").style.cssText = 'background-color: rgb(100,255,100);'
	document.getElementById("littleBox").style.cssText = 'width:150px;'
}
//The fourth Function ends here
//------------------------------------
//------------------------------------


## style.css
/*
///////////////////////////////////////
// example_1 web class bootcamp 2014 //
///////////////////////////////////////
//////////// Parsons MFADT ////////////
///////////////////////////////////////
//Created by: fito_segrera
//fii.to
*/

#wrapper{
	background-color: rgb(255,255,255);
	height: 800px;
}
#bigBox{
	background-color: rgb(0,0,0);
	width: 300px;
	height: 300px;
}
#littleBox{
	background-color: rgb(100,255,100);
	width: 150px;
	height: 150px;
}
.buttons{
	width: 300px;
}
#text{
	width: 300px;
}
#text p{
	font-size: 14px;
	font-family: 'Press Start 2P', cursive;
}
	<!--
	///////////////////////////////////////
	// example_1 web class bootcamp 2014 //
	///////////////////////////////////////
	//////////// Parsons MFADT ////////////
	///////////////////////////////////////
	//Created by: fito_segrera
	//fii.to
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="style.css"> <!--This line loads the css file: style.css from the css folder -->
	<script src="script.js"></script> <!--This line loads the javascript file: script.js from the js folder -->
	<link href='http://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'> <!--This line loads a google font -->
	</head>
	<body>
	<div id = "wrapper">
	<div id = "bigBox">
	<div id = "littleBox">
	</div>
	</div>
	<div class = "buttons">
	<button onclick="colorChangelittle()">color</button>
	<button onclick="sizeChangeLittle()">size</button>
	<button onclick ="contentChange()">content</button>
	<button onclick ="glitchBackGround()">glitch</button>
	<button onclick ="reset()">reset</button>
	</div>
	<div id = "text">
	<p>Text Area:</p>
	<p id = "paragraph"></p>
	</div>
	</div>
	</body>
	</html>