Autor Tema: Ejemplo calculadora JavaScript querySelectorAll QuerySelector Ejercicio CU01134E (Leído 3013 veces)

pedro,, · « **en:** 08 de Octubre 2015, 23:26 »

Hola aquí dejo otro ejercicio.

Citar

EJERCICIO
1) Modifica el código del ejemplo de la calculadora JavaScript para que además de tener dos botones que permitan marcar números y operadores con distintos colores tenga:
a) Un botón que permita marcar la tecla C con color rojo fuerte y símbolo C en blanco.
b) Un botón que permita marcar la tecla con el punto con color violeta fuerte y símbolo . en blanco.
c) Un botón que permita marcar la pantalla visor de la calculadora en azul oscuro.
d) Un botón que permita limpiar todo lo que se haya marcado y volver a la situación original (es decir, que la calculadora se vea tal y como se veía inicialmente).

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
		<style type="text/css">
			body {font-family: sans-serif; text-align:center;}
			#calculadora {    font: bold 14px Arial,sans-serif; background-color: #9DD2EA;
				border-radius: 3px; height: auto; margin: 0 auto;  padding: 20px 20px 9px; width: 295px;}
			.parteSuperior .pantalla {
				background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; color: #FFFFFF; float: right; font-size: 17px;
				height: 40px; letter-spacing: 1px; line-height: 40px; padding: 0 10px; text-align: right; width: 180px;}
			.teclas, .parteSuperior {overflow: hidden; }
			.teclas span, .parteSuperior span.limpiar {     background-color: #FFFFFF; border-radius: 3px; color: #888888;
				 cursor: pointer; float: left; height: 36px; line-height: 36px; margin: 0 7px 11px 0;
				 text-align: center; transition: all 0.4s ease 0s; width: 66px;}
			.parteSuperior span.limpiar { background-color:#FF7C87;}
			.teclas span.operador { background-color: #FFDAB9; margin-right: 0; }
			.teclas span.igual { background-color: #F1FF92; color: #888E5F;}
			.parteSuperior span.limpiar, { background-color: #FF9FA8; color: #FFFFFF; }
			.teclas span:hover, .teclas span.igual:hover, .parteSuperior span.limpiar:hover { background-color: #9C89F6;
			color: #FFFFFF; }
			#contenedor {width:285px;margin: 40px auto; overflow:hidden;}
			#marcaNumeros, #marcaOperadores, #marcaC, #marcaPunto, #marcaReinicio, #marcaVisor{padding:15px; width: 90px; display: inline-block;
				margin: 10px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
			#marcaNumeros:hover, #marcaOperadores:hover, #marcaC:hover, #marcaPunto:hover, #marcaReinicio:hover, #marcaVisor:hover {background: rgb(66, 184, 221);}
		</style>
		 
		<script type="text/javascript">				 
			function marcarOperadores() {
				var listaNodosOperadores = document.querySelectorAll('#calculadora .teclas span.operador');
				var nodoIgual = document.querySelector ('.igual');
					   for (var i=0; i<listaNodosOperadores.length; i++) {
								listaNodosOperadores[i].style.backgroundColor = 'yellow';
								listaNodosOperadores[i].style.color = 'black';
								listaNodosOperadores[i].style.border = 'solid 1px';
								}
								nodoIgual.style.backgroundColor = 'yellow';
								nodoIgual.style.color = 'black';
								nodoIgual.style.border = 'solid 1px';
			}			 
			function marcarNumeros() {
				var listaNodosNumeros = document.querySelectorAll('#calculadora .teclas span.numero');
					   for (var i=0; i<listaNodosNumeros.length; i++) {
								listaNodosNumeros[i].style.backgroundColor = 'black';
								listaNodosNumeros[i].style.color = 'white';
								listaNodosNumeros[i].style.border = 'solid 1px';
								}
			}
			function marcarC(){
				var nodoLimpiar = document.querySelector ('.limpiar');
				nodoLimpiar.style.backgroundColor = 'red';
				nodoLimpiar.style.color = 'white';
			}
			function marcarPunto(){
				var nodoPunto = document.querySelector('.punto');
				nodoPunto.style.backgroundColor = 'violet';
				nodoPunto.style.color = 'white';
			}
			function marcarVisor(){
				var nodoPantalla = document.querySelector('.pantalla');
				nodoPantalla.style.backgroundColor = 'blue';
			}
			function reiniciarColores(){
				var nodoLimpiar = document.querySelector ('.limpiar');
				nodoLimpiar.style.backgroundColor = '#FF7C87';
				nodoLimpiar.style.color = '#888888';
				var nodoPunto = document.querySelector('.punto');
				nodoPunto.style.backgroundColor = '#FFFFFF';
				nodoPunto.style.color = '#888888';
				var nodoPantalla = document.querySelector('.pantalla');
				nodoPantalla.style.backgroundColor = 'rgba(0, 0, 0, 0.2)';
				var listaNodosNumeros = document.querySelectorAll('#calculadora .teclas span.numero');
					   for (var i=0; i<listaNodosNumeros.length; i++) {
								listaNodosNumeros[i].style.backgroundColor = '#FFFFFF';
								listaNodosNumeros[i].style.color = '#888888';
								listaNodosNumeros[i].style.border = 'none';
						}
				var listaNodosOperadores = document.querySelectorAll('#calculadora .teclas span.operador');
					   for (var i=0; i<listaNodosOperadores.length; i++) {
								listaNodosOperadores[i].style.backgroundColor = '#FFDAB9';
								listaNodosOperadores[i].style.color = '#888888';
								listaNodosOperadores[i].style.border = 'none';
								}
				var nodoIgual = document.querySelector ('.igual');
						nodoIgual.style.backgroundColor = '#F1FF92';
						nodoIgual.style.color = '#888888';
						nodoIgual.style.border = 'none';
			}
			function pulsada(tecla) {
				var listaNodosPantalla = document.getElementsByClassName('pantalla');
				var nodoTextoPantalla = listaNodosPantalla[0].firstChild;
				switch(tecla) {
						case 'C':
							nodoTextoPantalla.nodeValue = ' ';
							break;
						case '=':
							var resultado = eval(nodoTextoPantalla.nodeValue);
							nodoTextoPantalla.nodeValue = resultado;
							break;
						default:
							nodoTextoPantalla.nodeValue = nodoTextoPantalla.nodeValue + tecla;
							break;
				}	
			}
		</script>
	</head>
	<body>
		<div id="cabecera">
			<h2>Cursos aprenderaprogramar.com</h2>
			<h3>Calculadora JavaScript</h3>
		</div>
		<!-- Calculadora -->
		<div id="calculadora">
			<!-- pantalla y tecla limpiar -->
			<div class="parteSuperior">
			   <span class="limpiar" onclick="pulsada('C')">C</span>
			   <div class="pantalla"> </div> <!--Ojo tenemos un espacio para que exista nodeValue-->
			</div>
		   
			<div class="teclas">
						   <!-- operadores y otras teclas -->
						   <span class = "numero" onclick="pulsada('7')">7</span>
						   <span class = "numero" onclick="pulsada('8')">8</span>
						   <span class = "numero" onclick="pulsada('9')">9</span>
						   <span class="operador" onclick="pulsada('+')">+</span>
						   <span class = "numero" onclick="pulsada('4')">4</span>
						   <span class = "numero" onclick="pulsada('5')">5</span>
						   <span class = "numero" onclick="pulsada('6')">6</span>
						   <span class="operador" onclick="pulsada('-')">-</span>
						   <span class = "numero" onclick="pulsada('1')">1</span>
						   <span class = "numero" onclick="pulsada('2')">2</span>
						   <span class = "numero" onclick="pulsada('3')">3</span>
						   <span class="operador" onclick="pulsada('/')">÷</span>
						   <span class = "numero" onclick="pulsada('0')">0</span>
						   <span class ="punto" onclick="pulsada('.')">.</span>
						   <span class="igual" onclick="pulsada('=')">=</span>
						   <span class="operador" onclick="pulsada('*')">x</span>
			</div>
		</div>
		<div id="contenedor">
			<div id ="marcaNumeros" onclick="marcarNumeros()"> Marcar números </div>
			<div id="marcaOperadores" onclick="marcarOperadores()" >Marcar operadores</div>
			<div id="marcaC" onclick="marcarC()" >Marcar C</div>
			<div id="marcaPunto" onclick="marcarPunto()" >Marcar punto</div>
			<div id="marcaVisor" onclick="marcarVisor()" >Marcar visor</div>
			<div id="marcaReinicio" onclick="reiniciarColores()" >Reiniciar colores</div>
		</div>
	</body>
</html>

En el punto d no se me ocurrió otra forma de reiniciar los colores. Bueno, si se me ocurrió, pero son formas que todavía no se han estudiado en el curso.

Saludos.

César Krall · « **Respuesta #1 en:** 10 de Octubre 2015, 16:36 »

Hola Pedro!

Has indicado que hay otras formas de hacerlo, pero tal y como lo has hecho está muy bien conforme a la progresión que se debe llevar sin introducir cosas más avanzadas que no se hayan visto.

Una curiosidad que resulta interesante que acabo de probar es que podemos sustutuir varias líneas de asignación de estilos por una sola línea, con lo que nos ahorramos repetir líneas muy parecidas.

Me refiero a esto, inicialmente:

Código: [Seleccionar]

listaNodosOperadores[i].style.backgroundColor = 'yellow';
listaNodosOperadores[i].style.color = 'black';
listaNodosOperadores[i].style.border = 'solid 1px';

Lo podemos sustituir por:

Código: [Seleccionar]

listaNodosOperadores[i].style = 'background-color:yellow; color:black; border: solid 1px;';

Hay que tener cuidado porque con esto sustituimos todo el estilo, mientras que yendo propiedad a propiedad sólo modificamos aquello que se indica, pero nos puede ser útil en muchas ocasiones

Saludos!

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: