Home

1 – Creació d’un menú principal

Aquest menú o pantalla inicial ha de tenir al menys els següents elements ( pot ser un menú tradicional o utilitzar botons o l’eina que es vulgui). Utilitzeu XHTML i CSS3.

1. Un ítem per llençar el joc ( Start Game).

2. Un ítem Help ( que mostrarà una pantalla de informació del joc, tecles a utilitzar,
objectiu...).

3. Un ítem informació on com a mínim es pugui visualitzar la següent informació:
	i. Navegador utilitzat.
	ii. Versió del Navegador.
	iii. SO on es va compilar el navegador
	iv. Data darrera modificació del vostre programa/web.
	v. Idioma
	vi. Dades del hostname (URL)
4. Un ítem Crèdits amb informació autor i referències a autors o propietaris dels drets autor 	de les imatges, sons o elements utilitzats.

5. Una presentació adient ( imatge joc, header, footer i qualsevol altre element que 	considereu)

2 – Formulari d’inscripció

Juntament amb aquest document, en la pràctica s’adjunta un “esbós” o formulari en HTML que podeu agafar com a referència.

Realitzar la validació del formulari facilitat en l'enunciat, complint els següents requisits:

1. Programar el codi de JavaScript en un fitxer independent.

2. Emmagatzemar en una cookie el nombre d'intents d'enviament del formulari que es van
produint i mostrar un missatge en el contenidor "intents" similar a: "Intent d'Enviaments del
formulari: X". És a dir cada vegada que li donem al botó d'enviar haurà d'incrementar el 	valor de la cookie en 1 i mostrar el seu contingut en el div abans esmentat.

Nota: per a poder actualitzar el contingut d'un contenidor o div la propietat que hem de modificar per a aquest objecte és innerHTML.

3. Cada vegada que els camps NOM i COGNOMS perdin el focus, el contingut que s'hagi 	escrit en aquests camps es convertirà a majúscules.

4. Realitzar una funció que validi els camps de text NOM i COGNOMS. Si es produeix 	algun error mostrar el missatge en el contenidor "errors" i posar el focus en els camps
corresponents.

5. Validar l'EDAT que contingui solament valors numèrics i que estigui en el rang de 0 a 	105. Si es produeix algun error mostrar el missatge en el contenidor "errors" i posar el focus 	en el camp EDAT.

6. Validar el NIF. Utilitzar una expressió regular que permeti solament 8 números un guió i 	una lletra. Si es produeix algun error mostrar el missatge en el contenidor "errors" i posar el 	focus en el camp NIF. No és necessari validar que la lletra sigui correcta. Explicar les parts 	de l'expressió regular mitjançant comentaris.

7. Validar l'E-mail. Utilitzar una expressió regular que ens permeti comprovar que l'email
segueix un format correcte. Si es produeix algun error mostrar el missatge en el contenidor
"errors" i posar el focus en el camp E-mail. Explicar les parts de l'expressió regular 	mitjançant comentaris.

8. Podeu treure el camps que no utilitzareu. Compta que els de NO DUAL si els utilitzaran 	com es veu a l’enunciat de la seva part.

9. Demanar confirmació d'enviament del formulari. Si es confirma l'enviament realitzarà
l'enviament de les dades; en un altre cas cancel·larà l'enviament.

Consells i recomanacions.

Es recomana realitzar una funció per a cadascuna de les validacions de tal forma que es pugui cridar a cadascuna de forma independent. Les funcions haurien de retornar true si la validació ha estat correcta o false (i els missatges d'error sol·licitats) si la validació ha estat incorrecta.

Es recomana crear una funció getCookie o readCookie, una altra setCookie or writeCookie, i una darrera eliminar cookies ( clearCookies).

Com podeu veure aquí tracta un element amb ID “errors” per mostrat tots els errors. Exemple per modificar un element amb “errors”: document.getElementById("errors").innerHTML="Error name too large";

Una forma més adient que es valorarà es ficar en lletra petita i en vermell sota cada element un text informant de l’error.

Una forma de ficar valors per defecte en formularis és utilitzant l’atribut de HTML5 placeholder

Ref: https://css-tricks.com/almanac/selectors/p/placeholder/

Buscar per internet patrons correctes per número de telèfon, email i NIF. Ex: per validar mail podeu utilitzar el patró var pattern = /^[\w-.]{2,}@([\w-]{2,}.)+([\w-]{2,4})$/;

Es valorarà la impressió general, la disposició dels elements, la claredat dels missatges, per això podeu fer les modificacions que calguin en CSS i HTML.

Recordeu no barrejar codi. Fitxer javascript, fitxer CSS i fitxer HTML independents.