freeCodeCamp/curriculum/challenges/italian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md

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

--description--

Obbiettivo: Crea un'app funzionalmente simile a https://survey-form.freecodecamp.rocks

User story:

1. Dovresti avere un titolo di pagina in un elemento h1 con un attributo id di title
2. Dovrebbe esserci una breve spiegazione in un elemento p con un id di description
3. Dovrebbe esserci un elemento form con un attributo id di survey-form
4. All'interno dell'elemento modulo, ti è richiesto di scrivere il tuo nome in un campo input che ha un attributo id di name e un attributo type di text
5. All'interno dell'elemento modulo, ti è richiesto di inserire la tua email in un campo di input che ha un id di email
6. Se inserisci una mail che non è formattata correttamente, vedrai un errore di validazione HTML5
7. All'interno del modulo è possibile inserire un numero in un campo input che ha un id di number
8. Se entri non-numeri nell'input di numero, vedrai un errore di validazione HTML5
9. Se immetti un numero al di fuori del range del campo per il numero, che hai definito con gli attributi min e max, vedrai un errore di validazione HTML5
10. Per le caselle di input per il nome, la mail e il numero, puoi vedere dei corrispondenti elementi label nel modulo che descrivono lo scopo di ogni campo con i seguenti attributi id: id="name-label", id="email-label", e id="number-label"
11. Per i campi di input del nome, mail e numero, puoi vedere del testo segnaposto che da una descrizione o istruzioni per ogni campo
12. Dentro l'elemento modulo, dovresti vedere un elemento select a tendina con un id di dropdown e almeno due opzioni tra cui scegliere
13. Dentro l'elemento modulo, puoi selezionare una opzione da un gruppo di almeno due elementi radio che sono raggruppati con l'attributo name
14. All'interno dell'elemento del modulo, è possibile selezionare diversi campi da una serie di caselle di controllo, ciascuno dei quali deve avere un attributo value
15. All'interno del modulo, ti è presentato un elemento textarea per commenti aggiuntivi
16. Dentro l'elemento modulo, puoi vedere un pulsante con un id di submit per inviare tutti gli input

Soddisfa le user story e passa tutti i test qua sotto per complerare questo progetto. Usa il tuo stile personale. Buon divertimento!

Nota: Assicurati di aggiungere <link rel="stylesheet" href="styles.css"> nel tuo HTML per linkare il tuo foglio di stile e applicare il tuo CSS

--hints--

Dovrebbe esserci un elemento h1 con un id di title

const el = document.getElementById('title')
assert(!!el && el.tagName === 'H1')

Il tuo elemento #title non dovrebbe essere vuoto

const el = document.getElementById('title')
assert(!!el && el.innerText.length > 0)

Dovrebbe esserci un elemento p con un id di description

const el = document.getElementById('description')
assert(!!el && el.tagName === 'P')

L'elemento #description non dovrebbe essere vuoto

const el = document.getElementById('description')
assert(!!el && el.innerText.length > 0)

Dovrebbe esserci un elemento form con un attributo id di survey-form

const el = document.getElementById('survey-form')
assert(!!el && el.tagName === 'FORM')

Dovresti avere un elemento input con un id di name

const el = document.getElementById('name')
assert(!!el && el.tagName === 'INPUT')

L'elemento #name dovrebbe avere un attributo type con valore di text

const el = document.getElementById('name')
assert(!!el && el.type === 'text')

L'elemento #name dovrebbe richiedere un input

const el = document.getElementById('name')
assert(!!el && el.required)

L'elemento #name dovrebbe essere un discendente di #survey-form

const el = document.querySelector('#survey-form #name')
assert(!!el)

Dovresti avere un elemento input con un id di email

const el = document.getElementById('email')
assert(!!el && el.tagName === 'INPUT')

L'elemento #email dovrebbe avere un attributo type con valore di email

const el = document.getElementById('email')
assert(!!el && el.type === 'email')

L'elemento #email dovrebbe richiedere un input

const el = document.getElementById('email')
assert(!!el && el.required)

L'elemento #email dovrebbe essere un discendente di #survey-form

const el = document.querySelector('#survey-form #email')
assert(!!el)

Dovresti avere un elemento input con un id di number

