Files
freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-009.md
Oliver Eyton-Williams ee1e8abd87 feat(curriculum): restore seed + solution to Chinese (#40683)
* feat(tools): add seed/solution restore script

* chore(curriculum): remove empty sections' markers

* chore(curriculum): add seed + solution to Chinese

* chore: remove old formatter

* fix: update getChallenges

parse translated challenges separately, without reference to the source

* chore(curriculum): add dashedName to English

* chore(curriculum): add dashedName to Chinese

* refactor: remove unused challenge property 'name'

* fix: relax dashedName requirement

* fix: stray tag

Remove stray `pre` tag from challenge file.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
2021-01-12 19:31:00 -07:00

1.5 KiB

id, title, challengeType, dashedName
id title challengeType dashedName
5dc24165f86c76b9248c6ebc Part 9 0 part-9

--description--

All img elements should have an alt attribute. The alt attribute's text is used for screen readers to improve accessibility and is displayed if the image fails to load. For example, <img src="cat.jpg" alt="A cat"> has an alt attribute with the text A cat.

Add an alt attribute to the img element with the text A cute orange cat lying on its back.

--hints--

Your code should have an img element. You removed the img element from an earlier step.

assert(document.querySelector('img'));

Your img element does not have an alt attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.

assert(document.querySelector('img').hasAttribute('alt'));

Your img element's alt attribute value is set to something other than 'A cute orange cat lying on its back'. Make sure the alt attribute's value is surrounded with quotation marks.

const altText = document
  .querySelector('img')
  .alt.toLowerCase()
  .replace(/\s+/g, ' ');
assert(altText.match(/A cute orange cat lying on its back\.?$/i));

--seed--

--seed-contents--

<html>
  <body>
    <h1>CatPhotoApp</h1>
    <main>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more cat photos.</p>
--fcc-editable-region--
      <img src="https://bit.ly/fcc-relaxing-cat">
--fcc-editable-region--
    </main>
  </body>
</html>