Autor Tema: Ejemplo calculadora JavaScript Ejercicio querySelectorAll diseño CSS CU01134E# (Leído 5119 veces)

Cabanota · « **en:** 28 de Abril 2015, 04:49 »

Hola gente. Aquí traje una posible solución al ejercicio CU01134E del curso JavaScript desde cero de aprenderaprogramar, que dice:

Citar

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).

el apartado d) fue el que me ha dado mas lata porque sinceramente la forma como lo realice no me hace sentir satisfecho.. Me gustaría saber si hay alguna manera mas sencilla, rápida y corta de hacer un reseteo a todos los nodos sin necesidad de hacerlo nodo por nodo y que quede tal cual como es la pag en realidad.. sinceramente me gustaria que me dieran oopciones para inganar e informarme. De ante mano, muchas gracias. Aqui dejo el codigo.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<title></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;
			margin: 0 auto;
			padding: 20px 20px 9px;
			width: 286px;	
		 	border-radius: 3px;
		 	/*height: auto;*/
		}
		.parteSuperior, .teclas{
			overflow: hidden;
		}
		div.parteSuperior div.pantalla{
			background-color: rgba(0, 0, 0, 0.2);
			color: #FFF;
			float: right;
			width: 180px;
			height: 40px;
			font-size: 17px;
			border-radius: 3px;
			padding: 0 10px; 
			text-align: right;
			letter-spacing: 1px;/*espaciado entre caractere*/
			line-height: 40px; 
		}
		.parteSuperior span.limpiar, .teclas span, #modificado span{
			background-color: #FFFFFF;
			color: #888888;
			cursor: pointer;
			float: left;
			border-radius: 3px;
			height: 36px;
			width: 66px;
			margin: 0 7px 11px 0;
			line-height: 36px; 
			text-align: center;
			transition: all 0.4s ease 0s;
		}
		.parteSuperior span.limpiar{
			background-color: #FF7C87;
		}
		.teclas span.operador/*, #modificado span#reset*/{
			margin-right: 0;
			background-color: #FFDAB9;
		}
		.teclas span.igual{
			background-color: #F1FF92;
			color:  #888E5F;
		}
		.parteSuperior span.limpiar:hover, .teclas span:hover, #modificado span:hover{
			background-color: #9C89F6;
			color: #FFFFFF;
		}  
		header{
			-webkit-box-sizing: border-box;
		     -moz-box-sizing: border-box;
		          box-sizing: border-box;
			width: 326px;
			margin: 0 auto;
			border-radius: 3px; 
		}
		header h2, header h3{
			margin: 0;
			padding: 5px;
		}
		header h3{
			background-color: #E59DEA;
		}
		header h2{
			background-color: #FFBBF6;
		}
		.teclas span#probandoAndo{
			width: 100%;
		}
		#contenedor div#marcaNumeros, #contenedor div#marcaOperadores{
			transition: all 0.4s ease 0s;
			width: 140px;
			display: inline-block;
			height: 36px;
			border-radius: 3px;
			line-height: 36px;
			margin: 0px;
			background: rgb(202, 60, 60);
			cursor: pointer;	
			color: white;
		}
		#contenedor div#marcaNumeros{
			margin-left: -2px;
		}
		#contenedor div#marcaNumeros:hover, #contenedor div#marcaOperadores:hover{
			background: rgb(66, 184, 221)
		}
		#modificado{
			padding: 0 0 0 5px;
			height: 46px;
			background-color: white;
			border-radius: 3px;
			border: none;
		}
		#modificado span{
			margin: 5px 4px 11px 0;
			background: rgb(202, 60, 60);
			color: white;
		}
	</style>
	<script type="text/javascript">
		var listaNodoPantalla, listaNodoNumero, listaNumeroOperador;
		function pulsada(tecla) {
			listaNodoPantalla = document.getElementsByClassName("pantalla");
			var nodoTextoPantalla = listaNodoPantalla[0].childNodes[0];//Segunda opcion: listaNodoPantalla[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;
			}
		}
		// dos manera de editar el css de nuestra pag web.
		//por medio de la funcion: querySelectorAll() o getElementsByClassName();
		function marcaDeNumeros(){
			listaNodoNumero = document.getElementsByClassName("numero");

			for (var i = 0; i < listaNodoNumero.length; i++) {
				listaNodoNumero[i].style.backgroundColor = "black";
				listaNodoNumero[i].style.color = "white";
			};
		}
		function marcaDeOperadores() {
			listaNumeroOperador = document.querySelectorAll("#calculadora .teclas span.operador, #calculadora .teclas span.igual");
			for (var i = 0; i < listaNumeroOperador.length; i++) {
				listaNumeroOperador[i].style.backgroundColor = "yellow";
				listaNumeroOperador[i].style.color = "red";
			}	
		}
		function modificacion (valor) {
			var valorStyle;
			if (valor == "la_C") {
				valorStyle = document.querySelectorAll("#calculadora span.limpiar");
				valorStyle[0].style.backgroundColor = "red";
				valorStyle[0].style.color = "white";
			}else if(valor == "punto"){
				valorStyle = document.querySelectorAll(".teclas span.punto");
				valorStyle[0].style.backgroundColor = "#8B008B";
				valorStyle[0].style.color = "white";
			}else if(valor == "pant"){
				valorStyle = document.querySelectorAll("#calculadora div.pantalla");
				valorStyle[0].style.backgroundColor = "#00008B";
			}
		}

		function resetGeneral () {

			var numeroStyle = document.querySelectorAll("#calculadora .teclas span.numero, #calculadora .teclas span.punto");
			for (var i = 0; i < numeroStyle.length; i++) {
				numeroStyle[i].style.backgroundColor = "#FFFFFF";
				numeroStyle[i].style.color = "#888888";
			};
			var operadoresStyle = document.querySelectorAll("#calculadora .teclas span.operador");
			for (var i = 0; i < operadoresStyle.length; i++) {
				operadoresStyle[i].style.backgroundColor = "#FFDAB9"; 
				operadoresStyle[i].style.color = "#888888";	
			};
			var pantallaStyle = document.querySelectorAll("#calculadora .parteSuperior div.pantalla");
			pantallaStyle[0].style.backgroundColor = "rgba(0, 0, 0, 0.2)";	
			var limpiarStyle = document.querySelectorAll("#calculadora .teclas span.igual");
			limpiarStyle[0].style.backgroundColor = "#F1FF92";
			limpiarStyle[0].style.color = "#888888";
			var limpiarStyle = document.querySelectorAll("#calculadora .parteSuperior span.limpiar");
			limpiarStyle[0].style.backgroundColor = "#FF7C87";
			limpiarStyle[0].style.color = "#888888";
		}
	</script>
</head>
<body>
	<header id="cabecera">
		<h2>Cursos aprenderaprogramar.com</h2>
		<h3>Ejemplo calculadora JavaScript</h3>
	</header>
	<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 id="modificado">
        	<span onclick="modificacion('la_C')">La C</span>
        	<span onclick="modificacion('punto')">punto</span>	
        	<span onclick="modificacion('pant')">Pant</span>
        	<span onclick="resetGeneral()">Reset</span>
        </div>
         <div id="contenedor">
        	<div id="marcaNumeros" onclick="marcaDeNumeros()"> Marca numeros</div>
        	<div id="marcaOperadores" onclick="marcaDeOperadores()">Marca operadores</div>	
        </div>
        
</div>
</body>
</html>

César Krall · « **Respuesta #1 en:** 28 de Abril 2015, 23:55 »

Hola Cabanota!! El ejercicio está perfectamente resuelto, manejando los conceptos que se han ido explicando en el curso. El reseteo puedes hacerlo de forma más rápida de otras maneras, en una sola línea simplemente recargando la página, pero esto se explica en la entrega CU01171E del curso y no recomendamos mezclar contenidos sino ir progresivamente. Otra opción puede ser guardar el nodo matriz del dom y recargarlo (esto creo que sí podrías intentarlo con lo que se ha explicado en el curso hasta ahora aunque no estoy seguro)... En fin, distinas opciones que a medida que vayas avanzando podrás ir aplicando. Saludos!!

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

Noticias: