Propuesta de solución para el ejercicio CU01138E del tutorial de programación web con JavaScript de aprenderaprogramar.
Ejercicios resueltos
HTML
<!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="principal">
<div id="caja1" class="caja">?</div>
<div id="caja2" class="caja">?</div>
<div id="caja3" class="caja">?</div>
<div id="caja4" class="caja">?</div>
</div>
<button onclick="mostrarPalabra();" id="btn-procesar">Avanzar</button>
<script src="js/funciones.js"></script>
</body>
<script>
</script>
</html>
CSS archivos estilos.css
body {
font-family: sans-serif;
text-align: center;
}
#principal {
width: 500px;
height: 500px;
border: solid black 1px;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.caja {
width: 248px;
height: 248px;
border: solid black 0.5px;
flex: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
}
.caja-creado {
width: 248px;
height: 248px;
border: solid black 0.5px;
flex: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
#btn-procesar {
background-color: cornflowerblue;
color: white;
font-weight: bolder;
width: 120px;
height: 50px;
border-radius: 10%;
cursor: pointer;
border-bottom: none;
margin-top: 10px;
}
JavaScript archivo funciones.js
var contador = 0;
function mostrarPalabra() {
contador++;
var mostar = document.getElementsByClassName("caja");
if (contador == 1) {
mostar[0].innerHTML = '<div class="caja-creado"; style="background-color: black; color: white;">El</div>';
} else if (contador == 2) {
mostar[1].innerHTML = '<div class="caja-creado";>poder</div>';
} else if (contador == 3) {
mostar[2].innerHTML = '<div class="caja-creado";>de</div>';
} else if (contador == 4) {
mostar[3].innerHTML = '<div class="caja-creado"; style="background-color: yellow;">JavaScript</div>';
} else {
alert("No es posible avanzar más");
}
}
Tema: Ejercicio resuelto JavaScipt innerHTML CSS display flex efecto dinámico CU01138E (Leído 1848 veces)
RSS -
WAP2