---
id: 60a3e3396c7b40068ad69974
title: الخطوة 11
challengeType: 0
dashedName: step-11
---

# --description--

كل لوحة تحتاج إلى إطار.

قم بتفليف عنصر `.canvas` في `div` آخر. امنح هذا `div` الـ class الآتي `frame`.
# --hints--

يجب عليك إضافة عنصر `div` جديد.

```js
assert(document.querySelectorAll('div').length === 2)
```

عنصر `.canvas` الخاص بك يجب أن يكون متداخلا في عنصر `div` الجديد.

```js
assert(document.querySelector('.canvas').parentElement.tagName === 'DIV');
```

يجب أن يحتوي `div` الجديد على `class` بقيمة `frame`.

```js
assert(document.querySelector('div').className.split(' ').includes('frame'));
```

يجب أن يكون `div` الجديد ضمن عنصر `body` الخاص بك.

```js
assert(document.querySelector('div').parentElement.tagName === 'BODY');
```

# --seed--

## --seed-contents--

```css
.canvas {
  width: 500px;
  height: 600px;
  background-color: #4d0f00;
}
```

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Rothko Painting</title>
    <link href="./styles.css" rel="stylesheet">
  </head>
  <body>
--fcc-editable-region--

    <div class="canvas">
    </div>

--fcc-editable-region--
  </body>
  ```
