Autor Tema: Ejercicios querySelectorAll JavaScript y QuerySelector (CU01134E)  (Leído 60 veces)

DRANXZ88

  • Avanzado
  • ****
  • Mensajes: 354
    • Ver Perfil
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();
}

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".