Code Ready | Frontend

0427 (2)(1).gif

302.1 KB

✅ Encrypted Password

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

👨‍💻 Готовый код: Ссылочка

@code_ready | #кодпен

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥50👍16👎2

8.79K views09:24

✅ Настраиваемый перенос строки

Часто ли у вас возникала проблема, что большой объем текста с длинными словами выходит за рамки контейнера?
Вместо того, чтобы задавать переносы вручную, можно воспользоваться свойством hyphens.

Оно позволяет позволяет задавать перенос строки по значению:
• auto — автоматически, в зависимости от языка
• none — без переносов
• manual — настраиваемое вручную

Не забудьте указать значение языка в теге <html lang> для корректной работы свойства.

@code_ready | #свойство #css

🔥75👍22

9.49K views14:02

✅ Шпаргалка по регулярным выражениям

Эта шпаргалка представляет набор основных методов для создания и использования регулярных выражений в JavaScript. В ней содержатся все основные операции.

@code_ready | #шпаргалка #js

👍85🔥33👎3

10.7K views06:29

✅ Горячие клавиши для быстрой верстки

• Ctrl + F2 — Выделяет все вхождения текущего слова.

• Alt + ↑ / ↓ — Переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш.

• Shift + Tab — Удаляет отступы.

@code_ready | #клавиши

👍82🔥21👎4

11.1K views13:08

0:09

✅ Делаем генератор штрих-кодов

Данный код позволяет генерировать различные штрих-коды с помощью библиотеки JsBarcode.
Она позволяет создавать штрихкоды разных форматов, так и кастомизировать текст под ними в едином шаблоне.

<input type="text" id="barcodeValue">
<button id="generateButton">Создать штрих-код</button>
<canvas id="barcodeCanvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>

const barcodeValueInput = document.getElementById("barcodeValue");
const barcodeCanvas = document.getElementById("barcodeCanvas");
const generateButton = document.getElementById("generateButton");
function generateBarcode() {
    let barcodeValue = barcodeValueInput.value;
    JsBarcode(barcodeCanvas, barcodeValue);
}
generateButton.addEventListener("click", generateBarcode);

@code_ready | #обучение #js

👍63🔥21👎6

12.8K views06:00

👋 Всем привет! В этом посте, хочу поделиться самыми полезными и интересными постами, которые выходили на этом канале:

1. Шпаргалки:
• Методы массива и Методы строк
• CSS Grid
• Обработчики событий

2. Разработка на JS:
• Отправка уведомлений
• Переключение видимости пароля
• Генератор QR кода

3. Горячие клавиши:
• Для быстрой верстки
• Дополнительные

4. Плагины:
• Создание скриншотов
• Исправление орфографических ошибок

⚠️ На канале сущесвует множество рубрик, их можно найти по специальным хештегам (пример #свойство или #обучение)

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥53👍24👎5

10.4K viewsedited 13:55

✅ Шпаргалка Flexbox позиционирования

Flexbox - позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.

@code_ready | #css #шпаргалка

👍91🔥31

9.12K views11:52

0:06

✅ Создание градиентного фона

В коде создается анимированный градиентный фон внутри div элемента. В Css мы определяем стили для этого div, включая его размеры, радиус скругления углов и анимацию градиентного фона.

div {
    width: 320px;
    height: 220px;
    background: linear-gradient(45deg, #64b5f6, #81c784, #ffeb3b, #ff8a65);
    background-size: 400% 400%;
    animation: gradientAnimation 7s ease infinite;
    border-radius: 15px;
  }
@keyframes gradientAnimation {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
  }

@code_ready | #обучение #css

👍77🔥25

8.38K views13:18

@code_ready | #консоль

🔥22👍8

7.28K views07:03

Что будет в консоли?

Anonymous Quiz

🔥30👍19😁8👎2

2.29K voters6.9K views07:04

0:08

✅ Генератор паролей с задаваемой длинной

Этот пример создает простой генератор паролей, который при нажатии кнопки, генерирует случайный пароль с задаваемой в верхней форме длинной, из символов из указанных в charset.

<div class="password-generator">
<input type="text" id="passwordLength" placeholder="Длина пароля">
<input type="text" id="password" readonly>
<button onclick="generatePassword()">Генерировать</button></div>

function generatePassword() {
const length = parseInt(document.getElementById("passwordLength").value);
const charset =
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+";
let password = "";
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charset.length);
password += charset[randomIndex];}
document.getElementById("password").value = password;}

