Javascript js frontend

Checkboxes and radio buttons

Чекбоксы и переключатели с применением SVG-галочки. Реализованы на чистом CSS.

#css

In-n-out box-shadow animation 

Анимация теней для окна ввода-вывода, реализованная на CSS и JavaScript.

#js

Just Ice

Создано на canvas и webGL.

#js

CSS only order process steps

Создано без использования JS. Каждый шаг - это радиокнопка, при активации которой задаются определенные стили.

#css

Volume button knob 

Кнопка увеличения/уменьшения громкости, реализованная на CSS (SCSS) и JavaScript (TypeScript)

#js

News App

Концептуальное приложение, в котором все переходы осуществляются при помощи свайпов.

#css

Sharp & Glowing dark card

Создано и анимировано на HTML и SCSS.

#css

Hopdot Loader

Плавный и приятный прелоадер в виде перекатывающихся точек, реализованный с помощью GSAP.

#js

Fancy Swiper slider

Оригинальный слайдер, созданный с использованием библиотеки Swiper.

#js

Gradient background with waves

Анимированный градиентный фон с волнами, реализованный на чистом CSS.

#css

CSS Galaxy Button

Верстка создана на HTML и CSS. На JS создаются частицы с рандомными значениями, которые записываются в CSS-переменные.

#js

Mobile Menu Animation

Оригинальный эффект раскрытия меню.

#js

Custom Tooltip

Меню при нажатии на которое появляется пользовательская подсказка. Написано на чистом CSS.

#css

JavaScript. Задача

Дан лицензионный ключ, представленный в виде строки S. Строка разделена на N + 1 подгруппу, разделенных N дефисами. Также дано число K.

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

Входные данные: строка S, состоящая только из букв английского алфавита, цифр и дефисов. K - целое число.

Вывод: преобразованная строка.

Примеры:

S = "5F3Z-2e-9-w", K = 4
Output: "5F3Z-2E9W"

S = "2-5g-3-J", K = 2
Output: "2-5G-3J"

Ответ

Frosted Glass loader

Оригинальный загрузчик в виде svg картинки, анимируемой библиотекой gsap.

#js