Frontend Interview - собеседования по Javascript / Html / Css

const array = [5, undefined, 0, false, '', null, true, 1]

array[15] = 'новый элемент'
console.log(array)
// [ 5, undefined, 0, false, '', null, true, 1, <7 empty items>, 'новый элемент']

const test = new Array(5)
test[2] = 42

2 in test // true
test.hasOwnProperty(2) // true

0 in test // false
test.hasOwnProperty(0) // false

const test = new Array(5)
test[2] = 42

test.forEach((value, key) => console.log(`значение по ключу ${key}: ${value}`))
// значение по ключу 2: 42

// консоль вывела значение только один раз

const calcEmpty = items => items.reduce(amount => --amount, items.length)

const test = new Array(5)

test[2] = 42
calcEmpty(test) // 4

test[10] = 2
calcEmpty(test) // 9

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // Установить фокус на текстовое поле
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Установить фокус</button>
    </div>
  );
}

export default TextInputWithFocusButton;

import React, { useRef, useEffect, useState } from 'react';

function MeasureDiv() {
  const divRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (divRef.current) {
      const { width, height } = divRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
        Измеряемый элемент
      </div>
      <p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
    </div>
  );
}

export default MeasureDiv;

import React, { Component } from 'react';

class CustomComponent extends Component {
  customMethod() {
    console.log('Метод компонента вызван');
  }

  render() {
    return <div>Custom Component</div>;
  }
}

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.customComponentRef = React.createRef();
  }

  handleClick = () => {
    this.customComponentRef.current.customMethod();
  };

  render() {
    return (
      <div>
        <CustomComponent ref={this.customComponentRef} />
        <button onClick={this.handleClick}>Вызвать метод компонента</button>
      </div>
    );
  }
}

export default ParentComponent;

consonantCount('') => 0
consonantCount('aaaaa') => 0
consonantCount('XaeiouX') => 2

// webpack.config.js
module.exports = {
  entry: './src/index.js',
};

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};

const userInput = "<img src='x' onerror='alert(\"XSS Attack\")'>";
document.getElementById('output').innerHTML = userInput;

const invalidHTML = "<div>Unclosed tag";
document.getElementById('output').innerHTML = invalidHTML;
// Это может привести к неправильному отображению содержимого.

const userInput = "Safe text";
const outputElement = document.getElementById('output');
const textNode = document.createTextNode(userInput);
outputElement.appendChild(textNode);

const userInput = "<div>Safe content</div>";
const outputElement = document.getElementById('output');
outputElement.textContent = userInput;
// Использование textContent гарантирует безопасное добавление текста.

const userInput = "Some user-provided text";
const outputElement = document.getElementById('output');
outputElement.textContent = userInput;

const userInput = "Some user-provided text";
const outputElement = document.getElementById('output');
const paragraph = document.createElement('p');
paragraph.textContent = userInput;
outputElement.appendChild(paragraph);

"CodEWaRs" --> [0,3,4,6]

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hidden-element {
    visibility: hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .hidden-element {
            visibility: hidden;
        }
        .visible-element {
            background-color: lightblue;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="visible-element">Этот элемент видим.</div>
    <div class="hidden-element">Этот элемент скрыт, но сохраняет место.</div>
    <div class="visible-element">Этот элемент тоже видим и расположен после скрытого элемента.</div>
</body>
</html>

['hello', 'world', 'this', 'is', 'great']  =>  'hello world this is great'

const name = 'Alice';
const age = 25;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting);
// Вывод: Hello, my name is Alice and I am 25 years old.

const multiLineString = `This is a string
that spans across
multiple lines.`;

console.log(multiLineString);
// Вывод:
// This is a string
// that spans across
// multiple lines.

const a = 5;
const b = 10;

const result = `The sum of ${a} and ${b} is ${a + b}.`;

console.log(result);
// Вывод: The sum of 5 and 10 is 15.

function toUpperCase(str) {
    return str.toUpperCase();
}

const name = 'Alice';

const loudGreeting = `Hello, ${toUpperCase(name)}!`;

console.log(loudGreeting);
// Вывод: Hello, ALICE!

function tag(strings, ...values) {
    console.log(strings);
    console.log(values);
    return 'Tagged template';
}

const name = 'Alice';
const age = 25;

const taggedResult = tag`Name: ${name}, Age: ${age}`;

console.log(taggedResult);
// Вывод:
// [ 'Name: ', ', Age: ', '' ]
// [ 'Alice', 25 ]
// Tagged template

["Telescopes", "Glasses", "Eyes", "Monocles"]  //   ["Eyes", "Glasses", "Monocles", "Telescopes"]

function greet(name) {
  return `Hello, ${name}!`;
}

function executeFunction(fn, arg) {
  return fn(arg);
}

const result = executeFunction(greet, 'Alice');
console.log(result); // "Hello, Alice!"

function add(x) {
  return function(y) {
    return x + y;
  };
}

const addFive = add(5);
console.log(addFive(3)); // 8

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'Alice' };
    callback(data);
  }, 1000);
}

function handleData(data) {
  console.log(`Received data: ${data.name}`);
}

fetchData(handleData);

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]