В комментариях я оставлю Css код, для стилизации генератора.

@code_ready | #обучение #js

🔥43👍17😁3

6.83K viewsedited 14:46

@code_ready | #собеседование

✅ Что такое замыкание в JavaScript?

Замыкание - это особенность языка, когда функция имеет доступ к переменным из области видимости внешней функции, даже после того, как внешняя функция завершила выполнение. Это возможно благодаря тому, что функция запоминает свою лексическую область видимости в момент объявления.

В этом примере функция innerFunction является замыканием, потому что она имеет доступ к переменной outerVariable, которая была определена во внешней функции outerFunction.

Замыкание используется для:
• Использования в качестве приватных переменных
• Обработки событий и калбеков
• Реализации фабричных функций
• Рекурсии

🔥35👍18👎6

6.89K views08:29

✅ Обрезка элемента по заданной области

Для создания красивого современного дизайна часто возникает потребность обрезать фотографии на сайте. А ведь они могут меняться по несколько раз в день!

Очень кстати, приходится CSS свойство clip-path, позволяющее изменять форму изображений как угодно.

Основными значениями являются:
• polygon() — для фигуры,заданной по точкам
• inset (верх, право, низ,лево) — для прямоугольной области с внутренней тенью
• circle (радиус, центр круга) — для скругления области
• ellipse (радиусы по x и y) — для создания эллиптической области обрезки

@code_ready | #свойство #css

👍51🔥10😁1

6.77K views15:03

0:04

✅ Анимация текста в пару строк

С помощью библиотеки cssanimation, можно создать интересные анимации на свой текст.
Подключаем библиотеку через тег <link>, и указываем значения анимации в классе нужного тега, прямо в html.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<h1 class="welcome-text animate__animated animate__lightSpeedInLeft">Добро пожаловать!</h1>

Css код для стилизации текста, оставлю в комментариях.

@code_ready | #обучение #css

👍31🔥11😁2

6.61K views07:03

0507 (1)(6).gif

2.4 MB

✅ Создание CSS-шаблона для html

eCSStractor - это плагин для VSCode, который помогает разработчикам извлекать CSS-стили из HTML-файлов. Он предоставляет инструменты для автоматического извлечения стилей из HTML-кода и создания соответствующих CSS-правил.

@code_ready | #плагин

👍51🔥15

6.8K views15:05

👋🏼 Всем привет! Я автор данного канала, и на днях я решил создать абсолютно новый канал про дизайн — @time_design. Почему про дизайн? Не знаю, так получилось 😁. Но в планах создать в мае ещё 1 канал для fullstack разработчиков (общее IT) и примерно в июне наконец-то про бэкенд. 👩‍💻

Но пока что, подписывайтесь на мой новый авторский
✈️ канал @time_design.

Там я делюсь полезными обучениями в таких программах, как Figma, Photoshop, Illustrator, Blender3D, рассказываю про актуальные тренды, фишки и новости в мире дизайна 🕘

Please open Telegram to view this post

VIEW IN TELEGRAM

👍30🔥9👎5

6.39K views17:27

0:04

✅ Переключение языка страницы

Данный код представляет собой реализацию переключения языка страницы, код упрощен с благодаря библиотеки JQuery.
Устанавливается она с помощью тега script по ссылке.

<h1 data-i18n="title"></h1>
<p data-i18n="description"></p>
<button class="lang-button" data-lang="en">EN</button>
<button class="lang-button" data-lang="ru">RU</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

const translations = {
  en: {
   title: "Welcome to my website!",
   description: "This is a simple website example.",},
  ru: {
   title: "Добро пожаловать на мой сайт!",
   description: "Это простой пример сайта.",},};
function setLanguage(lang) {
  $("[data-i18n]").each(function () {
    const key = $(this).data("i18n");
    $(this).text(translations[lang][key]);
  });}
$(".lang-button").click(function () {
  const lang = $(this).data("lang");
  setLanguage(lang);});
setLanguage("en");

@code_ready | #обучение #js

👎43👍28🔥6😁1

6.47K views07:03