Autor Tema: Ejercicios resueltos JavaScript Acceder a nodos DOM por selectores CSS CU01134E  (Leído 1040 veces)

cristiannd

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 24
    • Ver Perfil
Solución propuesta para el ejercicio CU01134E del curso pdf de programación JavaScript para desarrollos web.

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>Ejercicio 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, #teclaC, #teclaPunto, #cambiarPantalla, #restablecer{
                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, #teclaC:hover, #teclaPunto:hover, #cambiarPantalla:hover, #restablecer: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 teclaC(){
                var teclaC = document.querySelector('#calculadora .parteSuperior span.limpiar');
                teclaC.style.backgroundColor = "red";
                teclaC.style.color = "white";
            }

            function teclaPunto(){
                var teclaPunto = document.querySelector('#calculadora .teclas span.punto');
                teclaPunto.style.backgroundColor = "violet";
                teclaPunto.style.color = "white";
            }

            function cambiarPantalla(){
                var cambiarPantalla = document.querySelector('#calculadora .parteSuperior div.pantalla');
                cambiarPantalla.style.backgroundColor = "blue";
            }

            function restablecer(){
                var cambiarPantalla = document.querySelector('#calculadora .parteSuperior div.pantalla');
                cambiarPantalla.style.backgroundColor = "rgba(0, 0, 0, 0.2)";

                var teclaPunto = document.querySelector('#calculadora .teclas span.punto');
                teclaPunto.style.backgroundColor = "#FFFFFF";
                teclaPunto.style.color = "#888888";
               
                var teclaC = document.querySelector('#calculadora .parteSuperior span.limpiar');
                teclaC.style.backgroundColor = "#FF9FA8";
                teclaC.style.color = "#FFFFFF";
           
                var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span.numero");
                    for (var i=0; i<listaNodosNumeros.length; i++) {
                        listaNodosNumeros[i].style.backgroundColor = "#FFFFFF";
                        listaNodosNumeros[i].style.color = "#888888";
                        listaNodosNumeros[i].style.border = "0px";
                    }

                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 = "#FFDAB9";
                        listaNodosOperadores[i].style.color = "#888888";
                        listaNodosOperadores[i].style.border = "0px";
                    }
                nodoIgual.style.backgroundColor = "#F1FF92";
                nodoIgual.style.color = "#888888";
                nodoIgual.style.border = "0px";
            }
        </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="teclaC" onclick="teclaC()">Tecla "C"</div>
            <div id="teclaPunto" onclick="teclaPunto()">Tecla "punto"</div>
            <div id="cambiarPantalla" onclick="cambiarPantalla()">Cambiar pantalla</div>
            <div id="restablecer" onclick="restablecer()">Restablecer</div>
        </div>
    </body>
</html>
« Última modificación: 25 de Septiembre 2020, 13:25 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2640
    • Ver Perfil
Buenas, el ejercicio está bien resuelto y cumple con lo que se pedía. En este caso se trataba de practicar con querySelectorAll y QuerySelector y la calculadora no realiza operaciones. Para quien tenga interés en ver el mismo ejercicio con la calculadora operativa y con capacidad para realizar operaciones puede consultar este hilo: https://aprenderaprogramar.com/foros/index.php?topic=2473.0 Salu2

 

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