<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<script src="/javascript.js"></script>
<title>Document</title>
</head>
<body>
<template id="car-template">
<div class="car">
Марка автомобиля: <span class="model">Dodge</span><br>
Год выпуска: <span class="year">1967</span><br>
Цвет: <span class="color">красный</span><br>
Тип кузова: <span class="body">Hard Top</span><br>
<img src="" alt="" class="img">
</div>
</template>
</body>
</html>.car {
width: 300px;
padding: 1em;
border: dashed 1px gray;
margin: 1em;
}
.car span {
border-bottom: dashed 1px gray;
}const template = document.getElementById('car-template');
const carTemplate = template.content.querySelector('.car');
getData().forEach(car => {
const carElem = document.importNode(carTemplate, true);
for (const key in car) {
if (key === 'img') {
carElem.querySelector('.img').src = car.img;
} else {
carElem.querySelector('.' + key).textContent = car[key];
}
}
document.body.appendChild(carElem)
});
function getData() {
return [{
"model": "Dodge",
"year": 1967,
"color": "red",
"body": "Hard top",
"img": "/images/car-1"
},
{
"model": "Cadillac",
"year": 1968,
"color": "blue",
"body": "Hard top",
"img": "/images/car-2"
},
];
}