Back to Freecodecamp

Step 6

curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e81.md

latest1.4 KB
Original Source

--description--

The heart icon is almost done. You just need to color it red. To do that, set the svg element's fill attribute to red.

Congrats on finishing this workshop!

--hints--

You should have a fill attribute on your svg element.

js
const svg = document.querySelector('svg');
const fill = svg.getAttribute('fill');
assert.exists(fill);

You should set the fill attribute to red.

js
const svg = document.querySelector('svg');
const fill = svg.getAttribute('fill');
assert.strictEqual(fill, "red");

--seed--

--seed-contents--

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Heart Icon</title>
  </head>
  <body>
    --fcc-editable-region--
    <svg width="24" height="24" viewBox="0 0 24 24">
    --fcc-editable-region--
      <path
        d="M12 21s-6-4.35-9.33-8.22C-.5 7.39 3.24 1 8.4 4.28 10.08 5.32 12 7.5 12 7.5s1.92-2.18 3.6-3.22C20.76 1 24.5 7.39 21.33 12.78 18 16.65 12 21 12 21z"
      ></path>
    </svg>
  </body>
</html>

--solutions--

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Heart Icon</title>
  </head>

  <body>
    <svg width="24" height="24" viewBox="0 0 24 24" fill="red">
      <path
        d="M12 21s-6-4.35-9.33-8.22C-.5 7.39 3.24 1 8.4 4.28 10.08 5.32 12 7.5 12 7.5s1.92-2.18 3.6-3.22C20.76 1 24.5 7.39 21.33 12.78 18 16.65 12 21 12 21z"
      />
    </svg>
  </body>
</html>