✅ Шпаргалка по работе с DOM в JS

Данная шпаргалка предоставляет основные команды для выбора, изменения и управления элементами веб-страницы. Включает в себя операции с текстовым и HTML-содержимым.

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

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

• 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 | #консоль

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

@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

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

Попробуйте этот 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