Могу ли я написать этот код как можно короче? Я отметил начало и конец кода, который хочу изменить (он находится в скрипте после l oop). Может быть, я должен сделать это за l oop? Или, может быть, есть простой способ сделать это. Я просто не знаю, что делать. Если хотите, могу пояснить главный вопрос. Спасибо за чтение и помощь.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Clicker+Script&display=swap" rel="stylesheet">
</head>
<body>
<style>
body {
background-image: url('169240.jpg');
background-size: cover;
margin: 0;
padding: 0;
}
.p {
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
position: absolute;
color: white;
font-size: 26px;
margin-top: 32px;
margin-left: -33px;
}
</style>
<script >
var header_div = document.createElement('div')
document.body.appendChild(header_div)
var p = document.createElement('p')
header_div.appendChild(p)
p.innerHTML = 'Meal Diary'
p.style.fontFamily = 'Clicker Script'
p.style.fontSize = '75px'
p.style.marginBlockEnd = '0'
p.style.marginBlockStart = '0'
p.style.marginLeft = innerWidth * 0.4 + 'px'
p.style.color = 'white'
header_div.style.height = '100px'
header_div.style.backgroundColor = '#8C7484'
header_div.style.alignItems = 'center'
header_div.style.paddingTop = '5px'
var main = document.createElement('div')
document.body.appendChild(main)
main.style.width = innerWidth * 0.6 + 'px'
main.style.height = window.screen.height * 0.6 + 'px'
main.style.backgroundColor = '#F2D8CE'
main.style.marginLeft = innerWidth / 5 + 'px'
main.style.marginTop = '35px'
main.style.border = '2px solid #8C7484'
var data = [
{
name: 'Breakfast',
bgcolor: '#F5D7E2',
headerbg: '#E0AC9F',
food1: 'Boiled Egg',
food1_img: 'egg.png',
food1_calories: 78,
food2: 'Greek Yogurt',
food2_img: 'greek_yogurt.png',
food2_calories: 100,
food3: 'Oatmeal',
food3_img: 'oatmeal.png',
food3_calories: 120,
food4: 'Chia Seed',
food4_img: 'egg.png',
food4_calories: 138,
food5: 'Nuts',
food5_img: 'egg.png',
food5_calories: 172,
food6: 'Fruit Salad',
food6_img: 'egg.png',
food6_calories: 124
},
{
name: 'Lunch',
bgcolor: '#EDCCE5',
headerbg: '#8C7785'
},
{
name: 'Snack',
bgcolor: '#DDC3E0',
headerbg: '#BF9BAF'
},
{
name: 'Dinner',
bgcolor: 'rgb(191 171 194 / 73%)',
headerbg: '#A697A1'
},
];
for (var i = 0; i < data.length; i++) {
var element = document.createElement('div');
element.className = 'card' + i;
element.style.width = main.style.width
element.style.height = '115.25px'
element.style.backgroundColor = data[i].bgcolor;
main.appendChild(element);
var header_div1 = document.createElement('div')
header_div1.style.width = '115.25px'
header_div1.style.height = '50px'
header_div1.style.backgroundColor = data[i].headerbg
var content = data[i].name;
header_div1.innerHTML = content
header_div1.className = 'p';
element.appendChild(header_div1)
var meal_div = document.createElement('div')
meal_div.className = 'meal_div' + i;
meal_div.style.width = '200px'
meal_div.style.height = '115.25px'
meal_div.style.backgroundColor = 'pink'
meal_div.style.marginLeft = '75.6%'
meal_div.style.display = 'flex'
meal_div.style.flexDirection = 'row'
meal_div.style.flexWrap = 'wrap'
element.appendChild(meal_div)
}
`start`
var meal_div0 = document.getElementsByClassName('meal_div0')
var foodimg0 = document.createElement('img')
foodimg0.src = data[0].food1_img
foodimg0.width = '40'
foodimg0.height = '57.6'
foodimg0.style.margin = '5px'
var foodimg1 = document.createElement('img')
foodimg1.src = data[0].food2_img
foodimg1.width = '50'
foodimg1.height = '57.6'
foodimg1.style.margin = '5px'
var foodimg2 = document.createElement('img')
foodimg2.src = data[0].food3_img
foodimg2.width = '50'
foodimg2.height = '57.6'
foodimg2.style.margin = '5px'
var foodimg3 = document.createElement('img')
foodimg3.src = data[0].food4_img
foodimg3.width = '50'
foodimg3.height = '57.6'
foodimg3.style.margin = '5px'
var foodimg4 = document.createElement('img')
foodimg4.src = data[0].food5_img
foodimg4.width = '50'
foodimg4.height = '57.6'
foodimg4.style.margin = '5px'
var foodimg5 = document.createElement('img')
foodimg5.src = data[0].food6_img
foodimg5.width = '50'
foodimg5.height = '57.6'
foodimg5.style.margin = '5px'
meal_div0[0].appendChild(foodimg0)
meal_div0[0].appendChild(foodimg1)
meal_div0[0].appendChild(foodimg2)
meal_div0[0].appendChild(foodimg3)
meal_div0[0].appendChild(foodimg4)
meal_div0[0].appendChild(foodimg5)
`end`
</script>
</body>
</html>