Glo Academy

😎 @glo_academy

✂️ Состояние элемента в атрибуте вместо трёх классов classList.add('loading') , потом add('error') , где-то забыли снять — и на элементе одновременно висят loading и completed. Какой стиль победит, решает порядок правил в файле. Вместо трёх классов держи состояние в одном data-атрибуте: <div class="order" data-state="loading">…</div> order.dataset.state = 'completed'; .order[data-state="loading"] { opacity: 0.5; }…

🎨 Две карточки в гриде не растягиваются на пол-экрана Сетка на repeat(auto-fit, minmax(240px, 1fr)) отлично выглядит на двенадцати карточках. Но на странице, где карточек две, каждая растягивается на половину экрана, и макет разваливается. Обычно это лечат max-width на карточке или отдельным классом для коротких списков. .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px;…

📐 Лендинг ювелирного магазина Макет лендинга средней сложности без адаптива на русском языке @glo_academy

⚡ Таймаут для fetch без setTimeout Таймаут для fetch обычно собирают из трёх частей: AbortController, setTimeout, который дёргает abort(), и clearTimeout в finally. try { const res = await fetch(url, { signal: AbortSignal.timeout(5000) }); const data = await res.json(); } catch (err) { if (err.name === 'TimeoutError') { // ответа нет 5 секунд } } AbortSignal.timeout(5000) создаёт сигнал, который сам сработает через…

🧰 NumberFlow Цена в калькуляторе тарифа меняется рывком: было 199, стало 249, и глаз не успевает понять, что произошло. Обычно либо оставляют как есть, либо пишут свой счётчик на setInterval, который перебирает числа по одному. NumberFlow крутит каждый разряд отдельно, как барабан механического счётчика: в 199 → 249 сотни поднимаются на единицу, десятки прокручиваются с 9 на 4, последняя девятка стоит на месте.…

Так или не так, скажите? 😂 @glo_academy

✂️ Длинное название не растягивает карточку Название товара на три строки — и кнопки «В корзину» в ряду встают на разной высоте. В JS обрезают по числу символов, но буквы разной ширины: где-то оборвёт на полуслове, где-то не влезет. CSS режет по ширине блока: /* одна строка */ .title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* три строки */ .desc { display: -webkit-box; -webkit-line-clamp:…

🎨 Колонки едут в противоположные стороны при скролле Три колонки карточек: при прокрутке крайние уезжают вверх, средняя — вниз. Раньше это делали слушателем scroll и transform в JS, теперь хватает CSS: .col { animation: up linear both; animation-timeline: view(); animation-range: entry 0% cover 100%; } .col:nth-child(2) { animation-name: down; } @keyframes up { to { translate: 0 -30% } } @keyframes down { to {…

📐 Лендинг туристической страховки Макет средней сложности с адаптивом на русском языке @glo_academy | #макеты