indie-rok/app.js

## app.js
// como publicar foto
//  if(!window.FileReader){
//     return;
//   }
function readFile(){

  if(this.files && this.files[0]){
    var newImages = new FileReader();
    newImages.addEventListener("load", paintImage);
    newImages.readAsDataURL(this.files[0]);
  }
}
function paintImage(e){
  var realTimeImage = document.getElementById("real-time-image");
  realTimeImage.src = e.target.result;
  // console.log(e.target);
}
// Obteniendo los elemtos
var realTimeComment = document.getElementById("real-time-comment");
var area = document.getElementById("text-comment");
var sendComment = document.getElementById("send");
var sizeText = document.getElementsByClassName("size-text");
var alignText = document.getElementsByClassName("align-text");
var textColor =  document.getElementById("text-color");
var backgroundColor = document.getElementById("background-color");
var commentedPost = document.getElementById("comment-posted");
var selectImage = document.getElementById("select-image");
// Asignando eventos a los elementos
area.addEventListener("keyup", getTextPreview);
sendComment.addEventListener("click", printComments);
textColor.addEventListener("click", changeTextColor);
backgroundColor.addEventListener("click", chnageBackgroundColor);
selectImage.addEventListener("change", readFile);
// ciclos para recorrer las clases de los botones
for(var i  = 0; i< sizeText.length ; i++){
  sizeText[i].addEventListener("click", changeSizeText);
}
for(var i  = 0; i< alignText.length ; i++){
  alignText[i].addEventListener("click", changeAlignText);
}
// para que se vea en tiempo real
function getTextPreview(){
  var enteredText = area.value;
  realTimeComment.innerText = enteredText;
  return realTimeComment;
}
// Para cambiar los tamaños de los comentarios
function changeSizeText (){
  if( this.value === "large"){
    realTimeComment.style.fontSize = "50px";
  } else if(this.value === "medium"){
    realTimeComment.style.fontSize = "40px";
  }else{
    realTimeComment.style.fontSize = "20px";
  }
}
// Para cambiar  la alineacion del texto
function changeAlignText (){
  realTimeComment.style.textAlign = this.value;
}
// Para cambiar el color del texto
function changeTextColor (){
var textColor = prompt("Elige el color del texto");
realTimeComment.style.color = textColor;
}
// Cambiar el color de fondo del texto
function chnageBackgroundColor (){
  var backgroundText = prompt("Elige el fondo de tu texto");
  realTimeComment.style.backgroundColor = backgroundText;
}
// pintar comentio en publicaciones
function printComments (){
  var text = getTextPreview();
  var publishComment = text.parentNode.cloneNode(true);
  console.log(text.parentNode);
  commentedPost.insertBefore(publishComment, commentedPost.firstChild);
  area.value = " ";
  text.removeAttribute("style");
  text.innerText = " ";
  // document.getElementById("real-time-image").removeAttribute("src");
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <title>libro de visitas</title>
</head>
<body>
  <header>
    <h2 align= "center">
      Bienvenida al desarrollo Web
    </h2>
  </header>
  <h3>Comentarios publicados</h3>
  <ul>
    <li>
      <div type ="none" id="comment-posted">
        <div id="new-comments" style="border: 1px color: black"><hr widht="800" align ="left"></div>
      </div>
    </li>
  </ul>
  <form>
    <h3>Comenta</h3>
    <input type="button" value="large" id="big-text" class="size-text">
    <input type="button" value="medium" id="medium-text" class="size-text" >
    <input type="button" value="small" id="small-text" class="size-text">
    <input type="button" value="color de texto" id="text-color">
    <input type="button" value="color de fondo " id="background-color">
    <input type="button" value="left" class="align-text">
    <input type="button" value="center" class="align-text">
    <input type="button" value="right" class="align-text">
    <input type="file" id="select-image">
    <!-- <select name="" id=""></select> -->
    <div>
      <textarea name="Ingresar el comentario" id="text-comment" cols="30" rows="10" placeholder="Escribe aqui tu comentario" value="Comentario"></textarea>
    </div>
  </form>
  <div>
    <h4>
      Como se ve tu comentario
    </h4>
    <div>
      <p name="real-time-comment" id="real-time-comment"></p>
      <img src="" alt="" id="real-time-image">
    </div>
    <hr>
    <input type="submit" value="Enviar" id="send">
  </div>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> -->
  <script src="js/app.js"></script>
</body>
</html>
	// como publicar foto
	// if(!window.FileReader){
	// return;
	// }
	function readFile(){

	if(this.files && this.files[0]){
	var newImages = new FileReader();
	newImages.addEventListener("load", paintImage);
	newImages.readAsDataURL(this.files[0]);
	}
	}
	function paintImage(e){
	var realTimeImage = document.getElementById("real-time-image");
	realTimeImage.src = e.target.result;
	// console.log(e.target);
	}
	// Obteniendo los elemtos
	var realTimeComment = document.getElementById("real-time-comment");
	var area = document.getElementById("text-comment");
	var sendComment = document.getElementById("send");
	var sizeText = document.getElementsByClassName("size-text");
	var alignText = document.getElementsByClassName("align-text");
	var textColor = document.getElementById("text-color");
	var backgroundColor = document.getElementById("background-color");
	var commentedPost = document.getElementById("comment-posted");
	var selectImage = document.getElementById("select-image");
	// Asignando eventos a los elementos
	area.addEventListener("keyup", getTextPreview);
	sendComment.addEventListener("click", printComments);
	textColor.addEventListener("click", changeTextColor);
	backgroundColor.addEventListener("click", chnageBackgroundColor);
	selectImage.addEventListener("change", readFile);
	// ciclos para recorrer las clases de los botones
	for(var i = 0; i< sizeText.length ; i++){
	sizeText[i].addEventListener("click", changeSizeText);
	}
	for(var i = 0; i< alignText.length ; i++){
	alignText[i].addEventListener("click", changeAlignText);
	}
	// para que se vea en tiempo real
	function getTextPreview(){
	var enteredText = area.value;
	realTimeComment.innerText = enteredText;
	return realTimeComment;
	}
	// Para cambiar los tamaños de los comentarios
	function changeSizeText (){
	if( this.value === "large"){
	realTimeComment.style.fontSize = "50px";
	} else if(this.value === "medium"){
	realTimeComment.style.fontSize = "40px";
	}else{
	realTimeComment.style.fontSize = "20px";
	}
	}
	// Para cambiar la alineacion del texto
	function changeAlignText (){
	realTimeComment.style.textAlign = this.value;
	}
	// Para cambiar el color del texto
	function changeTextColor (){
	var textColor = prompt("Elige el color del texto");
	realTimeComment.style.color = textColor;
	}
	// Cambiar el color de fondo del texto
	function chnageBackgroundColor (){
	var backgroundText = prompt("Elige el fondo de tu texto");
	realTimeComment.style.backgroundColor = backgroundText;
	}
	// pintar comentio en publicaciones
	function printComments (){
	var text = getTextPreview();
	var publishComment = text.parentNode.cloneNode(true);
	console.log(text.parentNode);
	commentedPost.insertBefore(publishComment, commentedPost.firstChild);
	area.value = " ";
	text.removeAttribute("style");
	text.innerText = " ";
	// document.getElementById("real-time-image").removeAttribute("src");
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
	<title>libro de visitas</title>
	</head>
	<body>
	<header>
	<h2 align= "center">
	Bienvenida al desarrollo Web
	</h2>
	</header>
	<h3>Comentarios publicados</h3>
	<ul>
	<li>
	<div type ="none" id="comment-posted">
	<div id="new-comments" style="border: 1px color: black"><hr widht="800" align ="left"></div>
	</div>
	</li>
	</ul>
	<form>
	<h3>Comenta</h3>
	<input type="button" value="large" id="big-text" class="size-text">
	<input type="button" value="medium" id="medium-text" class="size-text" >
	<input type="button" value="small" id="small-text" class="size-text">
	<input type="button" value="color de texto" id="text-color">
	<input type="button" value="color de fondo " id="background-color">
	<input type="button" value="left" class="align-text">
	<input type="button" value="center" class="align-text">
	<input type="button" value="right" class="align-text">
	<input type="file" id="select-image">
	<!-- <select name="" id=""></select> -->
	<div>
	<textarea name="Ingresar el comentario" id="text-comment" cols="30" rows="10" placeholder="Escribe aqui tu comentario" value="Comentario"></textarea>
	</div>
	</form>
	<div>
	<h4>
	Como se ve tu comentario
	</h4>
	<div>
	<p name="real-time-comment" id="real-time-comment"></p>
	<img src="" alt="" id="real-time-image">
	</div>
	<hr>
	<input type="submit" value="Enviar" id="send">
	</div>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script> -->
	<script src="js/app.js"></script>
	</body>
	</html>