Привет! В этом гайде создаём звёздный рейтинг, где каждая звезда — интерактивная кнопка, а подпись оценки меняется динамически.
Ключевые моменты:
• HTML: кнопки <button> с data-value и aria-label.
• CSS: hover-анимация, подсветка и масштабирование.
• JS: подсветка, фиксация оценки и динамическая подпись.
Подходит для отзывов, профилей пользователей и интерактивных интерфейсов.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤29🔥11👍9🤝2
Эта шпаргалка по ключевым приёмам работы с RegExp: квантификаторы, группы, классы символов, флаги и проверки начала или конца строки. Подойдёт для валидации данных, парсинга текста и оптимизации поиска.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24👍11❤8
В этом посте - эффектный приём, который позволяет переворачивать карточку при наведении только средствами html/css. Идеально подходит для подсказок или скрытого превью.
Как работает:
• Используем контейнер с перспективой, чтобы задать 3D эффект.
• Cоздаём «внутреннюю» обёртку, которая вращается.
• Стороны карточки располагаем в одной плоскости и скрываем заднюю.
• При наведении карточка поворачивается, открывая обратную сторону.
Приём легко кастомизируется: можно добавить текст, иконки или даже интерактивный контент.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥38❤15👍14
Привет! В этом гайде создадим меню, которое появляется по правому клику мыши с кастомным дизайном.
Ключевые моменты:
• HTML: контейнер и список элементов меню.
• CSS: стиль меню и hover эффекты.
• JS: обработка события contextmenu и позиционирование под курсором.
Подходит для интерактивных панелей управления, редакторов и UI с кастомной логикой.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤24👍13🔥9🤝4
This media is not supported in your browser
VIEW IN TELEGRAM
Настоящая находочка для тех, кто пишет HTML, CSS, JavaScript, интересуется новинками Web API, продуктивностью и доступностью. Здесь регулярно появляются статьи, гайды и приёмы, которые реально прокачивают ваш фронтенд-скилл.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤13🔥10👍8😁1
Простой парсер погоды с выводом текущей температуры!
Напишем скрипт, который берет данные о погоде в вашем городе и выводит их в удобном виде.
Задаем функцию, которая получает данные с API Open-Meteo:
Координаты вашего города (например, Москва):
Выведем температуру и скорость ветра:
🔥 Получаем свежие данные о погоде — полезно для проектов или ботов!
📣 Code Ready | #практика
Напишем скрипт, который берет данные о погоде в вашем городе и выводит их в удобном виде.
Задаем функцию, которая получает данные с API Open-Meteo:
async function getWeather(lat, lon) {
const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t_weather=true`;
const res = await fetch(url);
return (await res.json()).current_weather;
}Координаты вашего города (например, Москва):
const moscowCoords = [55.45, 37.37];
Выведем температуру и скорость ветра:
getWeather(...moscowCoords).then(weather => {
console.log(`Температура: ${weather.temperature}°C, Ветер: ${weather.windspeed} км/ч`);
});🔥 Получаем свежие данные о погоде — полезно для проектов или ботов!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥23👍19❤12
This media is not supported in your browser
VIEW IN TELEGRAM
Сначала ты осваиваешь html/css. Затем завершаешь путь с react/p5.js - создаёшь динамичные приложения с использованием хуков и событий. Каждый этап сопровождается практическими заданиями, которые помогают закрепить полученные знания.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥15❤9
Шпаргалка по ключевым приёмам обработки ошибок: try, catch, finally, создание кастомных ошибок, логирование и работа с промисами. Подойдёт для надежного кода, валидации данных и отладки сложных сценариев.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥20🤝12❤7