👩‍💻 Фильтрация списка через поле ввода

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

Требования:

• При вводе текста выполняется фильтрация: сравниваем введённую строку с каждым элементом списка.
• Элементы, соответствующие фильтру, остаются видимыми, остальные скрываются.

Решение задачи🔽

<input type="text" id="filterInput" placeholder="Фильтр...">
<ul id="items">
<li>Яблоко</li>
<li>Банан</li>
<li>Апельсин</li>
<li>Груша</li>
</ul>

const input = document.getElementById('filterInput');
const listItems = document.querySelectorAll('#items li');

input.addEventListener('input', () => {
const filter = input.value.toLowerCase();
listItems.forEach(li => {
li.style.display = li.textContent.toLowerCase().includes(filter) ? '' : 'none';
});
});

👩‍💻 Новые возможности CSS за 2024 год

Центрирование без боли, улучшенный тёмный режим, анимация скрытых элементов и даже решения математических задач — меньше сложностей, больше возможностей.

Читать...

👩‍💻 Broken Glass Effect

Сцена с эффектом сломанного стекла в месте клика. Сделана на CSS и JavaScript.

Открыть код...

🔎 Подборка вакансий для сеньоров

Senior Frontend разработчик
🟢JavaScript, TypeScript, Angular, React, jQuery, RxJS, HTML5, CSS, SCSS, Docker, Git
🟢от 150 000 ₽ до вычета налогов | 3–6 лет

Senior Frontend Developer
🟢TypeScript, React, Redux, MobX, Sass, Less, Ant Design, Material UI, Webpack, Git, Jira
🟢до 360 000 ₽ на руки | 3–6 лет

Frontend-разработчик
🟢HTML, CSS, JavaScript, jQuery, TypeScript, React, Vue, Webpack, Git
🟢от 220 000 ₽ на руки | 3–6 лет

Senior Frontend-разработчик JavaScript/React
🟢JavaScript, TypeScript, React, Redux, Redux RTK, ViteJS, Docker, GitLab CI/CD, WebRTC
🟢от 300 000 до 400 000 ₽ на руки | 3–6 лет

📈 Подборка статей для вашей карьеры

• Выбираем подарки с умом

• 10 лучших приёмов логирования для разработчиков

• Из белой каски и грязных сапог в белый халат и тапки

• Погружение в Web3: изучаем Node.js на открытом курсе

• Чем стартап отличается от бизнеса и что выбрать

⚙️ Vite 6.0: Новые возможности и будущее веб-разработки

Новая мажорная версия Vite от 26 ноября 2024 года — первый релиз после анонса VoidZero. Рассмотрим ключевые изменения и будущие векторы развития инструмента для сборки приложений.

Читать...

⚙️ Что такое теневые DOM-деревья (Shadow DOM) и как они работают?

Shadow DOM — это ключевая часть технологии Web Components, которая позволяет создавать инкапсулированные области DOM с собственным стилем и поведением. Теневые DOM-деревья изолированы от остального документа, что предотвращает конфликты стилей и упрощает создание переиспользуемых компонентов.

➡️ Пример:

// Создание элемента с Shadow DOM
const host = document.createElement('div');
const shadowRoot = host.attachShadow({ mode: 'open' });

// Добавление стилей и контента
shadowRoot.innerHTML = `
  <style>
    p {
      color: blue;
    }
  </style>
  <p>Это текст внутри Shadow DOM</p>
`;

document.body.appendChild(host);
console.log(document.querySelector('p')); // null (элемент скрыт из глобального DOM)

🗣️ В этом примере текст внутри Shadow DOM изолирован. Стили из Shadow DOM не влияют на остальную страницу, и наоборот. Shadow DOM полезен для создания самодостаточных UI-компонентов.

🖥 Подробнее тут

🔎 Подборка вакансий для лидов

Lead React Native Developer
🟢React Native, JavaScript, TypeScript, RESTful API, Git, Docker
🟢от 250 000 ₽ на руки | 3–6 лет

Lead Frontend Developer (React)
🟢React, TypeScript, Redux, Webpack, SSR, HTML, JavaScript, Git
🟢Уровень дохода не указан | 3–6 лет

Ведущий Motion 3D / Front End Разработчик
🟢Three.js, WebGL, GLSL, React, TypeScript, Node.js, TailwindCSS, Vite, Git, Figma
🟢от 400 000 до 1 000 000 ₸ на руки | 3–6 лет

🔎 Подборка зарубежных вакансий

Фронтенд-разработчик
🟢JavaScript, HTML5, CSS3, SQL, React, Angular, Ember, Git, JIRA
🟢от 190 000 ₽ на руки | 3–6 лет

Frontend-разработчик
🟢JavaScript, HTML, CSS
🟢от 250 000 ₸ на руки | 1–3 года

Frontend-разработчик сайтов на WordPress / Верстальщик сайтов / PHP программист
🟢HTML, CSS, JavaScript, PHP, WordPress, WooCommerce
🟢от 100 000 до 400 000 ₸ на руки | 1–3 года

👩‍💻 TS Extend: полезная утилитарная функция для расширения type

Статья объясняет ограничения TypeScript 5.7 в работе с расширением типов, демонстрирует проблему интерсекции с одинаковыми свойствами и предлагает утилиту Extend для корректной обработки таких случаев.

Читать...

👩‍💻 Уникальные значения из массива

Напишите функцию, которая принимает массив и возвращает новый массив, содержащий только уникальные значения из исходного массива.

Пример:

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = getUniqueValues(numbers);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Решение задачи🔽

function getUniqueValues(arr) {
return [...new Set(arr)];
}

// Пример использования
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = getUniqueValues(numbers);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

