mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2025-12-19 18:18:27 -05:00
fix(curriculum): reorder heart icon workshop steps to show heart sooner (#64424)
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
This commit is contained in:
Jack Li
@@ -7,24 +7,17 @@ dashedName: step-2
|
||||
|
||||
# --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--
|
||||
|
||||
Your `svg` element should have a `width` attribute of `24`.
|
||||
You should have a `path` element nested inside of your `svg` element.
|
||||
|
||||
```js
|
||||
const svg = document.querySelector('svg');
|
||||
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');
|
||||
const path = document.querySelector('svg path');
|
||||
assert.exists(path);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@@ -41,6 +34,7 @@ assert.strictEqual(svg.getAttribute('height'), '24');
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<svg>
|
||||
|
||||
</svg>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
|
||||
@@ -7,64 +7,31 @@ dashedName: step-3
|
||||
|
||||
# --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
|
||||
<svg viewBox="0 0 50 50">
|
||||
</svg>
|
||||
```
|
||||
These letters represent commands like move to, draw line, and close, while the numbers represent coordinates.
|
||||
|
||||
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`.
|
||||
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`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `viewBox` attribute.
|
||||
You should have a `d` attribute on your `path` element.
|
||||
|
||||
```js
|
||||
const svg = document.querySelector('svg');
|
||||
const viewBox = svg.getAttribute('viewBox');
|
||||
assert.exists(viewBox);
|
||||
const path = document.querySelector('path');
|
||||
const d = path.getAttribute('d');
|
||||
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
|
||||
const svg = document.querySelector('svg');
|
||||
const viewBox = svg.getAttribute('viewBox');
|
||||
const x = viewBox?.trim().split(' ')[0];
|
||||
assert.strictEqual(x, '0');
|
||||
```
|
||||
|
||||
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');
|
||||
const path = document.querySelector('path');
|
||||
const d = path.getAttribute('d');
|
||||
assert.strictEqual(
|
||||
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'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@@ -80,7 +47,8 @@ assert.strictEqual(height, '24');
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<svg width="24" height="24">
|
||||
<svg>
|
||||
<path></path>
|
||||
</svg>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
|
||||
@@ -7,18 +7,24 @@ dashedName: step-4
|
||||
|
||||
# --description--
|
||||
|
||||
Before you begin coloring the image in, you should nest one `path` element inside your `svg`
|
||||
element to give the image shape.
|
||||
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.
|
||||
|
||||
Create a `path` element.
|
||||
Set both values to `24`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `path` element nested inside of your `svg` element.
|
||||
Your `svg` element should have a `width` attribute of `24`.
|
||||
|
||||
```js
|
||||
const path = document.querySelector('svg path');
|
||||
assert.exists(path);
|
||||
const svg = document.querySelector('svg');
|
||||
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--
|
||||
@@ -34,8 +40,10 @@ assert.exists(path);
|
||||
</head>
|
||||
<body>
|
||||
--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>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
|
||||
@@ -7,32 +7,64 @@ dashedName: step-5
|
||||
|
||||
# --description--
|
||||
|
||||
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.
|
||||
You are getting closer, now look at this example:
|
||||
|
||||
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--
|
||||
|
||||
You should have a `d` attribute on your `path` element.
|
||||
You should have a `viewBox` attribute.
|
||||
|
||||
```js
|
||||
const path = document.querySelector('path');
|
||||
const d = path.getAttribute('d');
|
||||
assert.exists(d);
|
||||
const svg = document.querySelector('svg');
|
||||
const viewBox = svg.getAttribute('viewBox');
|
||||
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
|
||||
const path = document.querySelector('path');
|
||||
const d = path.getAttribute('d');
|
||||
assert.strictEqual(
|
||||
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'
|
||||
);
|
||||
const svg = document.querySelector('svg');
|
||||
const viewBox = svg.getAttribute('viewBox');
|
||||
const x = viewBox?.trim().split(' ')[0];
|
||||
assert.strictEqual(x, '0');
|
||||
```
|
||||
|
||||
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--
|
||||
@@ -48,8 +80,10 @@ assert.strictEqual(
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<svg width="24" height="24" viewBox="0 0 24 24">
|
||||
<path></path>
|
||||
<svg width="24" height="24">
|
||||
<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>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user