Вёрстка сайтов | HTML, CSS, JS

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент виден на экране!');
    } else {
      console.log('Элемент исчез с экрана!');
    }
  });
});

const target = document.querySelector('.my-element');
observer.observe(target);
Настройка через параметры (threshold и rootMargin):
```const observer = new IntersectionObserver(callback, {
  threshold: 0.5, // Элемент должен быть виден на 50%
  rootMargin: '0px 0px -50px 0px' // Отступы вокруг зоны видимости
});

const button = document.querySelector('.add-to-cart');
const observer = new IntersectionObserver(([entry]) => {
  if (!entry.isIntersecting) {
    button.classList.add('sticky');
  } else {
    button.classList.remove('sticky');
  }
}, { threshold: 1 });
observer.observe(button);

Пример
const original = { a: 1, b: { c: 2 } };
const clone = deepClone(original);
clone.b.c = 42;
console.log(original.b.c); // 2
console.log(clone.b.c);    // 42

function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}
window.addEventListener('resize', debounce(() => {
  console.log('Изменён размер окна');
}, 300));

Input: 
actions = ["EventEmitter", "emit", "subscribe", "subscribe", "emit"], 
values = [[], ["firstEvent"], ["firstEvent", "function cb1() { return 5; }"],  ["firstEvent", "function cb1() { return 6; }"], ["firstEvent"]]
Output: [[],["emitted",[]],["subscribed"],["subscribed"],["emitted",[5,6]]]
Explanation: 
const emitter = new EventEmitter();
emitter.emit("firstEvent"); // [], no callback are subscribed yet
emitter.subscribe("firstEvent", function cb1() { return 5; });
emitter.subscribe("firstEvent", function cb2() { return 6; });
emitter.emit("firstEvent"); // [5, 6], returns the output of cb1 and cb2

<h1 class="gradient-text">Смотри, я градиентный!</h1>

CSS:

<nav>
  <ul>
    <li><a href="/">Главная</a></li>
    <li>
      <a href="/blog">Блог</a>
      <ul>
        <li><a href="/blog/post1">Пост 1</a></li>
        <li><a href="/blog/post2">Пост 2</a></li>
      </ul>
    </li>
  </ul>
</nav>

nav li:has(a.active) > a {
  font-weight: bold;
  color: #007bff;
}

$button-colors: (primary: #3498db, success: #2ecc71, danger: #e74c3c);
.button {
  @each $name, $color in $button-colors {
    &--#{$name} {
      background-color: $color;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}

.button--primary {
  background-color: #3498db;
  color: #fff;
}
.button--success {
  background-color: #2ecc71;
  color: #fff;
}
.button--danger {
  background-color: #e74c3c;
  color: #fff;
}

<button class="loading-button">
  <span class="loading-text">Загрузка...</span>
  <span class="spinner"></span>
</button>

.loading-button {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
}
.spinner {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 15px;
  height: 15px;
  border: 2px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform: translateY(-50%);
}
@keyframes spin {
  0% { transform: rotate(0deg) translateY(-50%); }
  100% { transform: rotate(360deg) translateY(-50%); }
}

Input: 
arr1 = [
    {"id": 1, "x": 1},
    {"id": 2, "x": 9}
], 
arr2 = [
    {"id": 3, "x": 5}
]
Output: 
[
    {"id": 1, "x": 1},
    {"id": 2, "x": 9},
    {"id": 3, "x": 5}
]

const users = [
    { name: 'Alice', age: 25, isActive: true },
    { name: 'Bob', age: 30, isActive: false },
    { name: 'Charlie', age: 20, isActive: true },
    { name: 'David', age: 35, isActive: true },
    { name: 'Eve', age: 28, isActive: false }
];

['Charlie', 'Alice', 'David']

div.container>header+main+footer 

<div class="container">  
  <header></header>  
  <main></main>  
  <footer></footer>  
</div> 

<div class="menu__item menu__item--active">Главная</div>  

<!-- Главное меню сайта -->  
<nav>...</nav> 

<svg class="circle-text" viewBox="0 0 100 100">
  <path id="circle-text" d="M 0,50 a 50,50 0 1,1 0,1 z" />
  <text>
    <textPath xlink:href="#circle-text">
      Круговой текст
    </textPath>
  </text>
</svg>

.circle-text {
  display: block;
  overflow: visible;
  width: 100px;
  font-size: 28px;
  fill: red;
}
.circle-text path {
    fill: none;
}

-webkit-line-clamp: 3; 

-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;

intersection([1, 2, 4, 5, 6], [2, 3, 5, 7]);
// Ожидаемый результат: [2, 5]

localStorage.setItem("username", "Masha");  

const username = localStorage.getItem("username");  
console.log(username); // "Masha"

localStorage.removeItem("username"); 

<template id="my-template">  
  <div class="card">  
    <h3>Это шаблон!</h3>  
    <p>Этот текст появится, только если вы его активируете через JS.</p>  
  </div>  
</template> 

const template = document.getElementById("my-template");  
const content = template.content.cloneNode(true);  
document.body.appendChild(content); 

<img src="image.jpg" usemap="#imagemap">
<map name="imagemap">
  <area shape="rect" coords="34,44,270,350" href="page1.html" alt="Прямоугольник">
  <area shape="circle" coords="337,300,44" href="page2.html" alt="Круг">
</map>

<p>Понятие <dfn>API</dfn> означает интерфейс прикладного программирования.</p>

firstUniqChar("leetcode");
// Ожидаемый результат: 'l'
firstUniqChar("aabb");
// Ожидаемый результат: -1 (все буквы повторяются)

<p>Ошибка: <samp>Файл не найден</samp></p>

permute("abc");
// Ожидаемый результат: ["abc", "acb", "bac", "bca", "cab", "cba"]

maxSubArraySum([1, -2, 3, 4, -1, 2, 1, -5, 4]); 
// Ожидаемый результат: 8 (подмассив [3, 4, -1, 2])

button {
  transition: transform 0.1s ease;
}
button:active {
  transform: scale(0.95);
}

.tooltip {
  opacity: 0;
  transition: opacity 0.3s ease;
}
button:hover + .tooltip {
  opacity: 1;
}

body{
scroll-behavior:smooth;
}

let users = [
  {id: 1, name: 'user1', country: 'Armenia', age: 18},
  {id: 2, name: 'user2', country: 'Russia', age: 19},
  {id: 3, name: 'user3', country: 'Ukraine', age: 20},
];

const input = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const result = countOccurrences(input);
console.log(result);
// Ожидаемый вывод:
// {
//   apple: 3,
//   banana: 2,
//   orange: 1
// }