const person = {
  name: 'Alice',
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

const greet = person.greet;
greet(); // undefined, так как контекст потерян

const boundGreet = person.greet.bind(person);
boundGreet(); // Hello, Alice

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

"a" = 1, "b" = 2

Input = "The sunset sets at twelve o' clock."
Output = "20 8 5 19 21 14 19 5 20 19 5 20 19 1 20 20 23 5 12 22 5 15 3 12 15 3 11"

<menu>
  <li>
    <button onclick="signIn()">Войти</button>
  </li>
  <li>
    <button onclick="signUp()">Зарегистрироваться</button>
  </li>
</menu>

div {
  rotate: 30deg;
}

.element {
  rotate: x 90deg;
}

.element {
  rotate: 0 0 1 45deg;
}

[1, 1, 2] ==> 2
[17, 17, 3, 17, 17, 17, 17] ==> 3

function reverseString(str) {
  return str.split('').reverse().join('');
}

console.log(reverseString('hello')); // 'olleh'

function reverseString(str) {
  let reversed = '';
  for (let i = str.length - 1; i >= 0; i--) {
    reversed += str[i];
  }
  return reversed;
}

console.log(reverseString('hello')); // 'olleh'

function reverseString(str) {
  if (str === '') {
    return '';
  } else {
    return reverseString(str.substr(1)) + str[0];
  }
}

console.log(reverseString('hello')); // 'olleh'

function reverseString(str) {
  return [...str].reduce((acc, char) => char + acc, '');
}

console.log(reverseString('hello')); // 'olleh'

function reverseString(str) {
  return Array.from(str).reduceRight((acc, char) => acc + char, '');
}

console.log(reverseString('hello')); // 'olleh'

declare_winner(Fighter("Lew", 10, 2), Fighter("Harry", 5, 4), "Lew") => "Lew"
  
Lew attacks Harry; Harry now has 3 health.
Harry attacks Lew; Lew now has 6 health.
Lew attacks Harry; Harry now has 1 health.
Harry attacks Lew; Lew now has 2 health.
Lew attacks Harry: Harry now has -1 health and is dead. Lew wins.

function Fighter(name, health, damagePerAttack) {
        this.name = name;
        this.health = health;
        this.damagePerAttack = damagePerAttack;
        this.toString = function() { return this.name; }
}

@media (prefers-contrast: more) {
  .dialog {
    border: 2px solid #FFFFFF;
  }
}

const input = document.querySelector('.input')

input.addEventListener('change', function (event) {
  console.log(event.target.value)
})

[], false, '', new Array(), null, NaN, undefined, 0, -0, 0n, -0n, '0'.

compareTrash(0, false) => false
compareTrash('', '')   => true
compareTrash([], 0)    => false

  if (false) {
     console.log('Это не выполнится');
   }
   

if (0) {
     console.log('Это не выполнится');
   }

if (-0) {
     console.log('Это тоже не выполнится');
   }

if ("") {
     console.log('Это не выполнится');
   }

if (null) {
     console.log('Это не выполнится');
   }

if (undefined) {
     console.log('Это не выполнится');
   }

if (NaN) {
     console.log('Это не выполнится');
   }

  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 100; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`;
    fragment.appendChild(div);
  }
  document.body.appendChild(fragment);
  

  element.style.width = '100px';
  element.style.height = '100px';
  element.style.backgroundColor = 'red';

  .new-style {
    width: 100px;
    height: 100px;
    background-color: red;
  }
  

  .animated {
    transition: transform 0.3s;
    transform: translateX(100px);
  }
  

  function debounce(func, wait) {
    let timeout;
    return function(...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  }

  window.addEventListener('resize', debounce(() => {
    console.log('Resized!');
  }, 200));
  

  const height = element.offsetHeight;
  element.style.height = out;
  

const height = element.offsetHeight;
element.style.height = ${height + 10}px;

.will-change-transform {
    will-change: transform;
 }

findUniq([ 'Aa', 'aaa', 'aaaaa', 'BbBb', 'Aaaa', 'AaAaAa', 'a' ])  //  => 'BbBb'
findUniq([ 'abc', 'acb', 'bac', 'foo', 'bca', 'cab', 'cba' ])  //  => 'foo'

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример специфичности</title>
    <style>
        p {
            color: black; /* (0, 0, 0, 1) */
        }
        .text {
            color: blue; /* (0, 0, 1, 0) */
        }
        #highlight {
            color: red; /* (0, 1, 0, 0) */
        }
        p#highlight {
            color: green; /* (0, 1, 0, 1) */
        }
    </style>
</head>
<body>
    <p class="text" id="highlight">Этот текст будет зелёным.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример z-index</title>
    <style>
        .box {
            position: absolute;
            width: 100px;
            height: 100px;
        }
        .box1 {
            background-color: red;
            z-index: 1;
            top: 50px;
            left: 50px;
        }
        .box2 {
            background-color: blue;
            z-index: 2;
            top: 80px;
            left: 80px;
        }
    </style>
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>
</body>
</html>

solution(["no", "dog", "on", "good"]) => false
solution(["engine", "endure", "elite"]) => true

a1 = ["arp", "live", "strong"] 

a2 = ["lively", "alive", "harp", "sharp", "armstrong"] 

returns ["arp", "live", "strong"]

a1 = ["tarp", "mice", "bull"] 

a2 = ["lively", "alive", "harp", "sharp", "armstrong"] 

return []

<input
    type="text"
    pattern="([a-zA-Z0-9]\s?)+"
    placeholder="Enter full name"
    required
/>
<span></span>

input + span {
    position: relative;
}

input + span::before {
    position: absolute;
    right: -20px;
    bottom: 0;
}

input:not(:placeholder-shown):invalid {
    border: 2px solid red;
}

input:not(:placeholder-shown):invalid + span::before {
    content: "✖️";
    color: red;
}

input:not(:placeholder-shown):valid + span::before {
    content: "✓";
    color: green;
}

"test"  //  "grfg"

<img
  src="dog.png"
  alt="Шоколадный лабрадор в соломенной шляпе наслаждается
  солнечной погодой на пляже. Рядом лежит кокос с трубочкой
  и миска с собачьим кормом."
>

<a>
  <img src="link-icon.svg" alt="Инструкция по заполнению профиля">
</a>

[0]  //  "even"
[0, 1, 4]  //  "odd"
[0, -1, -5]  //  "even"