В этой шпаргалке — методы для работы с картами (Map) в JS: создание, добавление и удаление элементов, проверка наличия ключей, перебор данных и очистка коллекции. Это основа для хранения пар «ключ → значение», где ключи могут быть не только строками, но и объектами или функциями.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19❤7👍6
В этом посте - анимация, которая имитирует набор текста на клавиатуре. Всё работает на чистом CSS!
Принцип работы:
• Свойство steps() в анимации ограничивает показ текста посимвольно;
• border-right используется как курсор, а keyframes blink заставляет его мигать;
• Количество шагов (steps(n,end)) и ширину в ch подбираем под длину текста;
• Для доступности добавляем prefers-reduced-motion.
Приём отлично подходит для hero-секций, заголовков и промо-блоков, добавляя динамики и «живости» интерфейсу.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27❤7🔥6
Привет! В этом гайде создаём кнопку «Скопировать» рядом с текстовым полем. При клике содержимое попадает в буфер обмена, а кнопка меняет состояние, показывая обратную связь пользователю.
Ключевые моменты:
• HTML: разметка с input и кнопкой.
• CSS: цвета, тени, интерактивные эффекты наведения.
• JS: использование Clipboard API и асинхронной логики для копирования.
Подходит для форм, сниппетов кода, документации и любых интерфейсов, где важно быстро скопировать данные.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍34🔥10❤7🤝4
В этой шпаргалке собраны ключевые методы работы с Promise: от ошибочного завершения до параллельного выполнения задач и контроля всех статусов. Эти приёмы применяются при построении API-запросов, пайплайнов обработки данных и разработке отказоустойчивых асинхронных сервисов.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥27❤9👍7🤝4
Нативный выбор цвета через браузерный API
Хотите встроить в проект пипетку как в Photoshop — без лишних библиотек? В Chrome, Edge и Opera уже есть нативный
Шаг 1 — добавляем кнопку:
Шаг 2 — подключаем
Шаг 3 — открываем пипетку и используем цвет:
Пипетка выбирает цвет с экрана и тут же применяет его к фону, а в консоли появляется hex-код.
🔥 Отличный инструмент для кастомизации, темизации и цветовых палитр прямо в браузере.
📣 Code Ready | #практика
Хотите встроить в проект пипетку как в Photoshop — без лишних библиотек? В Chrome, Edge и Opera уже есть нативный
EyeDropper API. Работает по HTTPS и в последних версиях Chromium-браузеров.Шаг 1 — добавляем кнопку:
<button id="pickColor">Выбрать цвет</button>
Шаг 2 — подключаем
EyeDropper:if (!window.EyeDropper) {
alert("Ваш браузер не поддерживает EyeDropper API");
}Шаг 3 — открываем пипетку и используем цвет:
const btn = document.getElementById("pickColor");
btn.addEventListener("click", async () => {
const eyeDropper = new EyeDropper();
const { sRGBHex } = await eyeDropper.open();
console.log("Цвет:", sRGBHex);
document.body.style.backgroundColor = sRGBHex;
});Пипетка выбирает цвет с экрана и тут же применяет его к фону, а в консоли появляется hex-код.
🔥 Отличный инструмент для кастомизации, темизации и цветовых палитр прямо в браузере.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤23🔥8👍7
Привет! В этом гайде разбираем простую форму с разделением на несколько шагов. Каждый шаг сопровождается прогресс-баром, который плавно заполняется при переходе дальше.
Ключевые моменты:
• HTML: разметка шагов с полями ввода и кнопками.
• CSS: стилизация прогресс-бара и кнопок с плавными эффектами.
• JS: переключение шагов и обновление прогресса.
Такая форма идеально подходит для регистраций, анкет и опросов, когда нужно разбить ввод данных на простые шаги.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤28👍14🤝10🔥5