Módulo 09: Desarrollo de interfaces web 2023

Ejercicio correspondiente a la asignatura de Desarrollo de Interfaces Web del ciclo formativo de Desarrollo de Aplicaciones Web. 🔨 Midterm practice 👨‍🎓 Desarrollada con HTML 🕸️ JS CSS

Objetivo principal: Simular una carrera de coches

1. Crear un desplegable para seleccionar el número de participantes.
2. Crear un array con tantas posiciones como participantes se hayan seleccionado. Se adjuntará una imagen de un coche en cada posición.
3. Todos los coches deben situarse uno debajo del otro con un "margin-left" de 0px.
4. Indicar un valor fijando una línea de meta.
5. Se trata de ir incrementando el margen desplazando los coches hacia la derecha (con el método animate) hasta rebasar la línea de meta (valor indicado).
6. Se crearán dos botones, "Iniciar" y "Reiniciar". Al cargar la página, solamente debe mostrarse el botón inicio, reiniciar debe estar oculto. Sin embargo, cada vez que pulsamos uno de ellos, desparece y se muestra el otro.
7. Al pulsar el botón inicio, los coches empezarán a avanzar. En cambio, si se pulsa el botón "Reiniciar" los coches tendrán que volver al puesto inicial.
8. El avance de cada coche se realiza añadiendo de forma aleatoria valores entre 1 y 10.
9. El primer coche que llegue al valor fijado como línea de meta, será el ganador.
10. Mostrar una tabla con las posiciones de cada participante.
Se debe diseñar el entorno del aplicativo web, cuanto más creativo mejor.