// Кнопка
const nextvideo = document.getElementById('nextvideo');
// Видео элемент
const videoElement = document.getElementById("video");
// Массив путей
const vids = [
"../assets/img/web_1.mp4",
"../assets/img/web_2.mp4",
"../assets/img/web_3.mp4"
];
// Счётчик
let idx = 0;
// Устанавливаем первый урл как первое видео.
videoElement.src = vids[0]
// Совмещаем всё вместе в обработчике клик
nextvideo.addEventListener('click', function () {
// Цикличность счётчика:
// Если следующее значение выходит за длину массива минус 1 (выражено знаком "меньше"),
// то обнуляем, в противном случае увеличиваем на 1.
idx = idx + 1 < vids.length ? idx + 1 : 0;
const nextVideoUrl = vids[idx];
videoElement.src = nextVideoUrl
})
display: block;
height: 1px;
width: 100%;
background-color: #fffdisplay: flex;
align-items: flex-end;
justify-content: space-between;
const response = await fetch('data.json');
const data = await response.json();
console.log(data);npx, например: npx serve. 
На сайте могут быть представлены сотни позиций товаров, вручную верстать каждую страничку это бред, наверняка существуют какие-то оптимизированные методы для создания подобных проектов, хотел бы попросить рассказать о них, ибо я не смог найти нормальной информации по этому поводу.
вручную верстать каждую страничку это бред
const li = Array.prototype.filter.call(
document.querySelector('ul').children,
function(n) {
return this.every(([ k, v ]) => v === n.querySelector(`.${k}`).innerText);
},
Object.entries(items)
);const li = [];
COLLECT_LI:
for (const n of document.querySelectorAll('li')) {
for (const k in items) {
if (Object.hasOwn(items, k) && items[k] !== n.querySelector('.' + k).textContent) {
continue COLLECT_LI;
}
}
li.push(n);
}
<div>
<span>123</span>
<p>Какой-то текст</p>
</div>body{
background: gray;
}
div{
margin: 50px auto;
width: 200px;
height: 140px;
background: radial-gradient(40px 40px at center top, transparent 100%, red 100%);
position: relative;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
border-radius: 20px;
}
span{
width: 65px;
height: 65px;
border-radius: 50%;
color: firebrick;
background: aqua;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: -32px;
}transform: rotate(-90deg); и какой-нить transform-origin, наиболее удобный.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="script.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Dynamic Text Color</title>
</head>
<body>
<div class="container">
<p id="content">Ваш текст.</p>
</div>
</body>
</html>body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white; /* Default background color */
}
.container.dark {
background-color: black; /* Dark background color */
color: white; /* Text color for dark background */
}const container = document.querySelector('.container');
const content = document.getElementById('content');
// Функция для определения цвета фона
function getBackgroundColor(element) {
const bgColor = window.getComputedStyle(element).backgroundColor;
return bgColor;
}
// Функция для определения оптимального цвета текста
function getTextColor(backgroundColor) {
// Пример простой проверки на светлый или тёмный цвет фона
const rgb = backgroundColor.match(/\d+/g);
const brightness = (parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000;
return brightness >= 128 ? 'black' : 'white';
}
// Изменение цвета текста в зависимости от цвета фона
function updateTextColor() {
const bgColor = getBackgroundColor(container);
const textColor = getTextColor(bgColor);
content.style.color = textColor;
}
// Обновляем цвет текста при загрузке и изменении размера окна
window.addEventListener('load', updateTextColor);
window.addEventListener('resize', updateTextColor);
let img = new Image()
// создали Image, пока ничего не происходит
img.src = "path/to/img.jpg"
// установили src - пошла загрузка картинки
ctx.drawImage(img, x, y);
// нарисовали на канвасе сраное ничто
// идёт загрузка картинки
// идёт загрузка картинки
// идёт загрузка картинки
// идёт загрузка картинки
// идёт загрузка картинки
// идёт загрузка картинки
// идёт загрузка картинки
// картинка загрузилась, вызвано событие img.onloadconst canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;
const ctx = canvas.getContext('2d');
document.body.append(canvas);
let img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0);
}
img.src = "https://i.pinimg.com/originals/87/48/07/874807f8cb45e17f44312eb761261ad9.jpg";