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

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

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

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

@code_ready | #клавиши

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

Этот пример создает простой генератор паролей, который при нажатии кнопки, генерирует случайный пароль длиной 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

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

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

<div class="password-toggle">
    <input type="password" id="password" placeholder="Password">
    <input type="checkbox" id="toggle" onclick="togglePasswordVisibility()">
    <label for="toggle">Show Password</label>
</div>

function togglePasswordVisibility() {
  let passwordInput = document.getElementById("password");
  let toggleCheckbox = document.getElementById("toggle");
  if (toggleCheckbox.checked) {
      passwordInput.type = "text";
  } else {
      passwordInput.type = "password";
  }
}

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

@code_ready | #консоль

✅ Вычисления факториала чисел

Факториал - это математическое понятие, которое представляет собой произведение всех положительных целых чисел от 1 до данного числа. Например, факториал числа 5 (обозначается как 5!) равен 5 × 4 × 3 × 2 × 1 = 120.

<div class="container">
    <h2>Вычисление факториала числа</h2>
    <label for="number">Введите число:</label>
    <input type="number" id="number"><button onclick="calculateFactorial()">Вычислить</button>
    <div id="result"></div>
</div>

const factorial = n => n <= 1 ? 1 : n * factorial(n - 1);
function calculateFactorial() {
    const number = parseInt(document.getElementById('number').value);
    const resultDisplay = document.getElementById('result');
    if (isNaN(number)) {
        resultDisplay.textContent = 'Пожалуйста, введите корректное число.';
    } else {
        resultDisplay.textContent = `Факториал ${number} равен ${factorial(number)}`;
    }
}

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

✅ Интерактивный калькулятор для расчёта чаевых

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

<h2>Tip Calculator</h2>
    <input type="number" id="billAmount" placeholder="Bill amount ($)">
    <input type="number" id="tipPercentage" placeholder="Tip percentage (%)">
    <button onclick="calculateTip()">Calculate Tip</button>
    <div id="tipAmount"></div>

function calculateTip() {
    let billAmount = parseFloat(document.getElementById('billAmount').value);
    let tipPercentage = parseFloat(document.getElementById('tipPercentage').value);
    let tipAmount = (billAmount * tipPercentage) / 100;
    document.getElementById('tipAmount').innerText = "Tip: $" + tipAmount.toFixed(2);
}

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

✅ Шпаргалка по сравнению разных типов

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

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

@code_ready | #консоль

✅ Вопрос с собеседования

Что такое стрелочная функция в JavaScript?

Ответ:
Стрелочная функция в JavaScript - это новый синтаксис для определения функций, который предоставляет более краткую и удобную запись функций.

Она использует стрелку => для определения функции, а также имеет несколько особенностей по сравнению с обычными функциями, включая более короткий синтаксис, отсутствие собственного контекста this, и автоматический возврат значения, если тело функции содержит только одно выражение.

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

Делать ли разбор вопросов с собеседований? По типу таких.
И как часто хотите их видеть на канале? 🔥

@code_ready |#мем

✅ Генерируем случайную цитату

Эта штука будет отображать случайную цитату при каждом обновлении страницы. В этом коде при каждом нажатии на кнопку "Новая цитата" будет загружаться случайная цитата с использованием открытого API "Quotable".

<div class="random-quote">
    <p id="quoteDisplay"></p>
    <button onclick="fetchRandomQuote()">Новая цитата</button>
</div>

async function fetchRandomQuote() {
    const response = await fetch('https://api.quotable.io/random');
    const data = await response.json();
    const quote = `${data.content} - ${data.author}`;
    document.getElementById('quoteDisplay').textContent = quote;
}
// Загружаем случайную цитату при загрузке страницы
window.onload = fetchRandomQuote;

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

✅ Вопрос с собеседования

Что такое callback функции в JavaScript, и как они используются для управления асинхронным кодом?

Ответ:

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

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

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

✅ Создание печатающего эффекта

Попробуйте этот CSS код для создания эффекта печатающегося текста .typing-demo устанавливает ширину блока для текста и создает анимацию typing, которая плавно расширяет его до конца. Затем анимация blink мигает границей, чтобы придать тексту более реалистичный вид

<div class="wrapper">
    <div class="typing-demo">@code_ready for you!</div>
</div>

.typing-demo {
    width: 21ch;
    animation: typing 2.5s steps(22), blink .5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2rem;
  }
  @keyframes typing {
    from {width: 0;}
  }
  @keyframes blink {
    50% {border-color: transparent;}
  }

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