Autor Tema: Diseñar calculadora interactiva con JavaScript cambiando CSS dinámico CU01134E (Leído 2460 veces)

paramonso · « **en:** 19 de Octubre 2017, 12:16 »

Hola. Dejo la solucion al ejercicio CU01134E del curso de programación web con lenguaje JavaScript.

<!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;  box-shadow:2px 2px 2px 2px white;
	color:white;}
 
#contenedor {width:585px;margin: 40px auto; overflow:hidden;}

#marcaNumeros, #marcaOperadores, #marcarC, #marcarPunto, #marcarVisor, #Reset {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, #marcarC:hover, #marcarPunto:hover,
#marcarVisor:hover, #Reset:hover{background: rgb(66, 184, 221);}
#calculadora,  span{box-shadow:2px 2px 2px 2px black;color:black;}
</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";
                }
                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 listaNodosC = document.querySelector(".limpiar");
                listaNodosC.style.backgroundColor = "red";
                listaNodosC.style.color = "white";
                listaNodosC.style.border = "solid 1px";
                
}

function marcarPunto() {
var listaNodosPunto = document.querySelector(".punto");
                listaNodosPunto.style.backgroundColor = "MediumVioletRed";
                listaNodosPunto.style.color = "white";
                listaNodosPunto.style.border = "solid 1px";
                 
}

function marcarVisor() {
var listaNodosVisor = document.querySelector(".pantalla");
                listaNodosVisor.style.backgroundColor = "navy";
                listaNodosVisor.style.color = "white";
                listaNodosVisor.style.border = "solid 1px";
                
             } 
function Reset()
{
	var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span");
        for (var i=0; i<listaNodosNumeros.length; i++)
        {
		   var p=i; 
		   if(p%4==3){listaNodosNumeros[i].style.backgroundColor = "#FFDAB9";}
			else if(i==14){listaNodosNumeros[i].style.backgroundColor = "#F1FF92";}
		    else{listaNodosNumeros[i].style.backgroundColor = "#FFFFFF";}
				listaNodosNumeros[i].style.color = "#888888";
        }
        var listaNodosVisor = document.querySelector(".pantalla");
                listaNodosVisor.style.backgroundColor = "rgba(0, 0, 0, 0.2)";
        var listaNodosC = document.querySelector(".limpiar");
                listaNodosC.style.backgroundColor = "#FF7C87";
                listaNodosC.style.color = "#888888";
                     
}
</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="marcarC" onclick="marcarC()"> Marcar tecla C </div>
<div id="marcarPunto" onclick="marcarPunto()" >Marcar punto</div>
<div id="marcarVisor" onclick="marcarVisor()"> Marcarvisor </div>
<div id="Reset" onclick="Reset()" >Reset</div>
</div>
</body>
</html>

Ogramar · « **Respuesta #1 en:** 26 de Enero 2018, 20:08 »

Buenas paramonso por favor, a la hora de poner título a los temas seguir las indicaciones que están en https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0

Ejercicio bien resuelto

Salu2

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

Noticias:

Autor Tema: Diseñar calculadora interactiva con JavaScript cambiando CSS dinámico CU01134E (Leído 2460 veces)

paramonso

Diseñar calculadora interactiva con JavaScript cambiando CSS dinámico CU01134E

Ogramar

Re:Solución al Ejercicio CU01134E

Preguntas y respuestas

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

Noticias:

Autor Tema: Diseñar calculadora interactiva con JavaScript cambiando CSS dinámico CU01134E (Leído 2460 veces)

paramonso

Diseñar calculadora interactiva con JavaScript cambiando CSS dinámico CU01134E

Ogramar

Re:Solución al Ejercicio CU01134E

Preguntas y respuestas

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