Челендж: Рендеринг Елемента

Примітка

За замовчуванням усі челенджи можуть виглядати зломаними, оскільки вони містять пропуски, в які потрібно ввести необхідний код. Після того, як ви правильно заповните ці пропуски, заповнений код буде відображено на живій сторінці.

Кожен челендж також має дві кнопки: Hint та Solution. При їхньому натисканні відкриється підказка до завдання або нова вкладка із вирішеним завданням і робочим проектом.

Як працювати з Code Sandbox

Завдання: Створення картки товару

Створіть картку товару і відрендерите її в DOM. Картка товару потребує:

1. Зображення товару (елемент img ).

   • Атрибут src повинен дорівнювати змінній imageUrl .

   • Атрибут alt повинен дорівнювати рядку Computer .

   • Атрибут width повинен дорівнювати значенню 256 .

2. Назва товару (елемент h3 ).

   • Його текстовий вміст повинен бути Computer .

3. Ціна товару (елемент span ).

   • Його текстовий вміст повинен бути Price: $129.99 .

4. Опис товару (елемент p ).

   • Його текстовий вміст повинен бути New Model .

1. The src attribute must contain the imageUrl variable as a value. Use curly braces {} .

2. The alt attribute must contain the string "Computer" as a value. Enclose it in double quotes.

3. The width attribute must contain the number 256 as a value. Use curly braces {} .

4. Ensure that the h3 , span , and p elements have correct values.