Propuesta de solución al ejercicio CU01134E del tutorial de programación web con lenguaje JavaScript de aprenderaprogramar.
Ejercicios ResueltosHTML<!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.cssbody {
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.jsfunction 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";
}
}a) Un botón que permita marcar la tecla C con color rojo fuerte y símbolo C en blanco.
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";
}
}b) Un botón que permita marcar la tecla con el punto con color violeta fuerte y símbolo . en blanco.
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";
}
}c) Un botón que permita marcar la pantalla visor de la calculadora en azul oscuro.
function marcarVisor() {
var listaNodoPantalla = document.querySelectorAll(
"#calculadora .parteSuperior div.pantalla"
);
for (var i = 0; i < listaNodoPantalla.length; i++) {
listaNodoPantalla[i].style.backgroundColor = "#05028C";
}
}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.
function limpiarCalculadora() {
location.reload();
}
Tema: Ejercicios querySelectorAll JavaScript y QuerySelector calculadora HTML CU01134E (Leído 1967 veces)
RSS -
WAP2