2.8 KiB

Raw Blame History

id	title	challengeType	dashedName
6141fabd6f75610664e908fd	Step 14	0	step-14

--description--

Poiché questo è un quiz, avrai bisogno di un modulo che gli utenti possano usare per inviare le risposte. Puoi separare semanticamente il contenuto all'interno del modulo utilizzando degli elementi section.

All'interno dell'elemento main, crea un modulo con tre elementi section annidati. Quindi, fai in modo che il modulo venga inviato a https://freecodecamp.org/practice-project/accessibility-quiz, utilizzando il metodo corretto.

--hints--

Dovresti annidare un elemento form all'interno dell'elemento main.

assert.exists(document.querySelector('main > form'));

Dovresti annidare tre elementi section all'interno dell'elemento form.

assert.equal(document.querySelectorAll('main > form > section')?.length, 3);

Dovresti dare all'elemento form un attributo action.

assert.notEmpty(document.querySelector('main > form')?.action);

Dovresti dare all'attributo action il valore https://freecodecamp.org/practice-project/accessibility-quiz.

assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz');

Dovresti assegnare all'elemento form un attributo method.

assert.notEmpty(document.querySelector('main > form')?.method);

Dovresti assegnare all'elemento form un attributo method con il un valore post.

assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post');

--seed--

--seed-contents--

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
    <title>Accessibility Quiz</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
      <h1>HTML/CSS Quiz</h1>
      <nav>
        <ul>
          <li><a>INFO</a></li>
          <li><a>HTML</a></li>
          <li><a>CSS</a></li>
        </ul>
      </nav>
    </header>
--fcc-editable-region--
    <main>

    </main>
--fcc-editable-region--
  </body>
</html>

body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  margin: 0;
}

header {
  width: 100%;
  height: 50px;
  background-color: #1b1b32;
  display: flex;
}

#logo {
  width: max(100px, 18vw);
  background-color: #0a0a23;
  aspect-ratio: 35 / 4;
  padding: 0.4rem;
}

h1 {
  color: #f1be32;
  font-size: min(5vw, 1.2em);
}

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;
}

nav > ul {
  display: flex;
  justify-content: space-evenly;
}

2.8 KiB Raw Blame History

--description--

--hints--

--seed--

--seed-contents--

2.8 KiB

Raw Blame History