freeCodeCamp/curriculum/challenges/italian/14-responsive-web-design-22/learn-more-about-css-pseudo.../61fd778081276b59d59abad6.md

3.8 KiB

id title challengeType dashedName
61fd778081276b59d59abad6 Step 13 0 step-13

--description--

Nel primo tr, aggiungi un elemento th con il testo Cash This is the cash we currently have on hand.. Racchiudi tutto il testo tranne Cash in un elemento span con l'attributo class impostato su description.

Poi, aggiungi tre elementi td con il seguente testo (in ordine): $25, $30, $28. Dai al terzo elemento td un attributo class con il valore current.

--hints--

Il primo tr dovrebbe avere un elemento th.

assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));

L'elemento th dovrebbe avere il testo Cash This is the cash we currently have on hand..

assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Cash This is the cash we currently have on hand.');

Dovresti racchiudere il testo This is the cash we currently have on hand. in un elemento span.

assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'This is the cash we currently have on hand.');

L'elemento span dovrebbe avere l'attributo class con il valore description.

assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));

Dovresti avere tre elementi td.

assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);

Il primo elemento td dovrebbe avere il testo $25.

assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$25');

Il secondo elemento td dovrebbe avere il testo $30.

assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$30');

Il terzo elemento td dovrebbe avere il testo $28.

assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$28');

Il terzo elemento td dovrebbe avere l'attributo class con il valore current.

assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));

--seed--

--seed-contents--

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Balance Sheet</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <main>
      <section>
        <h1>
          <span class="flex">
            <span>AcmeWidgetCorp</span>
            <span>Balance Sheet</span>
          </span>
        </h1>
        <div id="years" aria-hidden="true">
          <span class="year">2019</span>
          <span class="year">2020</span>
          <span class="year">2021</span>
        </div>
        <div class="table-wrap">
          <table>
            <caption>Assets</caption>
            <thead>
              <tr>
                <td></td>
                <th><span class="sr-only year">2019</span></th>
                <th><span class="sr-only year">2020</span></th>
                <th class="current"><span class="sr-only year">2021</span></th>
              </tr>
            </thead>
            <tbody>
--fcc-editable-region--
              <tr class="data">
              </tr>
--fcc-editable-region--
              <tr class="data">
              </tr>
              <tr class="data">
              </tr>
              <tr class="total">
              </tr>
            </tbody>
          </table>
          <table>
          </table>
          <table>
          </table>
        </div>
      </section>
    </main>
  </body>
</html>