const el = document.getElementById('number')
assert(!!el && el.tagName === 'INPUT')

L'elemento #number dovrebbe essere un discendente di #survey-form

const el = document.querySelector('#survey-form #number')
assert(!!el)

L'elemento #number dovrebbe avere un attributo type con valore di number

const el = document.getElementById('number')
assert(!!el && el.type === 'number')

L'elemento #number dovrebbe avere un attributo min con un valore numerico

const el = document.getElementById('number')
assert(!!el && el.min && isFinite(el.min))

L'elemento #number dovrebbe avere un attributo max con un valore numerico

const el = document.getElementById('number')
assert(!!el && el.max && isFinite(el.max))

Dovresti avere un elemento label con un id di name-label

const el = document.getElementById('name-label')
assert(!!el && el.tagName === 'LABEL')

Dovresti avere un elemento label con un id di email-label

const el = document.getElementById('email-label')
assert(!!el && el.tagName === 'LABEL')

Dovresti avere un elemento label con un id di number-label

const el = document.getElementById('number-label')
assert(!!el && el.tagName === 'LABEL')

L'elemento #name-label non dovrebbe essere vuoto

const el = document.getElementById('name-label')
assert(!!el && el.innerText.length > 0)

L'elemento #email-label non dovrebbe essere vuoto

const el = document.getElementById('email-label')
assert(!!el && el.innerText.length > 0)

L'elemento #number-label non dovrebbe essere vuoto

const el = document.getElementById('number-label')
assert(!!el && el.innerText.length > 0)

L'elemento #name-label dovrebbe essere un discendente di #survey-form

const el = document.querySelector('#survey-form #name-label')
assert(!!el)

L'elemento #email-label dovrebbe essere un discendente di #survey-form

const el = document.querySelector('#survey-form #email-label')
assert(!!el)

L'elemento #number-label dovrebbe essere un discendente di #survey-form

const el = document.querySelector('#survey-form #number-label')
assert(!!el)

L'elemento #name dovrebbe avere un attributo placeholder con un valore

const el = document.getElementById('name')
assert(!!el && !!el.placeholder && el.placeholder.length > 0)

L'elemento #email dovrebbe avere un attributo placeholder con un valore

const el = document.getElementById('email')
assert(!!el && !!el.placeholder && el.placeholder.length > 0)

L'elemento #number dovrebbe avere un attributo placeholder con un valore

const el = document.getElementById('number')
assert(!!el && !!el.placeholder && el.placeholder.length > 0)

Dovrebbe esserci un campo select con un id di dropdown

const el = document.getElementById('dropdown')
assert(!!el && el.tagName === 'SELECT')

L'elemento #dropdown dovrebbe avere almeno due elementi option selezionabili (non disattivati)

const els = document.querySelectorAll('#dropdown option:not([disabled])')
assert(els.length >= 2)

L'elemento #dropdown dovrebbe essere un discendente di #survey-form

const el = document.querySelector('#survey-form #dropdown')
assert(!!el)

Dovresti avere almeno due elementi input con un attributo type di radio (pulsanti radio)

const els = document.querySelectorAll('input[type="radio"]')
assert(els.length >= 2)

Dovresti avere almeno due pulsanti radio che sono discendenti di #survey-form

const els = document.querySelectorAll('#survey-form input[type="radio"]')
assert(els.length >= 2)

Tutti i tuoi pulsanti radio dovrebbero avere un attributo value con un valore

const els1 = document.querySelectorAll('input[type="radio"]')
const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])')
assert(els1.length > 0 && els2.length === 0)

Tutti i tuoi pulsanti radio dovrebbero avere un attributo name con un valore

const els1 = document.querySelectorAll('input[type="radio"]')
const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])')
assert(els1.length > 0 && els2.length === 0)

Ogni gruppo di pulsanti radio dovrebbe avere almeno 2 pulsanti radio

const radioButtons = document.querySelectorAll('input[type="radio"]');
const groups = {}

if (radioButtons) {
  radioButtons.forEach(el => {
    if (!groups[el.name]) groups[el.name] = []
    groups[el.name].push(el)
  })
}

const groupKeys = Object.keys(groups)

groupKeys.forEach(key => {
  if (groups[key].length < 2) assert(false)
})

