Javascript js frontend
9.99K subscribers
421 photos
158 videos
15 files
309 links
Канал для начинающих JavaScript разработчиков. Если вы приступаете к изучению JS или FrontEnd в целом - этот канал для вас.

@anothertechrock

РКН: https://kurl.ru/LwANe
Download Telegram
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"

Ответ
This media is not supported in your browser
VIEW IN TELEGRAM
Custom Tooltip

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

#css
This media is not supported in your browser
VIEW IN TELEGRAM
Mobile Menu Animation

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

#js
JavaScript. Что будет выведено в консоль?

'❤️' === '❤️'
Anonymous Quiz
76%
true
14%
false
5%
Сообщение об ошибке
5%
Посмотреть ответы
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Galaxy Button

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

#js
This media is not supported in your browser
VIEW IN TELEGRAM
Gradient background with waves

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

#css
This media is not supported in your browser
VIEW IN TELEGRAM
Fancy Swiper slider

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

#js
This media is not supported in your browser
VIEW IN TELEGRAM
Hopdot Loader

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

#js
This media is not supported in your browser
VIEW IN TELEGRAM
Sharp & Glowing dark card

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

#css
This media is not supported in your browser
VIEW IN TELEGRAM
News App

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

#css
This media is not supported in your browser
VIEW IN TELEGRAM
Volume button knob 

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

#js
This media is not supported in your browser
VIEW IN TELEGRAM
CSS only order process steps

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

#css
Media is too big
VIEW IN TELEGRAM
Just Ice

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

#js
This media is not supported in your browser
VIEW IN TELEGRAM
In-n-out box-shadow animation 

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

#js
This media is not supported in your browser
VIEW IN TELEGRAM
Checkboxes and radio buttons

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

#css
Все говорят, что работы в айти стало меньше...

На самом деле, работы полно. Мы подготовили 7 правильных каналов с вакансиями для тестировщиков, аналитиков, проджект-менеджеров и программистов.

В чем фишка этих каналов?

— зарплатная вилка🍴во всех вакансиях
— еженедельные подборки стажировок для начинающих — как здесь (для QA), здесь (для PM) и здесь (для BA&SA)
— быстрый телеграм/email контакт для прямой связи с рекрутером
— удобная навигация по уровням/условиям работы/направлениям тестирования

▪️QA Jobs — работа для тестировщика
▪️PM Jobs — работа для Project и Product менеджера
▪️BA & SA Jobs — работа для бизнес- и системых аналитиков
▪️C# & .NET Jobs — работа для C# инженеров
▪️DS&ML Jobs — работа для DS инженеров
▪️PHP Jobs — работа для PHP разработчиков
▪️JAVA Jobs — работа для Java разработчиков

Подписаться на все каналы сразу
This media is not supported in your browser
VIEW IN TELEGRAM
Unicycle Range Slider

Ползунок диапазона с отображением числового значения на флаге. Реализован с помощью CSS и JavaScript.

#js
This media is not supported in your browser
VIEW IN TELEGRAM
Sticky Slider Navigation

Слайдер, основанный на якорных ссылках, созданный на HTML, SCSS и JS.

#js
This media is not supported in your browser
VIEW IN TELEGRAM
Snow Fox

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

#css
This media is not supported in your browser
VIEW IN TELEGRAM
FLIP image grid modal

Анимация реализована при помощи библиотеки gsap.

#js
This media is not supported in your browser
VIEW IN TELEGRAM
Animated Background | Pure CSS

Анимация движущегося фона, реализованная на чистом CSS.

#css