Información sobre la tarea
La entrega será en formato vídeo (preferiblemente MP4). Leer Entrega y presentación de tareas.
La tarea se calificará con una nota de APTO (10) o NO APTO (0).
Duración actividades obligatorias: 5 horas.
RA6. Desarrolla aplicaciones web analizando y aplicando las características del modelo de objetos del documento.
Actividades
Realiza SOLO UNA de las siguientes actividades y prepara un vídeo de aproximadamente 2 minutos explicando CON TU VOZ los siguientes puntos:
- Explica en que partes del código has accedido al DOM. Indica cuándo y cómo creas, modificadas o eliminas nodos del DOM.
- Indica si has añadido manejadores de eventos y para qué los has necesitado.
- Indica en qué navegadores has probado la aplicación.
- Explica cómo has estructurado tú código para que el contenido, el aspecto y el comportamiento de tu aplicación estén separados.
Todos los proyectos deben tener al menos un fichero CSS con estilos definidos, un fichero javascript con código que modifique el DOM y un documento HTML.
Editor de pixel art
Haz una aplicación en JavaScript que simule un pequeño editor de pixel art. Para ello tendrás que dibujar un tablero de 30 celdas x 30 celdas con cada celda de ancho 10 px y alto 10 px. Para realizar el tablero de dibujo tendrás que emplear obligatoriamente los métodos de creación de nodos del DOM. Una vez generado el tablero lo meterás dentro del div con id="zonadibujo".
Se te facilitará un fichero index.html y un fichero estilos.css con los estilos que tendrás que utilizar. La programación de la aplicación JavaScript la tendrás que realizar en un fichero .js adicional.
Si se modifican los colores programados en los estilos CSS (color1 a color6) la aplicación tendrá que seguir funcionando correctamente.
La forma de funcionamiento de la aplicación será la siguiente:
- Haremos click en alguno de los 5 colores de la paleta y se le asignará la clase
seleccionado. - Una vez seleccionado un color de la paleta, haremos un click en una celda (que se pintará del color activo en la paleta) y desde ese momento al mover el ratón por el tablero pintará del color activo todas las celdas por las que vayamos pasando el ratón. En el momento que volvamos a hacer click en otra celda dejará de pintar.
- Alternativa: Si lo prefieres, puedes hacer que solo pinte cuando estás manteniendo el click izquierdo pulsado.
- Podremos escoger un color diferente y repetir el proceso, incluso sobre celdas que ya han sido pintadas.
- Para borrar una celda pintaremos con el color blanco de la paleta.
- Cada vez que el pincel esté activado se mostrará un mensaje debajo de la paleta de colores indicando: PINCEL ACTIVADO o PINCEL DESACTIVADO.
Captura de cómo debería quedar la aplicación
Lista de tareas
Haz una aplicación de tareas que cumpla con los siguientes requisitos funcionales:
- El usuario puede crear una tarea.
- El usuario puede borrar una tarea.
- El usuario puede editar una tarea.
- El sistema almacenará las tareas de manera persistente usando el
localStorage, de modo que permanezcan accesibles incluso después de cerrar y reabrir el navegador. - El usuario puede marcar una tarea como completada.
Reloj analógico
Haz un reloj que muestre la hora actual con manecilla de horas y minutos.
- Deberás hacer uso de
setIntervalosetTimeoutpara actualizaciones periódicas. - (Opcional) Puedes añadir animaciones para mover las agujas del reloj.
- (Opcional) Puedes añadir la manecilla de los segundos.
- (Opcional) Puedes añadir un botón para cambiar los colores del reloj.
La palabra del dia
Haz el juego de Wordle que consiste en adivinar una palabra oculta en 6 intentos.
- El usuario solo tiene 6 intentos para adivinar la palabra.
- Después de cada intento el color de las casillas cambia para mostrar qué tan cerca estás de acertar la palabra de la siguiente forma:
- VERDE significa que la letra está en la palabra y en la posición CORRECTA.
- AMARILLO significa que la letra letra está presente en la palabra pero en la posición INCORRECTA.
- GRIS significa que la letra letra NO está presente en la palabra.
- (Opcional) Cada intento debe ser una palabra válida.
- (Opcional) La palabra que aparece es aleatoria.
Calculadora científica
Haz una calculadora científica que cumpla con los siguientes requisitos:
- La calculadora debe permitir hacer sumas, restas, multiplicaciones y divisiones.
- La calculadora debe permitir hacer raíces cuadradas y potencias.
- La calculadora debe mostrar un error cuando se intente dividir entre 0.
- La calculadora no debe aceptar entradas que no sean números.
Quien es quien
Desarrolla un tablero de quien es quien interactivo. La idea principal es que se pueda jugar de la manera tradicional en dos ordenadores distintos.
En este enlace puedes ver el funcionamiento del juego.
Hundir la flota
Desarrolla un tablero de hundir la flota interactivo. La idea principal es que se pueda jugar de la manera tradicional en dos ordenadores distintos.
En este enlace puedes ver el funcionamiento del juego.
Buscaminas
Desarrolla el juego del buscaminas sin expansiones automáticas.
En este enlace tienes un ejemplo de juego junto a sus reglas.
Ahorcado
Desarrolla el juego del ahorcado.
En este enlace tienes un ejemplo de juego junto a sus reglas.
Sudoku
Desarrolla el juego del sudoku y que con un botón compruebe si es correcta tu solución o no.
En este enlace tienes un ejemplo de juego junto a sus reglas.
Bingo
Desarrolla un pequeño juego del Bingo con un solo cartón.
- En el bombo hay 90 bolas (del 1 al 90, inclusive).
- El jugador tiene su propio cartón con 15 números aleatorios.
- Al pulsar en el bombo central, empezaremos a sacar números y comprobar si existen en los cartones.
- De existir, se tachan y esperamos a que el usuario vuelva a pulsar para sacar un nuevo número.
- En la parte inferior, iremos añadiendo los números extraídos.
- Cuando se tachen todos los números el juego finaliza.
Otro aplicación o juego
Si quieres hacer otra aplicación u otro juego en HTML, CSS y JavaScript deberá ser aprobado por el profesor.