Files
freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-08.md
Randell Dawson fd6f8b5cd4 feat(learn): Update Basic HTML Cat Photo App project descriptions and hints and tests (v7) (#39131)
* feat: added Cat Photo App project

Added new steps

feat: add tests + targetted hints for demo

simplify wording and combine some tests

feat: update text and add tests/hints

fix: changed descriptions and tests

feat: added tests for part 11 - 15

fix: reworded description for steps 2 and 10

fix: changed isBeta to isHidden

fix: temporarily remove fcc-editable strings

fix: added project to challengeTypes.js

fix: added missing parentheses

fix: test text improvements

fix: changes to tests and text discussed in meeting

fix: adjust logic for detecting indentation in part 07

fix: missing regex characters and made last test more permissive for part 04

feat: add steps 25 to 55 and notes

fix: added h1 element back to steps 5-24

fix: h1 and h2 elements from steps 25 to 50

fix: added missing DOCTYPE declaration steps 20-24

fix: miscellaneous text edits

fix: break up part 28, change local paths for images to short s3 cdn URLs

fix: part 01 and 02 descriptions and tests

feat: pull in changes from #39145 and remove solution sections

fix: adjust descriptions and break up steps 33 and 35

fix: break up more steps and adjust text

feat: add tests for parts 25 - 30

* fix: ran reorder-steps.js

* fix: added editable region markers

* fix: standardize opening tag hint text

* fix: remove trailing periods from descriptions and hints and adjust tests

* fix: remove unnecessary instructions sections

* fix: added test to check for only one h1 element

* fix: removed comma

* fix: changed paragraph element to `p` element

* fix: added test for extra h1 element

* fix: test to validate only one img element exists

* fix: replaced code tags with backticks

* fix: reworded description

* fix: reworded step description

* fix: changed tests for first step

* fix: change last two alt values to sentences

* fix: check for spaces in text strings

* fix: removed extra dot before replace method

* fix: moved example before instruction

* fix: rearranged step 6 tests

* fix: capitalized p in paragraph

* fix: rewored step 7's description and a test text

* fix: corrected test for step 8

* fix: improved step 9 tests

* fix: moved example above instruction

* fix: corrected step 9 test wording

* fix: rearrange test order for step 10

* fix: moved example before instructions for step 11

* fix: improved step 12 descripton and tests

* fix: corrected tests for steps 9, 10, 11, 13, 14

* fix: added ERMs to steps 4-14

* fix: minor typos

* fix: reword steps so examples are above instructions

* fix: introduce inline and block elements and use divs instead of br

* fix: add or adjust tests for steps 15 - 27

* fix: moved ERM up one line

* fix: removed unnecessary quotes in tests' text

* fix: added dfn tags for step 45

* fix: removed adding # to href step

* fix: tests 15 - 16

* fix: reword descriptions so they're not as hand holdy

* fix: reorder/reword steps 58 - 60

* feat: simplify radio button steps

* fix: wording and add demo step

* fix: remove doctype and teach in last step

* fix: update part-demo

* fix: added some more step 15 hints

* fix: added step to introduce section elems

* fix: added section elements to project

* fix: update final code

* fix: update tests for 15a and 16

* fix: add section elements to parts 45 to 61

* fix: change p elements to h3, update tests and text

* fix: added new test for step 9

* fix: fixed/added tests for steps 15-30a

* fix: use fieldset elements instead of divs in the form

* fix: added new test to setp 30a

* fix: changed `main` to `section`

* fix: corrected/added tests for step 31

* feat: add tests 32 - 36

* fix: revert change to js rpg game

* fix: simplify tests 32 - 36

* fix: updated submit-cat-form url

fix: changed submit-cat-form url

* fix: added/rearranged tests steps 32-36

* fix: added tests for step 36a

* fix: used hasAttribute where applicable

* fix: misc edits for steps 10 and 35-36a

* fix: add tests to step 37

* fix: reworded step 37

* fix: added more verbiage to steps 35 and 36

* fix: modified step 38 desc and added tests

* fix: added hints/tests for step 40

* fix: added hints/tests for step 41

* fix: added hints/tests for steps 42 and 43

* fix: made attribute values match exactly

* fix: change wording from text input to text field

* fix: rearrange name attribute lessons

* feat: tests for 44 - 44b

* fix: added a step  35a

* fix: added name="catphotourl" to steps 36-61

* fix: reworded steps 41 and 43

* fix: removed intro to for attribute

* fix: rewrite of step 44b's desc and tests

* fix: added step 45 hints/tests

fix

* fix: removed for attribute from steps 45a-61

* fix: removed extra )

