P4 · Proyectos

Pequeños proyectos que juntan HTML, CSS y JavaScript. Cada uno va en su propia carpeta con index.html, estilos.css y script.js.

Ejercicio P4.1

Tarjeta de presentación interactiva. Crea una página con una foto de perfil, un párrafo con tu nombre y otro con una frase tuya. Añade un botón «Cambiar foto» que rote entre dos o tres imágenes, un botón «Modo oscuro» que con doble clic cambie entre fondo claro y oscuro (y el texto al contrario) y un campo con un botón «Publicar» que añada cada comentario como un párrafo nuevo bajo la tarjeta, sin borrar los anteriores.

Solución modelo (bloqueada)

🔒 La solución completa está bloqueada. Esto es solo un ejemplo de cómo empieza:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Mi tarjeta</title>
  <style>
<!-- ... (resto de la solución bloqueado) -->

Ejercicio P4.2

Lista de tareas con memoria. Amplía la lista de tareas del ejercicio J3.15: poder marcar una tarea como hecha (tachada), borrarla y que todo se conserve al recargar con localStorage. Que se vea bien en móvil.

Ejercicio P4.3

Adivina el número. El programa elige un número secreto entre 1 y 100. El usuario escribe intentos y la página dice «más alto», «más bajo» o «¡acertaste!», cuenta los intentos y permite empezar de nuevo.

Ejercicio P4.4

Portafolio responsive. Crea tu portafolio: cabecera con menú, presentación, rejilla de proyectos con Grid, formulario de contacto con validación en JavaScript y pie. Debe ser semántico, accesible y verse bien en móvil y escritorio.