Autor Tema: Ejercicios resueltos JavaScript Acceder a elementos por selectores CSS CU01134E  (Leído 842 veces)

juandeto

  • Sin experiencia
  • *
  • Mensajes: 11
    • Ver Perfil
Ejercicio CU01134E del certificado formativo en JavaScript desde cero de aprenderaprogramar resuelto:

Código: [Seleccionar]
<!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 {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 {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 marcarC(){
var nodoC= document.querySelector(".limpiar");
nodoC.style.backgroundColor="rgb(202, 60, 60)";
nodoC.style.color="white";
}

function marcarPunto(){
var nodoPunto= document.querySelector(".punto");
nodoPunto.style.backgroundColor="#65089B";
nodoPunto.style.color="white";
}
function marcarPantalla(){
var nodoPantalla= document.querySelector(".pantalla");
nodoPantalla.style.backgroundColor="#0531B3";
nodoPantalla.style.color="white";
}
function limpiar(){
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 = "none";
                }
                nodoIgual.style.backgroundColor = "yellow";
                nodoIgual.style.color = "#888888";
                nodoIgual.style.border = "none";
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 = "none";
                }
var nodoC= document.querySelector(".limpiar");
nodoC.style.backgroundColor="#FFFFFF";
nodoC.style.color="#888888";
var nodoPunto= document.querySelector(".punto");
nodoPunto.style.backgroundColor="#FFFFFF";
nodoPunto.style.color="#888888";
var nodoPantalla= document.querySelector(".pantalla");
nodoPantalla.style.backgroundColor="rgba(0, 0, 0, 0.2)";
nodoPantalla.style.color="white";
}
</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 ="marcaNumeros" onclick="marcarC()"> Marcar C </div>
<div id ="marcaNumeros" onclick="marcarPunto()"> Marcar punto </div>
<div id ="marcaNumeros" onclick="marcarPantalla()"> Marcar pantalla </div>
<div id ="marcaNumeros" onclick="limpiar()"> Limpiar estilos </div>
</div>
</body>
</html>
« Última modificación: 13 de Septiembre 2020, 18:44 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2640
    • Ver Perfil
Buenas, para quien revise este ejercicio, cumple perfectamente con lo que se pedía. 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".