---
id: 612eaf56b7ba3257fdbfb0db
title: Step 21
challengeType: 0
dashedName: step-21
---
# --description--
The piano needs the freeCodeCamp logo to make it official.
Add an `img` element before your `.keys` element. Give the `img` a `class` of `logo`, and set the `src` to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. Give it an `alt` text of `freeCodeCamp Logo`.
# --hints--
You should add a new `img` element.
```js
assert(document.querySelectorAll('img')?.length === 1);
```
Your `img` element should come before your first `.key` element.
```js
const img = document.querySelector('img');
assert(img?.nextElementSibling?.className === 'keys');
assert(img?.previousElementSibling === null);
```
Your `img` element should have a `class` set to `logo`.
```js
const img = document.querySelector('img');
assert(img?.className === 'logo');
```
Your `img` element should have a `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
```js
const img = document.querySelector('img');
assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
```
Your `img` element should have an `alt` attribute set to `freeCodeCamp Logo`.
```js
assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo');
```
Remember that casing and spelling matter.
```js
assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo');
```
# --seed--
## --seed-contents--
```html
Piano
--fcc-editable-region--