3.6 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
587d78af367417b2b2512b03 | Creare 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.
Compila le user stories qui sotto e fai passare tutti i test. Dalle 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 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 clic 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 passati.
--solutions--
// solution required