f1729/reto1.js

## reto1.js
<!--
	*1. Hacer un HTML con 6 botones
	*2. El primer boton va cambiar el color de fondo de la pagina.
	*3. El segundo boton va insertar una imagen en cualquier lugar de la pagina.
	*4. El tercer boton va volver la imagen redonda.
	*5. El cuarto boton va insertar un texto de una frase que te guste.
	*6. El quinto boton va añadir estilos al texto para que se vea mejor.
	*7. El sexto boton va reemplazar el texto por otra frase.
	*8. Añadir funcionalidad al darle click a la imagen que esta aumente su
	tamaño 15% con cada click.
	9. De la frase actual, pintar las palabras que tengan orden impar
	de color blanco y de fondo negro, despues de 20 segundos al darle click a un botón (septimo).
-->
<!DOCTYPE html>
<html>
<head>
	<title>reto1</title>
</head>
<body>
	<h1 align="centre" ">JS1</h1>

		<button type="button" onclick="cambiarFondo()">1.Color Fondo</button>
		<button type="button" onclick="insertarImagen()">2.Insertar Imagen</button>
		<button type="button" onclick="cambiarForma()">3.Imagen Redonda</button>
		<button type="button" onclick="insertarFrase()">4.Insertar Frase</button>
		<button type="button" onclick="insertarEstilo()">5.Dar Estilo</button>
		<button type="button" onclick="reemplazarFrase()">6.Reemplazar Frase</button>
		<button type="button" onclick="tamañoImagen()">7.Zoom 15%</button>
		<button type="button" onclick="setTimeout('pintarFrase()', 5000)">8. Pintar Frase</button>
		<!--//onclick="setTimeout('saludo()',3000);-->
		<button type="button" onclick="limpiar()">9. Limpiar</button>
		<div id="imagen">

		</div>
		<div id="frase">

		</div>

		<script>
			function cambiarFondo() {
				document.body.style.backgroundColor ="Thistle";
			}
			function insertarImagen() {
				imagenUno = document.getElementById("imagen");
				imagenUno.innerHTML = '<img src="Imagenes/im1.jpg" width="150"/>';
			}
			function cambiarForma() {
				imagenDos = document.getElementById("imagen");
				imagenDos.innerHTML = '<img src="Imagenes/im1.jpg" width="150" style="border-radius: 50%" />';
				/*
				var hoja = document.createElement('style') //creando una hoja de estilo css
					hoja.id ='estiloImagen';
					hoja.innerHTML = "#imagen { border-radius: 50px;}";
					document.body.appendChild(hoja);
					*/
			}
			function insertarFrase() {
				var hoja = document.createElement('style') //creando una hoja de estilo css
					//hoja.id ='estiloFrase';
				hoja.innerHTML = "#frase { background-color: white; }";
				document.body.appendChild(hoja);

				fraseUno = document.getElementById("frase");
				fraseUno.innerHTML = "La mayoría de las personas piensan que el diseño es una capa, una simple decoración. Para mí, nada es más importante en el futuro que el diseño. El diseño es el alma de todo lo creado por el hombre. SJ";

			}
			function insertarEstilo() {
				var hoja = document.createElement('style') //creando una hoja de estilo css
				//hoja.id ='estiloFrase';
				hoja.innerHTML = "#frase {background-color: pink; font-size:20px; font-family:sans-serif; }";
				document.body.appendChild(hoja);

			}
			function reemplazarFrase() {
				document.getElementById("frase").innerHTML = "Aprende las reglas como un profesional para poder romperlas como un artista";

			}
			function tamañoImagen() {
				imagenTres = document.getElementById("imagen");
				imagenTres.innerHTML = '<img id="cambIm" src="Imagenes/im1.jpg" style="cursor:pointer" width="40" onclick = "zoom();" />';

					//<img onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=100;this.height=80" src="URL de la imagen" width="100"/>

			}
			function zoom() {
				var tamIm = parseInt(cambIm.getAttribute('width'));

				tamIm = tamIm + 15;
				tamCam = tamIm.toString() + 'px';

				//cambIm.style.width = tamCam ;
				cambIm.setAttribute('width', tamCam);

			}

			function pintarFrase() {
				var frasesDos = [];
				var cadena = document.getElementById("frase").innerHTML; // "frase cool"
				var palabras = cadena.split(" ");

				var palabras_dom = document.createElement('span');

				document.getElementById("frase").innerHTML = '';


				palabras.forEach(function (palabra, i) {
					var palabras_dom = document.createElement('span');
					palabras_dom.innerHTML = palabra + ' ';

					/* JAVASCRIPT PINTAR IMPAR ELEMENTS
					if (i % 2 === 0) {
						palabras_dom.setAttribute('style', 'background-color: black; color: white;')
					}
					*/

					document.getElementById("frase").appendChild(palabras_dom);
				});

				var styles = document.createElement("style");
				// CON CSS
				styles.innerHTML = 'span:nth-child(odd) {background-color: black;color: white;}';

				document.body.appendChild(styles);
				/*
				var long = document.getElementById("frase").innerHTML.length;
				console.log('longitud de frase', long);
				var separador = "";
				console.log(cadena, long);
				// "hola".split("") => ["h", "o", "l", "a"]
				// "hola mundo".split(" ") => ["hola", "mundo"]

				frasesDos = cadena.split(separador);
				for (i= 0; i<long; i++) {
					console.log(i, frasesDos[2*i]);
					frasesDos[2*i].color = "pink";
					// i++;
				}
				cadena = frasesDos.join("");
				*/

				/*
				var variable = [];
				var variable2 = document.getElementById("frase");
				tam = document.getElementById("frase").length;

				variable = variable2.split(""); // conviertes la cadena en un arreglo
				for(i= 0 ;i<tam;i++){
					variable[2*i].color = "pink";

				}
				modificas la letra que esta en el arreglo por su indice (recuerda que por ser arreglo empieza desde cero)
				variable2 = variable.join(""); // vuelves a unir el arreglo en una cadena
*/
			}

			function limpiar(){
				setInterval(function() {
					console.log("INTERVALOOOO");
				}, 1000);

				document.body.style.backgroundColor = "white";
				document.getElementById("frase").innerHTML=' ';
				document.getElementById("imagen").innerHTML=' ';
			}

		</script>
