Modificando mi programa de JavaScript
En esta actividad retomamos el programa que ya habíamos hecho con javaScript donde habíamos hecho una página web dinámica que podíamos interactuar con ella. En esta actividad modificamos algunos parámetros para hacer que nuestra página luzca diferente. También le modificamos su comportamiento que en vez de agregar un jugador, agrega una mascota.
En mi caso, modifique el color, el texto , los bordes y la sombra de la caja de texto que contenía el nombre de nuestra mascota.El código quedaba de la siguiente manera:
>
Este fue el resultado de la página:
En mi caso, modifique el color, el texto , los bordes y la sombra de la caja de texto que contenía el nombre de nuestra mascota.El código quedaba de la siguiente manera:
>
<title>Ejemplo de JavaScript</title>
<style>
p {
font-family: 'helvetica neue', helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px dashed #9a2118;
background: #9a2118a1;
color: #0c580f;
box-shadow: 5px 10px 12px #71560c;
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<p>Mascota 1</p>
<script>
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
let name = prompt('Mi mascota:');
para.textContent = 'Mascota 1: ' + name;
}
</script>
</body>
</html>
<style>
p {
font-family: 'helvetica neue', helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
border: 2px dashed #9a2118;
background: #9a2118a1;
color: #0c580f;
box-shadow: 5px 10px 12px #71560c;
border-radius: 10px;
padding: 3px 10px;
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<p>Mascota 1</p>
<script>
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
let name = prompt('Mi mascota:');
para.textContent = 'Mascota 1: ' + name;
}
</script>
</body>
</html>
Comentarios
Publicar un comentario