Как стилизовать задизейбленный HTML элемент?

:disabled и :enabled легко применяются к любым элементам, которым можно задать атрибут disabled: <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> и <input>.

Часто требуется, чтобы на кнопку отправки формы нельзя было нажать, пока не заполнены все поля этой формы. Проще всего заблокировать кнопку атрибутом disabled. Его проставляют, как правило, при помощи JavaScript. Но недостаточно просто указать его в HTML, нужно ещё и при помощи оформления показать пользователю, что кнопка не активна. Как раз для этого нам пригодится псевдокласс :disabled.

Кнопка будет полупрозрачной:

 button:disabled {
     opacity: 0.5;
 }

👉 @frontendInterview

👉 @frontendInterview

Познакомьтесь, JavaScript.

Вы пока еще не знаете JS. И Кайл Симпсон признается, что тоже его не знает (по крайней мере полностью)… И никто не знает. Но все мы можем начать работать над тем, чтобы узнать его лучше. Сколько бы времени вы ни провели за изучением языка, всегда можно найти что-то еще, что стоит изучить и понять на другом уровне.

Учтите, что, хотя книга и называется «Познакомьтесь, JavaScript», она не для новичков. У нее другая задача: дать обзор тем, в которых необходимо разобраться на начальном этапе изучения JS. Даже если вы уже написали достаточно кода JS, эту книгу не стоит пропускать, возможно, в ваших знаниях есть пробелы, которые необходимо заполнить перед углубленным изучением сложных тем.

👉 @frontendInterview

Are all elements equal

Создайте функцию, которая принимает строку или массив и возвращает true, если все элементы этой строки или этого массива равны.

Примеры:
"aaaaa".eqAll() => true
"abcde".eqAll() => false
[0,0,0].eqAll() => true
[0,1,2].eqAll() => false

"".eqAll() => true
[].eqAll() => true

👉 @frontendInterview

Как сделать блок с раскрывающимся контентом на чистом HTML?

Иногда нужно скрывать какую-то информацию на странице в специальном блоке. Чтобы в любой момент можно было кликнуть на этот блок и развернуть информацию. И свернуть обратно таким же кликом. Такой блок ещё называют «аккордеоном».

Самый простой раскрывающийся блок выглядит вот так:
<details>
<summary>Легенда</summary>
<p>Раскрывающийся текст</p>
</details>

👉 @frontendInterview

👉 @frontendInterview

Для чего используется ключевое слово currentColor в CSS?

Ключевое слова currentColor можно использовать в качестве значения для CSS-свойства, принимающего цвет. Например, background-color. Браузер подставит вместо currentColor текущее значение свойства color.

Пример
Возьмём небольшой кусочек текста, зададим ему нужный цвет текста и добавим тень. В месте, где нужно задавать цвет тени, используем ключевое слово currentColor:
.element {
color: darkblue;
box-shadow: 0 0 5px currentColor;
}

👉 @frontendInterview

Какие бывают области видимости в JS?

Глобальная область видимости
Это самая внешняя коробка из всех. Когда мы «просто объявляем переменную», вне функций, вне модулей, то эта переменная попадает в глобальную область видимости.
Самый известный пример глобальной переменной — это console.
console.log(console)
// Console {debug: function, error: function,
// log: function, info: function, warn: function, …}

Блочная область видимости
Она ограничена программным блоком, обозначенным при помощи { и }. Простейший пример такой области — это выражение внутри скобок:

if (true) {
const a = 42
console.log(a)
// 42
}

console.log(a)
// ReferenceError: Can't find variable: a

Функциональная область видимости
Это область видимости в пределах тела функции. Можно сказать, что она ограничена { и } функции.

function scoped() {
const b = 43
}

console.log(b)
// Reference error.
К переменной b есть доступ только внутри функции scoped.

👉 @frontendInterview

Программируй & типизируй

Причиной многих программных ошибок становится несоответствие типов данных. Сильная система типов позволяет избежать целого класса ошибок и обеспечить целостность данных в рамках всего приложения. Разработчик, научившись мастерски использовать типы в повседневной практике, будет создавать более качественный код, а также сэкономит время, которое потребовалось бы для выискивания каверзных ошибок, связанных с данными

👉 @frontendInterview

Sum of Intervals

Создайте функцию, которая принимает несколько интервалов и возвращают сумму длин этих интервалов. Если интервалы пересекаются, то нужно объединить их и считать за один.

Примеры:
sumIntervals( [
[1,2],
[6, 10],
[11, 15]
] ); // => 9

sumIntervals( [
[1,4],
[7, 10],
[3, 5]
] ); // => 7

sumIntervals( [
[1,5],
[10, 20],
[1, 6],
[16, 19],
[5, 11]
] ); // => 19

👉 @frontendInterview

Как получить все формы на странице через JS?

forms — это поле объекта document. Оно хранит коллекцию всех элементов <form>, которые есть на текущей странице.
Коллекция доступна только для чтения.

Вызывается обращением к свойству объекта document. Так можно получить коллекцию всех форм:
const collection = document.forms

👉 @frontendInterview

👉 @frontendInterview