Autor Tema: JavaScript ejemplo querySelectorAll y QuerySelector ejercicio resuelto CU01134E (Leído 1479 veces)

victorchinea · « **en:** 06 de Mayo 2020, 01:55 »

Hola. Adjunto ejercicio JavaScript CU01134E del tutorial básico de desarrollo web para ver si está correcto, o ver formas mejor de hacerlo ya que no lo veo por el foro.

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

Código: [Seleccionar]

<!DOCTYPE html>
<html><head><title>JavaScript - querySelectorAll y QuerySelector CU01134E</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, #marcarTeclaC, #marcarDecimal, #marcarVisor, #limpiarMarcar {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, #marcarTeclaC:hover, #marcarDecimal:hover, #marcarVisor:hover, #limpiarMarcar:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
function marcarOperadores(parametro) {
  var listaNodosOperadores = document.querySelectorAll("#calculadora .teclas span.operador");
  var nodoIgual = document.querySelector (".igual");
  if (parametro == 'marcar') {
    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";}
  else {
    for (var i=0; i<listaNodosOperadores.length; i++) {
      listaNodosOperadores[i].style.backgroundColor = "#FFDAB9";
      listaNodosOperadores[i].style.color = "#888888";
      listaNodosOperadores[i].style.border = "none";}
    nodoIgual.style.backgroundColor = "#F1FF92";
    nodoIgual.style.color = "#888888";
    nodoIgual.style.border = "none";}
}
function marcarNumeros(parametro) {
var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span.numero");
       for (var i=0; i<listaNodosNumeros.length; i++) {
                if (parametro == 'marcar') {
                  listaNodosNumeros[i].style.backgroundColor = "black";
                  listaNodosNumeros[i].style.color = "white";
                  listaNodosNumeros[i].style.border = "solid 1px";}
                else {
                  listaNodosNumeros[i].style.backgroundColor = "white";
                  listaNodosNumeros[i].style.color = "#888888";
                  listaNodosNumeros[i].style.border = "none";}
                }
}
function marcarTeclaC(parametro) {
  var listaNodoTeclaC = document.querySelector(".limpiar");
  if (parametro == 'marcar') {
    listaNodoTeclaC.style.backgroundColor = "red";
    listaNodoTeclaC.style.color = "white";}
  else {
    listaNodoTeclaC.style.backgroundColor = "#FF7C87";
    listaNodoTeclaC.style.color = "#888888";}
}
function marcarDecimal(parametro) {
  var listaNodoDecimal = document.querySelector(".punto");
  if (parametro == 'marcar') {
    listaNodoDecimal.style.backgroundColor = "#9400D3";
    listaNodoDecimal.style.color = "white";}
  else {
    listaNodoDecimal.style.backgroundColor = "white";
    listaNodoDecimal.style.color = "#888888";}
}
function marcarVisor(parametro) {
  var listaNodoVisor = document.querySelector(".pantalla");
  if (parametro == 'marcar') {
    listaNodoVisor.style.backgroundColor = "#00008B";}
  else {
    listaNodoVisor.style.backgroundColor = "rgba(0, 0, 0, 0.2)";}
}

</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')"> Marcar números </div>
<div id="marcaOperadores" onclick="marcarOperadores('marcar')" >Marcar operadores</div>
<div id="marcarTeclaC" onclick="marcarTeclaC('marcar')">Marcar tecla C</div>
<div id="marcarDecimal" onclick="marcarDecimal('marcar')">Marcar decimal</div>
<div id="marcarVisor" onclick="marcarVisor('marcar')">Marcar Visor</div>
<div id="limpiarMarcar" onclick="marcarTeclaC();marcarNumeros();marcarOperadores();marcarDecimal();marcarVisor();">Limpiar Marcar</div>
</div>
</body>
</html>

Gracias, un saludo.

cristiannd · « **Respuesta #1 en:** 10 de Mayo 2020, 15:09 »

Hola victor, funciona perfecto. Una recomendación, solo para que sea de más fácil lectura, sería organizar mejor el código respecto al tabulado según la jerarquía.
Un ejemplo simple sería, donde alert() está dentro de <script> y este dentro de <head>.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        alert();
    </script>
</head>
<body>
</body>
</html>

El único error, que si no recuerdo mal ya viene con el código que copiamos del enunciado, es que la parte de estilos hay un error en la línea 20.

Código: [Seleccionar]

.parteSuperior span.limpiar, { background-color: #FF9FA8; color: #FFFFFF; }

La coma luego de 'span.limpiar' no va.

Citar

Adjunto ejercicio JavaScript CU01134E para ver si está correcto o ver formas mejor de hacerlo ya que no lo veo por el foro.

https://aprenderaprogramar.com/foros/index.php?topic=7559.0

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

Noticias: