Test Frontend

Istruzioni

Il test consiste nella ralizzazione di due pagine:

Una dinamica con forms, chiamate ajax e manipolazione del DOM.
Una statica per la realizzazione di un mockup dettagliato.

Le pagine devono essere realizzate secondo standards e best practices, con decente compatibilità cross-browser e in modo adatto alla fruizione su dispositivi mobili.

Entrambe le pagine condividono header e footer.

Pagina Dinamica

Nella sezione centrale c'è un campo con autocomplete le cui voci sono caricate attraverso una chiamata ajax all'indirizzo:
https://www.prontopro.it/work-with-us/dev/fe/test/autocomplete

L'oggetto ritornato è nella forma:

[
  {
    "label": <label>,
    "url": <url>
  }, ...
]

In cui <label> è l'etichetta della suggestion da mostrare nell'autocomplete e <url> è l'indirizzo da cui ottenere le specifiche del form da renderizzare.

Al momento della selezione di una tipologia di form dall'autocomplete bisogna renderizzarlo ottenendo le specifiche con una chiamata ajax all'url ottenuto allo step precedente.

L'oggetto ritornato è nella forma:

[
  {
    "name": <name>,
    "label": <label>,
    "type": <type>,
    "rules": [
      {
        "type": <rule_type>,
        "msg": <error_message>,
        "options": <optional_parameters>
      }, ...
    ]
  }, ...
]

(vedere form0, form1, form2 per riferimento ai possibili valori)

Quando viene cliccato il bottone di submit deve essere effettuata la validazione secondo le regole espresse in rules, mostrando eventuali messaggi di errore.

Se il form passa la validazione i valori devono essere visualizzati nella colonna di destra.

Bonus:

Possibilità di eliminare una delle precedenti submission.
Possibilità di ricaricare i dati di una submission passata cliccandoci sopra.

Pagina statica

Realizzare la pagina del seguente mockup:

Valutazione

I primari oggetti di valutazione sono:

Completezza rispetto alle specifiche.
Organizzazione, pulizia e stile.

Inoltre verranno considerate le scelte fatte:

Uso di un preprocessore (JS e/o CSS).
Uso di librerie e frameworks (JS e/o CSS).
Automatizzazione del processo di build.
Eventuale integrazione di meccanismi di testing e/o linting.

(Dove ritenuto opportuno motivare le scelte effettuate)

Modalità di consegna