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

Примітка

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

Кожен челендж також має дві кнопки: 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.