✅ Тег <optgroup>

Тег <optgroup> в HTML используется внутри тега <select> для группировки пунктов списка выбора. Он позволяет создавать подгруппы или категории для удобства пользователя. Внутри тега <optgroup> вы можете размещать один или несколько тегов <option>, представляющих отдельные пункты выбора.

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetales">
    <option value="carrot">Carrot</option>
    <option value="potato" disabled>Potato</option>
  </optgroup>
</select>



@code_ready | #практика #html

✅ Делаем генератор паролей

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

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

function generatePassword() {
  const length = 12;
  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;
}

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

Всем привет! По прошлому голосованию, мне предложили множество прикольных идей для нового канала, и я решил создать, 1 канал про фронтенд и бэкенд вместе. Объясняю идею:

Будет создан канал "Roadmap Ready", в нем я буду публиковать:

1. Полезные ссылки на статьи, видео с ютуба, книги, кодпены, репозитории и т.д. Все эти ресурсы я буду скидывать про фронтенд и бэкенд.
2. Затем, будет идти тест про эту тему (консоль, опрос, true/false), и в комментариях объяснение. Примерно как сейчас в этом канале #консоль, но добавится ещё и бэкенд опросы (Python, PHP...)
3. Ну и конечно же, будет разбор вопросов с собеседований (codewars). Также как на этом канале #собеседование. Но добавится бэкенд.

Как вам идея нового канала? Пишите мнение в комментариях и ставьте реакцию 🔥

В этом канале будут такие языки программирования как: (Html, Css, JavaScript, Python, Php, Java, и возможно что то ещё)

✅ Улучшение читаемости кода

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

@code_ready | #плагин

Всем привет! Сейчас хочу поделиться, лучшими шпаргалками, которые я делал для этого канала. Судя по вашим репостам и реакциям, вот лучшие:

1. Регулярные выражения

2. Обработчики событий

3. Методы массива

4. Работа с DOM

5. Основные операторы

Ну а все подобные шпаргалки, можно посмотреть с помощью одного хештега #шпаргалка. 🔥

✅ Переключаем видимость пароля

Этот код создает поле ввода пароля и чекбокс, который при активации переключает видимость пароля. При выборе чекбокса, тип ввода пароля меняется с "password" на "text" и наоборот.

<input type="password" id="passwordInput">
  <input type="checkbox" id="showPasswordCheckbox"> Показать пароль

const passwordInput = document.getElementById('passwordInput');
const showPasswordCheckbox = document.getElementById('showPasswordCheckbox');
showPasswordCheckbox.addEventListener('change', function() {
    if (showPasswordCheckbox.checked) {
        passwordInput.type = 'text';
    } else {
        passwordInput.type = 'password';
}});

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

✅ Горячие клавиши для ускорения верстки

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

• Ctrl + Shift + ← / → — выделит слова после или перед курсором.

• Alt — множественный ввод. Поможет написать одно и то же сразу в нескольких местах.

@code_ready | #клавиши

✅ Шпаргалка по методам строк

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

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

Всем новоприбывших и старикам этого канала, привет)
На этой неделе Я закрывал продажи рекламы, ну чтобы вы отдохнули от нее 😁, но хочу сказать, что уже продажи открыты, и скорее всего, каждый день будет выходить 1 реклама.

На качество постов это не повлияет, наоборот, даже полезно будет смотреть и подписываться на новые, интересные каналы про веб разработку. 1 реклама на 2-3 поста - вроде-бы нормально)

Та и монетизировать канал надо, получать деньги с него. Как говорили подписчики под 1 постом,

Бесплатно ничего не делай, цени свой труд.

Поэтому, думаю это неплохо, делитесь своим мнением в комментариях и ставьте реакции 👍🔥 если согласны.

✅ Создание крутых скриншотов кода

CodeSnap — плагин VSCode, предназначенный для создания красивых скриншотов кода.

Основные возможности: Выбор участка кода, Настройка внешнего вида и Экспорт в различные форматы.

Чтобы понять его интерфейс и научиться правильно использовать, я оставляю ссылку на видео для настройки этого плагина.

@code_ready | #практика

✅ Запрос разрешения и отправка уведомлений

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

<button class="button">Показать сообщение</button>

const notifyBtn = document.querySelector(".button");
const reqestPermission = function () {
  if (!("Notification" in window)) {
    throw new Error ("Браузер не поддерживает уведомления");
  }
  Notification.requestPermission().then((permission) => {
const notification = new Notification("Code Ready",{
      body: "Привет! Подпишись на @code_ready",
      icon: "img/img.jpg",});});};
notifyBtn.addEventListener("click", reqestPermission);

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

@code_ready | #мем

✅ Создание анимации spinner

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

<div class="spinner"></div>

.spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    animation: spinner 1s linear infinite;
    margin: 0 auto;
  }
@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

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

@code_ready | #консоль