Explicación ejercicio

explicacion.md

Ejercicio 1

Lo que le faltaba al script eran pedir el elemento HTML con el document.getElementById que obtiene un elemento del HTML (explicación), y luego asignarle a la propiedad backgroundColor del estilo de ese elemento el color calculado. (el identificador el elemento es la propiedad id, en este caso cuadrado)

<script>
	function cambiaColor() { //Esta funcion calcula un color al azar y se lo asigna al elemento
		var opciones = '0123456789ABCDEF';
		var color = '#';
		for (var i = 0; i < 6; i++) {
			color += opciones[Math.floor(Math.random() * 16)];
		}
		var elemento = document.getElementById('cuadrado');  // Obtenemos elemento
		elemento.style.backgroundColor = color; // Le asignamos el color al background color del elemento
	}
</script>

Respecto al HTML, lo único que faltaba era llamar a la función que había creado, con un onClick="<nombre función>" (documentación del onClick)

			<div id="cuadrado" onClick="cambiaColor()"></div>

Ejercicio 2

En el HTML he puesto un onChange que se dispara cuando cambia el valor de la casilla (hay que poner el mouse fuera para que se active) y que llame a la función calculaPiesAMetros. Le he puesto a las dos casillas (inputs) un nombre, para poderlas identificar por código.

<p><input id="pies" value="0" onChange="calculaPiesAMetros()"> pies son <input id="metros" value="0"> metros.</p>

<script>
	function calculaPiesAMetros() {
		var pies = document.getElementById('pies').value; // obtén el valor de la casilla pies
		document.getElementById('metros').value = pies * 3.28084; // multiplica por 3.28084 (1 pie en metros) y actualiza el valor de la casilla metros
	}
</script>

Ejercicio 3

Este es posiblemente el más complejo. Primero he puesto dos botones button, que cuando se pulsan onClick llaman respectivamente a la función menos y más. Además he añadido un tamaño por defecto al texto, para que mi código funcione ya que para incrementar el tamaño necesito partir de un valor concreto (yo le he puesto 20px, que significa 20 píxeles, no vale solo un número, ya que hay diferentes unidades de medida: px, rem, em...)

<p id="texto" style="font-size:20px">A computer is a machine that can be instructed to carry out sequences of arithmetic or logical operations 

La función la explico linea a linea, porque hay algunas cosas

<script>
	function menos() {
		var fontSize = document.getElementById('texto').style.fontSize; // Obtenemos el tamaño de fuente del bloque con identificador texto, de saque 20px 
		var valor = fontSize.replace(/px/g, ''); // Reemplazamos el px por nada para quedarnos solo, con el número, de saque 20. Aunque sea un número, realmente es un texto con el valor 1
		valor = parseInt(valor) - 1; // Convertimos el texto 1 a número 1 con parseInt, y le restamos 1 --> se mueve a 19
		document.getElementById('texto').style.fontSize = valor + 'px'; // Ponemos el nuevo valor en el bloque texto, añadiendo el px, para que sea 19px, no 19 (los tamaños de texto siempre hay que decir en que unidad)
	}

        // Exactamente igual que la anterior, pero en vez de restar 1, sumamos 1
	function mas() {
		var fontSize = document.getElementById('texto').style.fontSize;
		var valor = fontSize.replace(/px/g, '');
		valor = parseInt(valor) + 1;
		document.getElementById('texto').style.fontSize = valor + 'px';
	}
</script>