assert(groupKeys.length > 0)

Dovresti avere almeno due elementi input con un attributo type di checkbox (caselle a scelta multipla) che sono discendenti di #survey-form

const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
assert(els.length >= 2)

Tutte le tue caselle checkbox dentro l'elemento #survey-form dovrebbero avere un attributo value con un valore

const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]')
const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])')
assert(els1.length > 0 && els2.length === 0)

Dovrebbe esserci almeno un elemento textarea discendente di #survey-form

const el = document.querySelector('#survey-form textarea')
assert(!!el)

Dovrebbe esserci un elemento input o button con un id di submit

const el = document.getElementById('submit')
assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))

L'elemento #submit dovrebbe avere un attributo type con valore di submit

const el = document.getElementById('submit')
assert(!!el && el.type === 'submit')

L'elemento #submit dovrebbe essere un discendente di #survey-form

const el = document.querySelector('#survey-form #submit')
assert(!!el)

--seed--

--seed-contents--

--solutions--

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <title>Survey Form</title>
  </head>
  <body>
    <h1>Survey Form</h1>
    <p>The card below was built as a sample survey form for freeCodeCamp.</p>
    <main id="main">
      <h1 id="title">Join the Togepi Fan Club!</h1>
      <p id="description">
        Enter your information here to receive updates about club activities,
        our monthly newsletter, and other email communications.
      </p>
      <form id="survey-form" action="#">
        <label for="name" id="name-label"
          ><p>Name:</p>
          <input type="text" id="name" placeholder="e.g. John Smith" required />
        </label>
        <label for="email" id="email-label"
          ><p>Email:</p>
          <input
            type="email"
            id="email"
            placeholder="e.g. john.smith@email.com"
            required
          />
        </label>
        <label for="age" id="number-label"
          ><p>Age<em>(optional)</em>:</p>
          <input
            type="number"
            id="number"
            placeholder="e.g. 19"
            min="18"
            max="99"
          />
        </label>
        <label for="interest" id="interest-label"
          ><p>What are you most interested in?</p>
          <select id="dropdown">
            <option selected disabled hidden></option>
            <option id="battles">Battling</option>
            <option id="breeding">Breeding</option>
            <option id="catching">Completing my Pokedex</option>
            <option id="exploring">Exploring new regions</option>
          </select>
        </label>
        <p>Who is your favourite Pokemon?</p>
        <label for="togepi">
          <input
            id="togepi"
            type="radio"
            name="favorite"
            value="togepi"
          />Togepi!
        </label>
        <label for="pikachu">
          <input
            id="pikachu"
            type="radio"
            name="favorite"
            value="pikachu"
          />Pikachu
        </label>
        <label for="other">
          <input id="other" type="radio" name="favorite" value="other" />Other
        </label>
        <p>Which communications do you want to receive?</p>
        <label for="newsletter">
          <input
            id="newsletter"
            type="checkbox"
            name="communications"
            value="newsletter"
          />Newsletter
        </label>
        <label for="events">
          <input
            id="events"
            type="checkbox"
            name="communications"
            value="events"
          />Event updates
        </label>
        <label for="updates">
          <input
            id="updates"
            type="checkbox"
            name="communications"
            value="updates"
          />Club updates
        </label>
        <p>Any other information you would like to share?</p>
        <textarea id="additional-information" rows="4" cols="50">
You can provide comments, suggestions, or feedback here.</textarea
        >
        <p>
          <em
            >Please note: This form is a proof of concept. Submitting the form
            will not actually transmit your data.</em
          >
        </p>
        <button type="Submit" id="submit">Submit</button>
      </form>
    </main>
  </body>
  <footer>
    <a href="../">Return to Project List</a> |
    <a href="https://www.nhcarrigan.com">Return to HomePage</a>
  </footer>
</html>

main {
  text-align: center;
  background-color: #92869c;
  background-blend-mode: lighten;
  max-width: 500px;
  margin: 20px auto;
  border-radius: 50px;
  box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
  color: black;
}
body {
  text-align: center;
  background: #3a3240;
  color: white;
}
input, textarea, select, button {
  background: #3a3240;
  color: white;
}
a {
  color: white;
}