Senior Frontend - javascript, html, css

'xcyc', 'xc', 'yc' —> // true
'xcyc', 'yc', 'xc' —> // true
'codewars', 'code', 'wars' —> // true
'codewars', 'cdwr', 'oeas' —> // true
'codewars', 'code', 'code' —> // false

@keyframes changeColor {
    0% {
        background-color: lightblue;
    }
    50% {
        background-color: lightgreen;
    }
    100% {
        background-color: lightblue;
    }
}

.animated-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    animation: changeColor 3s infinite;
}

"http://google.com" //  "google"
"http://google.co.jp"  //  "google"
"www.xakep.ru"  //  "xakep"
"https://youtube.com"  //  "youtube"

// Создаем объект Animal
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} издает звук.`);
};

// Создаем объект Dog, который наследует от Animal
function Dog(name, breed) {
  Animal.call(this, name); // Вызов конструктора Animal
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // Наследование прототипа Animal
Dog.prototype.constructor = Dog; // Восстановление конструктора Dog

Dog.prototype.bark = function() {
  console.log(`${this.name} лает.`);
};

const myDog = new Dog('Рекс', 'Лабрадор');

myDog.speak(); // Рекс издает звук.
myDog.bark(); // Рекс лает.

const cat = {
  meow() {
    console.log('Мяу!');
  }
};

const myCat = Object.create(cat);
myCat.name = 'Мурка';
myCat.meow(); // Мурка мяукает.

Object.setPrototypeOf(myCat, {});
myCat.meow(); // Ошибка, так как метод больше не существует в цепочке прототипов

Mmmm  => []
Super => [2,4]
Apple => [1,5]
YoMama -> [1,2,4,6]

interface User {
  id: number;
  name: string;
  email: string;
}

const updateUser = (id: number, userUpdates: Partial<User>) => {
  // Обновление пользователя
};

updateUser(1, { name: 'Alice' }); // Можно передать только часть свойств

interface User {
  id?: number;
  name?: string;
  email?: string;
}

const user: Required<User> = {
  id: 1,
  name: 'Alice',
  email: '[email protected]'
}; // Все свойства должны быть указаны

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Readonly<User> = {
  id: 1,
  name: 'Alice',
  email: '[email protected]'
};

user.id = 2; // Ошибка: свойство id доступно только для чтения

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Pick<User, 'id' | 'name'> = {
  id: 1,
  name: 'Alice'
}; // Только свойства id и name

interface User {
  id: number;
  name: string;
  email: string;
}

const user: Omit<User, 'email'> = {
  id: 1,
  name: 'Alice'
}; // Все свойства, кроме email

type Roles = 'admin' | 'user' | 'guest';

const roles: Record<Roles, string> = {
  admin: 'Admin User',
  user: 'Regular User',
  guest: 'Guest User'
};

type T = 'a' | 'b' | 'c';
type U = 'a';

type Result = Exclude<T, U>; // 'b' | 'c'

type T = 'a' | 'b' | 'c';
type U = 'a' | 'c';

type Result = Extract<T, U>; // 'a' | 'c'

type T = string | number | null | undefined;

type NonNullableT = NonNullable<T>; // string | number

function getUser() {
  return { id: 1, name: 'Alice' };
}

type User = ReturnType<typeof getUser>; // { id: number, name: string }

removeParentheses("a (bc d)e") => "a e"
removeParentheses("a(b(c))") => "a"

const biggy = 9997000254740991n

const alsoBig = BigInt(9997000254999999)

const seven = 7n
const five = 5n

console.log(seven / five)
// 1

const biggy = 10n
const number = 5

console.log(biggy + number)
// Uncaught TypeError: Cannot mix BigInt and other types,
// use explicit conversions

const biggy = 10n
const number = 5

console.log(biggy + BigInt(number))
// 15n

console.log(Number(biggy) + number)
// 15

Ввод: 42145     —>  вывод: 54421
Ввод: 145263   —>  вывод: 654321
Ввод: 123456789  —> вывод: 987654321

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('Форма не отправлена!');
});

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Переход по ссылке отменен!');
});

document.querySelector('.child').addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('Клик на child');
});

document.querySelector('.parent').addEventListener('click', function() {
  console.log('Клик на parent');
});

beeramid(1500, 2); // should === 12
beeramid(5000, 3); // should === 16

        GET /index.html HTTP/1.1
    Host: example.com

        GET /index.html HTTP/1.1
    Host: example.com

        HTTP/1.1 200 OK
    Content-Type: text/html

    <html>
      <head>
        <title>Example</title>
      </head>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>

        <html>
      <head>
        <title>Example</title>
      </head>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>

       h1 {
        color: blue;
    }

document.querySelector('h1').textContent = 'Hello, JavaScript!';

'101?' -> ['1010', '1011']
'1?1?' -> ['1010', '1110', '1011', '1111']

useEffect(() => {
  // Ваш код для побочного эффекта
  return () => {
    // Очистка (необязательно)
  };
}, [зависимости]);

useEffect(() => {
  // Код здесь будет выполнен один раз после инициализации компонента
}, []);

const [count, setCount] = useState(0);

useEffect(() => {
  // Код здесь будет выполнен каждый раз, когда изменяется значение count
  document.title = Вы нажали ${count} раз;
}, [count]); // Зависимости

useEffect(() => {
  const timerID = setInterval(() => {
    // Ваша логика здесь
  }, 1000);

  return () => {
    clearInterval(timerID); // Очистка при размонтировании компонента
  };
}, []); // Эффект выполнится один раз

expandedForm(12); //  '10 + 2'
expandedForm(42); //  '40 + 2'
expandedForm(70304); //  '70000 + 300 + 4'

uniqueInOrder('AAAABBBCCDAABBB')  //   ['A', 'B', 'C', 'D', 'A', 'B']
uniqueInOrder('ABBCcAD')  //  ['A', 'B', 'C', 'c', 'A', 'D']
uniqueInOrder([1,2,2,3,3])  //  [1,2,3]

const booksOfSonya = [ 'Дар', 'Подвиг', 'Защита Лужина', 'Отчаяние' ]
const booksOfNadya = [ 'Подвиг', 'Защита Лужина', 'Дар' ]

const set1 = new Set(booksOfSonya)
const set2 = new Set(booksOfNadya)

console.log(set1.isSupersetOf(set2))
// true
console.log(set2.isSupersetOf(set1))
// false

Mmmm  => []
Super => [2,4]
Apple => [1,5]
YoMama -> [1,2,4,6]