freeCodeCamp/curriculum/challenges/italian/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md

3.6 KiB

id title challengeType forumTopicId dashedName
587d78af367417b2b2512b03 Crea un modulo di sondaggio 3 301145 build-a-survey-form

--description--

Obiettivo: Costruisci un'app CodePen.io funzionalmente simile a questa: https://codepen.io/freeCodeCamp/full/VPaoNP.

Soddisfa le seguenti user story e fai passare tutti i test. Usa il tuo stile personale.

Puoi utilizzare HTML, JavaScript, e CSS per completare questo progetto. CSS è raccomandato perché è l'argomento delle lezioni viste finora e dovresti fare pratica con il CSS di base. Se lo desideri puoi anche utilizzare Bootstrap o SASS. Ulteriori tecnologie (solo per fare un esempio jQuery, React, Angular, o Vue) non sono raccomandate per questo progetto, e usarle è a tuo rischio. Altri progetti ti daranno la possibilità di lavorare con diversi stack tecnologici come React. Accetteremo e cercheremo di risolvere tutte le segnalazioni di problemi che utilizzano lo stack tecnologico suggerito per questo progetto. Happy coding!

User Story #1: Posso vedere un titolo con id="title" in un testo di dimensioni H1.

User Story #2: Posso vedere una breve spiegazione con id="description" in un testo di dimensione P.

User Story #3: Posso vedere un form con id="survey-form".

User Story #4: All'interno del modulo, mi viene chiesto di inserire il mio nome in un campo con id="name".

User Story #5: All'interno del modulo, mi viene chiesto di inserire un'email in un campo con id="email".

User Story #6: Se inserisco un'email non formattata correttamente, vedrò un errore di validazione HTML5.

User Story #7: All'interno del modulo, posso inserire un numero in un campo con id="number".

User story #8: Se inserisco caratteri non numerici nell'input di tipo number, vedrò un errore di validazione HTML5.

User story #9: Se inserisco numeri al di fuori dell'intervallo dell'input numerico, che sono definiti dagli attributi min e max, vedrò un errore di validazione HTML5.

User story #10: Per il nome, l'e-mail, e i campi di input numerici all'interno del modulo posso vedere le etichette corrispondenti che descrivono lo scopo di ogni campo con i seguenti id: id="name-label", id="email-label"e id="number-label".

User story#11: Per i campi di input di nome, email e numero, posso vedere il testo segnaposto che mi dà una descrizione o delle istruzioni per ogni campo.

User story #12: All'interno del modulo, posso selezionare un'opzione da un menu a discesa che ha un corrispondente id="dropdown".

User story #13: All'interno del modulo, posso selezionare un campo da uno o più gruppi di pulsanti di opzione. Ogni gruppo dovrebbe essere raggruppato usando l'attributo name.

User story #14: All'interno del modulo, posso selezionare diversi campi da una serie di caselle di spunta, ciascuno dei quali deve avere un attributo value.

User story #15: All'interno del modulo, mi viene presentata alla fine una textarea, per inserire ulteriori commenti.

User story #16: All'interno del modulo, mi viene presentato un pulsante con id="submit" per inviare tutti i miei input.

Puoi costruire il tuo progetto usando questo modello CodePen e facendo click su Save per creare il tuo pen. Oppure puoi usare questo link CDN per eseguire i test in qualsiasi ambiente tu voglia: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js

Una volta fatto, invia l'URL del tuo progetto di lavoro con tutti i suoi test superati.

--solutions--

// solution required