Frontend | Вопросы собесов

.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

<button class="button button--primary">
  <span class="button__icon"></span> Нажми меня
</button>

.button {
  background-color: gray;
  color: white;
  padding: 10px;
}

.button--primary {
  background-color: blue;
}

.button__icon {
  margin-right: 5px;
}

.card {
  border: 1px solid #ccc;
  padding: 10px;
}

.card--dark {
  background-color: black;
  color: white;
}

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
`;

export default function App() {
  return <Button>Нажми меня</Button>;
}

<button class="bg-blue-500 text-white p-2 rounded">Кнопка</button>

     <div class="menu">
       <div class="menu__item menu__item--active">Главная</div>
       <div class="menu__item">О нас</div>
       <div class="menu__item">Контакты</div>
     </div>
     

     <!-- Атом -->
     <button class="button">Клик</button>
     <!-- Молекула -->
     <div class="form">
       <label class="form__label">Имя</label>
       <input class="form__input" type="text">
     </div>
     

const obj = { user: { name: "Иван" } };
const copy = obj; 

copy.user.name = "Петр"; 
console.log(obj.user.name); // "Петр" (оба объекта ссылаются на одно и то же)

const obj = { user: { name: "Иван" } };
const shallowCopy = { ...obj };

shallowCopy.user.name = "Петр";
console.log(obj.user.name); // "Петр" 😱 (изменился оригинал!)

const deepCopy = structuredClone(obj);
deepCopy.user.name = "Петр";

console.log(obj.user.name); // "Иван" ✅ (оригинал не изменился)

const [user, setUser] = useState({ name: "Иван" });

useEffect(() => {
  console.log("Имя изменилось:", user.name);
}, [user]); // Работает только если user — новый объект!

// НЕ сработает:
user.name = "Петр"; // user остался тем же объектом

setUser(prev => ({ ...prev, name: "Петр" }));

watch(user, (newValue) => {
  console.log("Изменено:", newValue);
});

watch(user, (newValue) => {
  console.log("Изменено:", newValue);
}, { deep: true });

<meta charset="UTF-8">

<meta name="description" content="Лучший сайт с рецептами вкусных блюд!">

<meta name="keywords" content="рецепты, еда, кулинария, блюда">

<meta name="author" content="Иван Иванов">

<meta name="robots" content="noindex, nofollow">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta property="og:title" content="Вкусные рецепты">
<meta property="og:description" content="Попробуйте лучшие блюда со всего мира!">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Рецепты для гурманов">
<meta name="twitter:image" content="https://example.com/image.jpg">

document.getElementById("content").innerHTML = "<h1>Привет!</h1>";

const userInput = "<script>alert('Вас взломали!');</script>";
document.getElementById("content").innerHTML = userInput;

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

document.getElementById("btn").addEventListener("click", () => {
  alert("Нажато!");
});

document.getElementById("container").innerHTML = "<button id='btn'>Клик</button>";
document.getElementById("btn").click(); // Ошибка, обработчик удален