<div class="card">
  <p>Текст</p>
  <button>Нажми меня</button>
</div>
<div class="card">
  <p>Только текст</p>
</div>

<style>
  .card:has(button) {
    border: 2px solid blue; /* Стили для карточек с кнопкой */
  }
</style>

let obj = { name: 'Alice' };
const weakMap = new WeakMap();

weakMap.set(obj, 'Дополнительные данные');
console.log(weakMap.get(obj)); // 'Дополнительные данные'

obj = null; // Ключ становится недоступен, запись удаляется из WeakMap

<img src="placeholder.jpg" data-src="image.jpg" class="lazy" alt="Изображение">

<script>
  const lazyImages = document.querySelectorAll('img.lazy');
  lazyImages.forEach(img => {
    img.src = img.dataset.src;
  });
</script>

<img src="example.jpg" class="filtered" alt="Изображение с фильтром">

<style>
  .filtered {
    filter: grayscale(50%) blur(5px); /* Частично чёрно-белое изображение с размытие */
  }
</style>

const numbers = [1, 2, 3, 4, 5, 6];

// Оставляем только чётные числа
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6]

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://trusted-scripts.com; object-src 'none';">

<div class="responsive-box"></div>

<style>
  .responsive-box {
    width: 300px;
    aspect-ratio: 16 / 9; /* Пропорция 16:9 */
    background: lightblue;
  }
</style>

const numbers = [1, 2, 3, 4, 5];

// Сумма всех чисел в массиве
const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // 15

<header>
  <h1>Мой блог</h1>
</header>
<section>
  <article>
    <h2>Заголовок статьи</h2>
    <p>Текст статьи...</p>
  </article>
</section>
<footer>
  <p>© 2024 Все права защищены</p>
</footer>