Untitled

<!DOCTYPE html>

<body>
<div id="contentBody">
<h1 id="heading" align="center">
	Website style Editor
	</h1>
	<p id= "paragraph">
	Lorem ipsum dolor sit amet, habemus officiis mandamus id cum, tota harum persius ius ad, quo epicuri explicari ex. Omnesque atomorum periculis usu et, no audiam lobortis sed, vim ad iisque dignissim efficiendi. Nam id legimus molestie noluisse. Vivendum erroribus consulatu duo cu, delectus ocurreret ius ei.

	Ut sed autem tollit offendit. Atqui quidam eu qui. Ea libris graeci iisque est, graece virtute te vim, vel ad appetere tacimates concludaturque. Oblique ullamcorper ut pri, pro ad suas denique appareat. Commune pericula philosophia vis at, usu percipit invidunt voluptaria in. Elitr liberavisse mel eu.

	Quas quaestio theophrastus ne ius. Eum ex eius animal mediocrem, an nec movet clita scribentur. Eu vim nonumes ponderum legendos, ei cum putent percipit concludaturque, eos mucius facete id. Nobis scribentur ius in. Homero facilisis vis an, esse expetenda splendide eu eum, ei his dicit eligendi scripserit.
	</p>
	<form id = "form1">
	<input type="text" id="color" placeholder="Type a color" size="50">
	<button type="button" id="buttons" onclick="changeColor()"> Change color </button> <br/>
	<input type="text" id="bckgrnd" placeholder="Type a background color" size="50">
	<button type="button" id="buttons" onclick="changeBackground()"> Change Background </button> <br/>
	<input type="text" id="style" placeholder="Type a font style" size="50">
	<button type="button" id="buttons" onclick="changeFont()"> Change Font Family </button> <br/>
	<input type="text" id="size" placeholder="Type a font size" size="50">
	<button type="button" id="buttons" onclick="changeSize()"> Change text size </button> <br/>
	</form><br/>
	<b>Change the size of the heading by moving this slider: </b> <br/>
	<label>Heading Size: </lable><input type="range" min="10" max="80" step="10" value="30" onchange="headingSize(this.value)">
	</div>

	<script>
		function changeColor() {
		  var choiceColor = document.getElementById("color");
		  var paragraph = document.getElementById("paragraph");

		  if (paragraph!=null) {
			paragraph.style.color = choiceColor.value;
		  }
		}

		  function changeBackground() {
		  var choiceBgColor = document.getElementById("bckgrnd");
		  var paragraph = document.getElementById("paragraph");

		  if (paragraph!=null) {
			paragraph.style.backgroundColor = choiceBgColor.value;

		  }
		}

		  function changeFont() {
			var choiceFontFam = document.getElementById("style");
		  	var paragraph = document.getElementById("paragraph");

		  if (paragraph!=null) {
			paragraph.style.fontFamily = choiceFontFam.value;

		  }
		}

		  function changeSize() {
			var choiceFontSize = document.getElementById("size");
		  	var paragraph = document.getElementById("paragraph");

		  if (paragraph!=null) {
			paragraph.style.fontSize = choiceFontSize.value + "px";

		  }
		}

		  function headingSize(valChoiceFontSize) {

		  	var paragraph = document.getElementById("heading");

		  if (paragraph!=null) {
			paragraph.style.fontSize = valChoiceFontSize + "px";

		  }
		}


	  </script>

	  <style>
		  body{
			background-color: lightblue;
		}
		#contentBody{
			background-color: white;
			border: 1px solid block;
			padding: 10px;
			border-radius: 5px;
			margin: 100px;

		}
		#form1{

		}
		#buttons{
			font-family: sans-serif;
			font-size: 10px;
			background-color: rgb(34, 153, 34);
			color: #fff;
			border: 0px;
			border-radius: 3px;
			padding: 10px;
			cursor: pointer;
			margin-bottom: 10px;
			text-align: center;
			width: 250px;
		}
		#buttons:hover{
			background-color: rgb(51, 170, 105);
		}
	  </style>

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