Autor Tema: Ejercicios querySelectorAll JavaScript y QuerySelector calculadora HTML CU01134E (Leído 2948 veces)

DRANXZ88 · « **en:** 06 de Abril 2021, 16:28 »

Propuesta de solución al ejercicio CU01134E del tutorial de programación web con lenguaje JavaScript de aprenderaprogramar.

Ejercicios Resueltos

HTML

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
    <link rel="stylesheet" href="css/estilos.css">
</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="marcaC" onclick="marcarTeclaC()"> Marcar Tecla C </div>
        <div id="marcaPunto" onclick="marcarPunto()">Marcar Punto</div>
        <div id="marcaVisor" onclick="marcarVisor()"> Marcar Visor </div>
        <div id="limpiarCalculadora" onclick="limpiarCalculadora()">Volver al original</div>
    </div>
    <script src="js/funciones.js"></script>
</body>

</html>

CSS archivo estilos.css

Código: [Seleccionar]

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,
#marcaVisor,
#limpiarCalculadora {
  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,
#marcaVisor:hover,
#limpiarCalculadora:hover {
  background: rgb(66, 184, 221);
}

Función de ejemplo archivo funciones.js

Código: [Seleccionar]

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;
  }
}
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";
  }
}

Citar

a) Un botón que permita marcar la tecla C con color rojo fuerte y símbolo C en blanco.

Código: [Seleccionar]

function marcarTeclaC() {
  var listaNodosTeclaC = document.querySelectorAll(
    "#calculadora .parteSuperior span.limpiar"
  );
  for (var i = 0; i < listaNodosTeclaC.length; i++) {
    listaNodosTeclaC[i].style.backgroundColor = "#F90A03";
    listaNodosTeclaC[i].style.color = "white";
  }
}

Citar

b) Un botón que permita marcar la tecla con el punto con color violeta fuerte y símbolo . en blanco.

Código: [Seleccionar]

function marcarPunto() {
  var listaNodosPunto = document.querySelectorAll(
    "#calculadora .teclas span.punto"
  );
  for (var i = 0; i < listaNodosPunto.length; i++) {
    listaNodosPunto[i].style.backgroundColor = "#8C0263";
    listaNodosPunto[i].style.color = "white";
  }
}

Citar

c) Un botón que permita marcar la pantalla visor de la calculadora en azul oscuro.

Código: [Seleccionar]

function marcarVisor() {
  var listaNodoPantalla = document.querySelectorAll(
    "#calculadora .parteSuperior div.pantalla"
  );
  for (var i = 0; i < listaNodoPantalla.length; i++) {
    listaNodoPantalla[i].style.backgroundColor = "#05028C";
  }
}

Citar

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

Esta función lo que hace es refrescar la pagina si hay alguna forma mejor de hacer favor comentar.

Código: [Seleccionar]

function limpiarCalculadora() {
  location.reload();
}

Ogramar · « **Respuesta #1 en:** 11 de Octubre 2021, 20:02 »

Buenas, para quien revise este ejercicio está correctamente resuelto y cumple con lo que se pedía. Puede verse una solución alternativa si se quiere comparar en https://aprenderaprogramar.com/foros/index.php?topic=2473.0
Salu2

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

Noticias: