jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2025-12-19 10:07:46 -05:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): reorder heart icon workshop steps to show heart sooner (#64424)

Browse Source 
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
This commit is contained in:
Jack Li
2025-12-19 09:05:59 -05:00
committed by GitHub
parent bf952f4c04
commit 0dc64305b9
4 changed files with 89 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7d.md
View File

@@ -7,24 +7,17 @@ dashedName: step-2
# --description-- # --description--
The next step is to set the `width` and `height` attributes for the `svg` element. As you are creating an icon, both values should be set small. You should nest one `path` element inside your `svg` element to give the image shape.
Set both values to `24`. Create a `path` element.
# --hints-- # --hints--
Your `svg` element should have a `width` attribute of `24`. You should have a `path` element nested inside of your `svg` element.
```js ```js
const svg = document.querySelector('svg'); const path = document.querySelector('svg path');
assert.strictEqual(svg.getAttribute('width'), '24'); assert.exists(path);
```
Your `svg` element should have a `height` attribute of `24`.
```js
const svg = document.querySelector('svg');
assert.strictEqual(svg.getAttribute('height'), '24');
``` ```
# --seed-- # --seed--
@@ -41,6 +34,7 @@ assert.strictEqual(svg.getAttribute('height'), '24');
<body> <body>
--fcc-editable-region-- --fcc-editable-region--
<svg> <svg>
</svg> </svg>
--fcc-editable-region-- --fcc-editable-region--
</body> </body>

64
curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7e.md
View File

@@ -7,64 +7,31 @@ dashedName: step-3
# --description-- # --description--
You are getting closer, now look at this example: The `path` element needs its shape defined. That is where the `d` attribute comes in. It is used to create a series of command letters and numbers that draw a shape.
```html These letters represent commands like move to, draw line, and close, while the numbers represent coordinates.
<svg viewBox="0 0 50 50">
</svg>
```
The `viewBox` attribute controls what part of the image is visible inside the SVG. Set the heart shape's `d` attribute to `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`.
- The first two numbers (`0 0`) set the starting position of the `viewBox` — the top-left corner (x and y).
- The next two numbers (`50 50`) define the `viewBox`'s width and height.
Set the `viewBox` attribute to `0 0 24 24`.
# --hints-- # --hints--
You should have a `viewBox` attribute. You should have a `d` attribute on your `path` element.
```js ```js
const svg = document.querySelector('svg'); const path = document.querySelector('path');
const viewBox = svg.getAttribute('viewBox'); const d = path.getAttribute('d');
assert.exists(viewBox); assert.exists(d);
``` ```
You should set the `viewBox` x position to 0. You should set the `d` attribute to `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`
```js ```js
const svg = document.querySelector('svg'); const path = document.querySelector('path');
const viewBox = svg.getAttribute('viewBox'); const d = path.getAttribute('d');
const x = viewBox?.trim().split(' ')[0]; assert.strictEqual(
assert.strictEqual(x, '0'); 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'
);
You should set the `viewBox` y position to 0.
```js
const svg = document.querySelector('svg');
const viewBox = svg.getAttribute('viewBox');
const y = viewBox?.trim().split(' ')[1];
assert.strictEqual(y, '0');
```
You should set the `viewBox` width to 24.
```js
const svg = document.querySelector('svg');
const viewBox = svg.getAttribute('viewBox');
const width = viewBox?.trim().split(' ')[2];
assert.strictEqual(width, '24');
```
You should set the `viewBox` height to 24.
```js
const svg = document.querySelector('svg');
const viewBox = svg.getAttribute('viewBox');
const height = viewBox?.trim().split(' ')[3];
assert.strictEqual(height, '24');
``` ```
# --seed-- # --seed--
@@ -80,7 +47,8 @@ assert.strictEqual(height, '24');
</head> </head>
<body> <body>
--fcc-editable-region-- --fcc-editable-region--
<svg width="24" height="24"> <svg>
<path></path>
</svg> </svg>
--fcc-editable-region-- --fcc-editable-region--
</body> </body>

24
curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7f.md
View File

@@ -7,18 +7,24 @@ dashedName: step-4
# --description-- # --description--
Before you begin coloring the image in, you should nest one `path` element inside your `svg` The next step is to set the `width` and `height` attributes for the `svg` element. As you are creating an icon, both values should be set small.
element to give the image shape.
Create a `path` element. Set both values to `24`.
# --hints-- # --hints--
You should have a `path` element nested inside of your `svg` element. Your `svg` element should have a `width` attribute of `24`.
```js ```js
const path = document.querySelector('svg path'); const svg = document.querySelector('svg');
assert.exists(path); assert.strictEqual(svg.getAttribute('width'), '24');
```
Your `svg` element should have a `height` attribute of `24`.
```js
const svg = document.querySelector('svg');
assert.strictEqual(svg.getAttribute('height'), '24');
``` ```
# --seed-- # --seed--
@@ -34,8 +40,10 @@ assert.exists(path);
</head> </head>
<body> <body>
--fcc-editable-region-- --fcc-editable-region--
<svg width="24" height="24" viewBox="0 0 24 24"> <svg>
<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> </svg>
--fcc-editable-region-- --fcc-editable-region--
</body> </body>

68
curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e80.md
View File

@@ -7,32 +7,64 @@ dashedName: step-5
# --description-- # --description--
The `path` element needs its shape defined. That is where the `d` attribute comes in. It is used to You are getting closer, now look at this example:
create a series of command letters and numbers that draw a shape.
These letters represent commands like move to, draw line, and close, while the numbers represent coordinates. ```html
<svg viewBox="0 0 50 50">
</svg>
```
Set the heart shape's `d` attribute to `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`. The `viewBox` attribute controls what part of the image is visible inside the SVG.
- The first two numbers (`0 0`) set the starting position of the `viewBox` — the top-left corner (x and y).
- The next two numbers (`50 50`) define the `viewBox`'s width and height.
Set the `viewBox` attribute to `0 0 24 24`.
# --hints-- # --hints--
You should have a `d` attribute on your `path` element. You should have a `viewBox` attribute.
```js ```js
const path = document.querySelector('path'); const svg = document.querySelector('svg');
const d = path.getAttribute('d'); const viewBox = svg.getAttribute('viewBox');
assert.exists(d); assert.exists(viewBox);
``` ```
You should set the `d` attribute to `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` You should set the `viewBox` x position to 0.
```js ```js
const path = document.querySelector('path'); const svg = document.querySelector('svg');
const d = path.getAttribute('d'); const viewBox = svg.getAttribute('viewBox');
assert.strictEqual( const x = viewBox?.trim().split(' ')[0];
d, assert.strictEqual(x, '0');
'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' ```
);
You should set the `viewBox` y position to 0.
```js
const svg = document.querySelector('svg');
const viewBox = svg.getAttribute('viewBox');
const y = viewBox?.trim().split(' ')[1];
assert.strictEqual(y, '0');
```
You should set the `viewBox` width to 24.
```js
const svg = document.querySelector('svg');
const viewBox = svg.getAttribute('viewBox');
const width = viewBox?.trim().split(' ')[2];
assert.strictEqual(width, '24');
```
You should set the `viewBox` height to 24.
```js
const svg = document.querySelector('svg');
const viewBox = svg.getAttribute('viewBox');
const height = viewBox?.trim().split(' ')[3];
assert.strictEqual(height, '24');
``` ```
# --seed-- # --seed--
@@ -48,8 +80,10 @@ assert.strictEqual(
</head> </head>
<body> <body>
--fcc-editable-region-- --fcc-editable-region--
<svg width="24" height="24" viewBox="0 0 24 24"> <svg width="24" height="24">
<path></path> <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> </svg>
--fcc-editable-region-- --fcc-editable-region--
</body> </body>