🔝 Самые интересные статьи за последние дни:

• RUINSWORLD: Многопользовательский шутер с открытым миром для браузера на js/ts, Three и Vue. Бета-версия

• Рецепты TypeScript: простое тестирование типов

• Как я создала приложение, которое решает, что мне есть

• Vite 6.0: Новые возможности и будущее веб-разработки

• Наиболее эффективные методы улучшения Core Web Vitals

🛡 Парольная защита статичной HTML-страницы на JS

Как защитить веб-страницы паролем без серверной поддержки? Инструменты StatiCrypt и Portable Secret помогут зашифровать HTML с использованием AES-256. Статические страницы остаются безопасными даже на публичном хостинге.

Читать...

👩‍💻 Таймер обратного отсчёта

Создайте простую страницу с таймером обратного отсчёта. Пользователь вводит количество секунд, нажимает кнопку "Старт", и таймер начинает обратный отсчёт до нуля. После окончания таймера на экране отображается сообщение "Время вышло!".

Решение задачи🔽

<input type="number" id="timeInput" placeholder="Введите секунды">
<button id="startButton">Старт</button>
<div id="timer">0</div>

const input = document.getElementById('timeInput');
const button = document.getElementById('startButton');
const timerDisplay = document.getElementById('timer');
let timerId;

button.addEventListener('click', () => {
const seconds = parseInt(input.value, 10);
if (isNaN(seconds) || seconds <= 0) {
timerDisplay.textContent = 'Введите корректное число!';
return;
}

clearInterval(timerId);
let remainingTime = seconds;

timerDisplay.textContent = remainingTime;
timerId = setInterval(() => {
remainingTime -= 1;
if (remainingTime <= 0) {
clearInterval(timerId);
timerDisplay.textContent = 'Время вышло!';
} else {
timerDisplay.textContent = remainingTime;
}
}, 1000);
});

🔎 Подборка вакансий для джунов

Frontend-разработчик junior +
🟢JavaScript, Vue 2, Vuex, Vite, HTML, CSS, SCSS, Git
🟢от 50 000 до 70 000 ₽ | 1–3 года опыта

Frontend-разработчик (Vue.js)
🟢JavaScript, Vue.js, Nuxt.js, Vuex, Pinia, CSS, HTML5, SASS, RESTful API, Git
🟢от 100 000 до 130 000 ₽ | 1–3 года опыта

Junior React Developer
🟢JavaScript, React, HTML, CSS3, GitHub, Redux, Less, Sass
🟢от 60 000 ₽ | Без опыта

👩‍💻 Cube & Dots Loader

Анимированная загрузка в виде точек и куба. Сделана на чистом CSS.

Открыть код...

⚙️ В чем разница между == и === в JavaScript?

В JavaScript операторы == и === используются для сравнения, но ведут себя по-разному. == выполняет нестрогое сравнение, при котором JavaScript может преобразовать типы данных для сопоставления значений. В отличие от него, === выполняет строгое сравнение, проверяя как значение, так и тип данных, без приведения типов.

➡️ Пример:

console.log(5 == '5');   // true, так как '5' преобразуется к числу
console.log(5 === '5');  // false, так как разные типы данных

console.log(null == undefined);  // true, при нестрогом сравнении они считаются равными
console.log(null === undefined); // false, строгий оператор учитывает типы данных

🗣️ Использование === рекомендуется для избегания ошибок, связанных с преобразованием типов. Это помогает сделать код более предсказуемым и читаемым.

🖥 Подробнее тут

📝 Подборка вакансий для мидлов

Наставник на онлайн-курс "Frontend-разработчик"
• Angular, HTML, CSS, JavaScript, Node.js, Webpack, JQuery, TypeScript
• от 25 000 ₽ на руки | 1–3 года

React разработчик
• React, Redux, TypeScript, Material-UI, Webpack
• Уровень дохода не указан | 1–3 года

Middle React Developer
• React, Next.js, TypeScript, Effector, TailwindCSS, WebSockets, Семантическая и валидная верстка
• от 150 000 ₽ на руки | 1–3 года

👩‍💻 CSS :has() — Псевдокласс, который давно ждали

Преобразуйте свой CSS с помощью псевдокласса :has(), позволяющего стилизовать элементы на основе их дочерних элементов.

Читать...

👩‍💻 Простой калькулятор с динамическим вводом

Создайте калькулятор, который позволяет выполнять основные арифметические операции (сложение, вычитание, умножение, деление). Пользователь вводит два числа и выбирает операцию из выпадающего списка. Результат отображается автоматически.

Требования:

• Два текстовых поля для ввода чисел.
• Выпадающий список для выбора операции.
• Динамическое отображение результата при изменении любого из входных значений.

Решение задачи🔽

<div>
<input type="number" id="num1" placeholder="Введите первое число">
<select id="operation">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">×</option>
<option value="divide">÷</option>
</select>
<input type="number" id="num2" placeholder="Введите второе число">
</div>
<div>
<h3>Результат: <span id="result">0</span></h3>
</div>

const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const operation = document.getElementById('operation');
const result = document.getElementById('result');

function calculate() {
const value1 = parseFloat(num1.value) || 0;
const value2 = parseFloat(num2.value) || 0;

let res = 0;
switch (operation.value) {
case 'add':
res = value1 + value2;
break;
case 'subtract':
res = value1 - value2;
break;
case 'multiply':
res = value1 * value2;
break;
case 'divide':
res = value2 !== 0 ? value1 / value2 : 'Ошибка (деление на 0)';
break;
}

result.textContent = res;
}

[num1, num2, operation].forEach(element => {
element.addEventListener('input', calculate);
});