La Cuarta pagina está casi vacía. Vamos a llenarla usando todo lo que ya sabes.
Haz las misiones en orden. Si te atascas, pulsa Ver pista.
Esta página (tarea.html) no sale en el menú de tus otras páginas.
Busca el <div> negro de arriba en cada página. Copia una línea de link y cambia el href y el texto:
<a style="color:white;" href="tarea.html">Tarea</a>
En cuarta-pagina.html, debajo del título:
Mira cómo pusiste la foto en tercera-pagina.html. Para un párrafo se usa la etiqueta <p>:
<p>Me gusta ...</p>
En la Cuarta pagina, añade un botón que diga Cambiar color.
¡Es casi igual que tu función ocultarYmostrarTitulo() de index.html!
1. Ponle un id al <h1> para poder encontrarlo.
2. En vez de style.display usa style.color:
if(titulo.style.color == "green"){
titulo.style.color = "blue";
}else{
...
}
En la Cuarta pagina, añade una caja de texto y un botón que diga Entrar.
Mira tu función saludar() de segunda-pagina.html. Es lo mismo, pero con otras palabras dentro del if y del alert.
Ojo: ponle a la caja un id nuevo, por ejemplo id="clave", y usa ese mismo nombre en getElementById.
Añade un botón Modo oscuro que cambie el fondo de toda la página a negro y las letras a blanco. Si lo pulsas otra vez, vuelve a blanco.
La página entera es el body. Puedes cambiarla así, sin getElementById:
document.body.style.backgroundColor = "black"; document.body.style.color = "white";
Usa un if / else para saber si ya está negra.
Cuando todo funcione, guárdalo con un commit y súbelo a internet con un push.
También lo puedes hacer escribiendo en la terminal:
git add . git commit -m "Tarea: cuarta pagina terminada" git push
add = elegir los archivos, commit = guardar una foto de tu trabajo, push = subirlo a internet.
Marca cada misión cuando funcione:
Cuando lo veas en tu teléfono, ¡enséñaselo a papá!