Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: krakerbrain en 24 de Marzo 2021, 01:14
-
Estimados amigos, pude hacer este ejercicio, pero quedé con una duda.
Al cambiar el Style del div "cuadro1" tuve que usar display:flex, porque si no lo ponía solo se cambiaba el background del texto. Supongo que lo mismo ocurriria en "cuadro4" Vi otro ejercicio resuelto e intenté emular lo que hizo otro compañero pero no logré modificar mi resultado. Del resto creo que resolví bien el ejercicio. Ojalá puedan ayudarme
Saludos
<!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>Ejercio Inner Curso Javascript (CU01138E)</title>
<style type="text/css">
body {
font-family: sans-serif;
text-align:center;
}
.container{
width: 500px;
height: 500px;
border: solid black 1px;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.cuadro{
width: 248px;
height: 248px;
border: solid black 0.5px;
flex: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
}
#boton{
background-color: brown;
border-radius: 40px;
font-size: 25px;
padding: 10px;
margin: 30px;
width: 150px;
color: #ffffff;
outline: none;
}
</style>
<script type="text/javascript">
var contador = 0;
function avanzar() {
if (contador==0){
document.getElementById("cuadro1").innerHTML = '<div style=\' width:100%; height: 100%; background-color:#000000 ; color: #ffffff; display: flex; align-items: center; justify-content:center\'>El</div>';
contador=1;
}else if(contador==1){
document.getElementById("cuadro2").innerHTML = "poder";
contador=2;
}else if(contador==2){
document.getElementById("cuadro3").innerHTML = "de";
contador=3;
}else if(contador==3){
document.getElementById("cuadro4").innerHTML = '<div style=\' width:100%; height: 100%; background-color:#ffff00 ; display: flex; align-items: center; justify-content:center\'>Javascript</div>';
contador=4
}else if(contador==4){
alert("No se puede avanzar más")
}
}
</script>
</head>
<body>
<div class="container">
<div id="cuadro1" class="cuadro">?</div>
<div id="cuadro2" class="cuadro">?</div>
<div id="cuadro3" class="cuadro">?</div>
<div id="cuadro4" class="cuadro">?</div>
</div>
<button id="boton" class="btnAvanzar" onclick='avanzar()'>Avanzar</button>
</body>
</html>
-
Buenas, para quien revise este ejercicio, está bien resuelto. Respecto al uso de display:flex; este no es imprescindible. Esto no es demasiado trascendente para este ejercicio, donde lo que interesa más es el código JavaScript (más que los detalles sobre CSS). Pueden verse otros ejercicios donde se resuelve sin flex, por ejemplo:
https://aprenderaprogramar.com/foros/index.php?topic=3864.0 en este hilo hay algunos comentarios interesantes.
https://aprenderaprogramar.com/foros/index.php?topic=3914.0 es otra propuesta de solución
Salu2