</body>
</html>
	<!--
	*1. Hacer un HTML con 6 botones
	*2. El primer boton va cambiar el color de fondo de la pagina.
	*3. El segundo boton va insertar una imagen en cualquier lugar de la pagina.
	*4. El tercer boton va volver la imagen redonda.
	*5. El cuarto boton va insertar un texto de una frase que te guste.
	*6. El quinto boton va añadir estilos al texto para que se vea mejor.
	*7. El sexto boton va reemplazar el texto por otra frase.
	*8. Añadir funcionalidad al darle click a la imagen que esta aumente su
	tamaño 15% con cada click.
	9. De la frase actual, pintar las palabras que tengan orden impar
	de color blanco y de fondo negro, despues de 20 segundos al darle click a un botón (septimo).
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<title>reto1</title>
	</head>
	<body>
	<h1 align="centre" ">JS1</h1>

	<button type="button" onclick="cambiarFondo()">1.Color Fondo</button>
	<button type="button" onclick="insertarImagen()">2.Insertar Imagen</button>
	<button type="button" onclick="cambiarForma()">3.Imagen Redonda</button>
	<button type="button" onclick="insertarFrase()">4.Insertar Frase</button>
	<button type="button" onclick="insertarEstilo()">5.Dar Estilo</button>
	<button type="button" onclick="reemplazarFrase()">6.Reemplazar Frase</button>
	<button type="button" onclick="tamañoImagen()">7.Zoom 15%</button>
	<button type="button" onclick="setTimeout('pintarFrase()', 5000)">8. Pintar Frase</button>
	<!--//onclick="setTimeout('saludo()',3000);-->
	<button type="button" onclick="limpiar()">9. Limpiar</button>
	<div id="imagen">

	</div>
	<div id="frase">

	</div>

	<script>
	function cambiarFondo() {
	document.body.style.backgroundColor ="Thistle";
	}
	function insertarImagen() {
	imagenUno = document.getElementById("imagen");
	imagenUno.innerHTML = '<img src="Imagenes/im1.jpg" width="150"/>';
	}
	function cambiarForma() {
	imagenDos = document.getElementById("imagen");
	imagenDos.innerHTML = '<img src="Imagenes/im1.jpg" width="150" style="border-radius: 50%" />';
	/*
	var hoja = document.createElement('style') //creando una hoja de estilo css
	hoja.id ='estiloImagen';
	hoja.innerHTML = "#imagen { border-radius: 50px;}";
	document.body.appendChild(hoja);
	*/
	}
	function insertarFrase() {
	var hoja = document.createElement('style') //creando una hoja de estilo css
	//hoja.id ='estiloFrase';
	hoja.innerHTML = "#frase { background-color: white; }";
	document.body.appendChild(hoja);

	fraseUno = document.getElementById("frase");
	fraseUno.innerHTML = "La mayoría de las personas piensan que el diseño es una capa, una simple decoración. Para mí, nada es más importante en el futuro que el diseño. El diseño es el alma de todo lo creado por el hombre. SJ";

	}
	function insertarEstilo() {
	var hoja = document.createElement('style') //creando una hoja de estilo css
	//hoja.id ='estiloFrase';
	hoja.innerHTML = "#frase {background-color: pink; font-size:20px; font-family:sans-serif; }";
	document.body.appendChild(hoja);

	}
	function reemplazarFrase() {
	document.getElementById("frase").innerHTML = "Aprende las reglas como un profesional para poder romperlas como un artista";

	}
	function tamañoImagen() {
	imagenTres = document.getElementById("imagen");
	imagenTres.innerHTML = '<img id="cambIm" src="Imagenes/im1.jpg" style="cursor:pointer" width="40" onclick = "zoom();" />';

	//<img onclick="javascript:this.width=450;this.height=338" ondblclick="javascript:this.width=100;this.height=80" src="URL de la imagen" width="100"/>

	}
	function zoom() {
	var tamIm = parseInt(cambIm.getAttribute('width'));

	tamIm = tamIm + 15;
	tamCam = tamIm.toString() + 'px';

	//cambIm.style.width = tamCam ;
	cambIm.setAttribute('width', tamCam);

	}

	function pintarFrase() {
	var frasesDos = [];
	var cadena = document.getElementById("frase").innerHTML; // "frase cool"
	var palabras = cadena.split(" ");

	var palabras_dom = document.createElement('span');

	document.getElementById("frase").innerHTML = '';


	palabras.forEach(function (palabra, i) {
	var palabras_dom = document.createElement('span');
	palabras_dom.innerHTML = palabra + ' ';

	/* JAVASCRIPT PINTAR IMPAR ELEMENTS
	if (i % 2 === 0) {
	palabras_dom.setAttribute('style', 'background-color: black; color: white;')
	}
	*/

	document.getElementById("frase").appendChild(palabras_dom);
	});

	var styles = document.createElement("style");
	// CON CSS
	styles.innerHTML = 'span:nth-child(odd) {background-color: black;color: white;}';

	document.body.appendChild(styles);
	/*
	var long = document.getElementById("frase").innerHTML.length;
	console.log('longitud de frase', long);
	var separador = "";
	console.log(cadena, long);
	// "hola".split("") => ["h", "o", "l", "a"]
	// "hola mundo".split(" ") => ["hola", "mundo"]

	frasesDos = cadena.split(separador);
	for (i= 0; i<long; i++) {
	console.log(i, frasesDos[2*i]);
	frasesDos[2*i].color = "pink";
	// i++;
	}
	cadena = frasesDos.join("");
	*/

	/*
	var variable = [];
	var variable2 = document.getElementById("frase");
	tam = document.getElementById("frase").length;

	variable = variable2.split(""); // conviertes la cadena en un arreglo
	for(i= 0 ;i<tam;i++){
	variable[2*i].color = "pink";

	}
	modificas la letra que esta en el arreglo por su indice (recuerda que por ser arreglo empieza desde cero)
	variable2 = variable.join(""); // vuelves a unir el arreglo en una cadena
	*/
	}

	function limpiar(){
	setInterval(function() {
	console.log("INTERVALOOOO");
	}, 1000);

	document.body.style.backgroundColor = "white";
	document.getElementById("frase").innerHTML=' ';
	document.getElementById("imagen").innerHTML=' ';
	}

	</script>
	</body>
	</html>