@code_ready | #мем

✅ Генератор QR кода на JS

Этот код использует встроенный API https://api.qrserver.com для генерации QR-кода на лету. Он сохраняет простоту и убирает необходимость в сторонних библиотеках.

<h1>QR Code Generator</h1>
  <input type="text" id="qr-text" placeholder="Enter text">
  <button onclick="generateQR()">Generate QR Code</button>
  <div id="qr-code"></div>

function generateQR() {
  const qrText = document.getElementById("qr-text").value;
  const qrCode = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrText}" alt="QR Code">`;
  document.getElementById("qr-code").innerHTML = qrCode;}

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

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

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

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

✅ Японский стиль в VSCode

"Kanagawa" — это тема оформления для редактора кода VSCode, вдохновленная японской культурой. Она предлагает приятные цвета и элементы дизайна, делая работу с кодом более приятной и комфортной.

@code_ready | #плагин

✅ Создание простого счетчика кликов

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

<button id="clickButton">Нажми на меня</button>
<p>Количество кликов: <span id="clickCount">0</span></p>

 const clickButton = document.getElementById('clickButton');
  const clickCountDisplay = document.getElementById('clickCount');
  let clickCount = 0;
  function updateClickCount() {
    clickCountDisplay.textContent = clickCount;}
  clickButton.addEventListener('click', function() {
    clickCount++; 
    updateClickCount();});

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

@code_ready | #консоль

✅ Тег <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

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

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 #шпаргалка