* fix: wrapped "section" with backticks

* fix: added test for steps 45a and 45b

* fix: adjust position of label steps 55-61

* fix: removed conole.log statements

* fix: added tests to step 45c

* fix: renamed step 49 to step 46a

* fix: moved label element for steps 48-53

* fix: reworded step 47 description and instructions

* fix: typos in description and test text

* feat: add tests 46-48

* fix: wording

* fix: remove case insensitivity from a couple of tests

* fix: wording and add erms

* fix: add additional test for step 48

* fix: added hints/tests for step 50

* fix: added hints/tests for step 51

* fix: added hints/tests to step 53

* fix: added hints/tests for step 55

* fix: added hints/tests for step 56

* feat: tests for 57-61

* fix: removed duplicate test in step 55

* fix: adjusted 1st test for step 57

* fix: simplified test for title text

* fix: improved tests for step 60-61

* fix: removed demo.md file

* fix: ran reorder-steps.js

* fix: part 10 description

* fix: part 14 description

* fix: part 24 - move ERMs

* fix: part 05 description

* fix: part 54 test text

* fix: part 06 - wording and add test for p and main closing tag order

* fix: part 50 - add test to check for order of fieldset elements

* feat: value attribute for radio buttons step and seed changes

* feat: value attribute for checkboxes step and seed changes

* fix: update part 14 description

* fix: revert ERMs for part 24

* fix: remove last test in part 06

* fix: text and typos for new radio and checkbox lessons

* fix: text and typos for new radio and checkbox lessons

* fix: add test to part 01

* fix: ran reorder-steps.js

Co-authored-by: Kris Koishigawa <scissorsneedfoodtoo@gmail.com>
2020-09-16 11:54:09 +05:30

58 lines
2.0 KiB
Markdown

---
id: 5dc24073f86c76b9248c6ebb
title: Part 08
challengeType: 0
isHidden: true
---
## Description
<section id='description'>
HTML <dfn>attributes</dfn> are special words used inside the opening tag of an element to control the element's behavior. The `src` attribute in an `img` element specifies the image's URL (where the image is located). An example of an `img` element using an `src` attribute: `<img src="https://www.your-image-source.com/your-image.jpg">`.
Add an `src` attribute to the existing `img` element that is set to the following URL: `https://bit.ly/fcc-relaxing-cat`.
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: Your code should have an `img` element. You may have removed the `img` element or you have not surrounded the `src` attribute's value with quotes.
testString: assert( document.querySelector('img') );
- text: Your `img` element should have an `src` attribute. You have either omitted the attribute or have a typo. Make sure there is a space between the element name and the attribute name.
testString: assert( document.querySelector('img').src );
- text: Your `img` element's `src` attribute should be set to 'https://bit.ly/fcc-relaxing-cat'. You have either omitted the URL or have a typo. The case of the URL is important.
testString: assert( document.querySelector('img').src === 'https://bit.ly/fcc-relaxing-cat' );
- text: Although you have set the `img` element's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks.
testString: assert( !/\<img\s+src\s*=\s*https:\/\/bit\.ly\/fcc-relaxing-cat/.test(code) );
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<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>
--fcc-editable-region--
</main>
</body>
</html>
```
</div>
</section>