Aqui dejo una posible solucion para el ejercicio (CU01134E) de JavaScript. Funciona y cumple con lo pedido aunque personalmente creo que se puede mejorar.
Son los puntos c y d. En el punto c, hice que al volver a hacer click en el boton vuelve a su estilo original.
EJERCICIO
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:
....
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).
pd.: Me gustaria saber como puedo hacer mas corto el codigo. en especial para la funcion de resetear, volver al estado original ya que trate de encadenar las clases css en el querySelector y en el QuerySelectorAll pero no me lo reconocio.
<!DOCTYPE html>
<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, #marcaOperadorC, #marcaPunto, #marcaPantalla, #resetearStyles {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, #marcaOperadorC:hover, #marcaPunto:hover, #marcaPantalla:hover, #resetearStyles: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 marcarOperadorC() {
var listaNodosExtra = document.querySelector("span.limpiar");
listaNodosExtra.style.backgroundColor = 'red';
listaNodosExtra.style.color='white';
}
function marcaPunto() {
var listaNodoPunto = document.querySelector(".punto");
listaNodoPunto.style.backgroundColor = 'purple';
listaNodoPunto.style.color = 'white';
}
function marcaPantalla() {
var nodoPantalla = document.querySelector(".pantalla");
if (nodoPantalla.style.background !== 'blue' ) {
nodoPantalla.style.background = 'blue'
} else {
nodoPantalla.style.background = ''
}
;
}
function resetearStyles() {
var nodoEstilosNuevos0 = document.querySelector(".igual");
var nodoEstilosNuevos1 = document.querySelector(".punto");
var nodoEstilosNuevos2 = document.querySelector(".pantalla");
var nodoEstilosNuevos3 = document.querySelector("span.limpiar");
var nodoEstilosNuevos4 = document.querySelectorAll(".operador, .numero");
nodoEstilosNuevos1.style = '';
nodoEstilosNuevos2.style = '';
nodoEstilosNuevos3.style = '';
for (i=0; i<=nodoEstilosNuevos4.length; i++) {
nodoEstilosNuevos4[i].style = '';
nodoEstilosNuevos0.style = '';
}
}
/*
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).
*/
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo 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="marcaOperadorC" onclick="marcarOperadorC()" >Marcar operador C</div>
<div id="marcaPunto" onclick="marcaPunto()" >Marcar Punto</div>
<div id="marcaPantalla" onclick="marcaPantalla()" >Marcar Pantalla</div>
<div id="resetearStyles" onclick="resetearStyles()" >Resetear</div>
</div>
</body>
</html>
Tema: QuerySelector. Acceder a elementos por selectores CSS con JavaScript CU01134E (Leído 1948 veces)
RSS -
WAP2