@code_ready | #мем

✅ Делаем буллиты для списков

Чтобы создать кастомные буллиты для неупорядоченных списков, используйте псевдоэлемент :before и его свойство content. Чтобы изменять вид буллита в примере, применяются классы .complete и .incomplete ⤵️

<ul class="complete">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <ul class="incomplete">
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

ul { list-style: none; }
.complete li::before {
    content: '🗹 '; 
}
.incomplete li::before {
    content: '☐ '; 
}
ul {
    text-align: center;
    font-family: Candara;
    font-size: 1.7rem;
    margin: 0 auto;
}

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

✅ Создание анимации кадрирования фото

У нас есть два отличных свойства: object-fit и object-position. С их помощью можно изменять размеры изображения, не влияя на соотношение его сторон.

В примере можно запустить этот эффект с помощью чекбокса: он привязан к псевдоклассу :checked. ⤵️

  <input type="checkbox"/> <br>
<img src="https://source.unsplash.com/random/1920x1080" alt="Random" />

input {
    transform: scale(4);
    display: block;
    margin: 30px auto;
  }
  img {
    display: block;
    margin: 0 auto;
    width: 1400px;
    height: 900px;
    transition: 2s;
  }
  input:checked + br + img {
    width: 500px;
    height: 400px;
    object-fit: cover;
    object-position: left-top;
    transition: width 2s, height 3s;
  }

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

@code_ready | #консоль

@code_ready | #мем

✅ Отображение текущего времени на JS

Это веб-приложение представляет собой простые часы, отображающие текущее время. JavaScript-код обновляет время каждую секунду, обеспечивая актуальные показания часов. ⤵️

<p id="currentTime"></p>

function updateCurrentTime() {
  var currentTimeElement = document.getElementById("currentTime");
  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();
  var seconds = currentTime.getSeconds();
  minutes = (minutes < 10 ? "0" : "") + minutes;
  seconds = (seconds < 10 ? "0" : "") + seconds;
  currentTimeElement.innerText = hours + ":" + minutes + ":" + seconds;
}
setInterval(updateCurrentTime, 1000);
updateCurrentTime();

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

✅ Делаем пометку для задач на JS

Этот пример создает поле ввода и кнопку для добавления задачи. Когда задача добавляется, она отображается в виде элемента списка с кнопкой "Удалить", которая удаляет задачу при клике. ⤵️

<div><input type="text" id="Input" placeholder="Добавить задачу"><button onclick="addTask()">Добавить</button></div>
  <ul id="List"></ul>

function addTask() {
    const taskInput =document.getElementById("Input");
    const taskList = document.getElementById("List");
    const trimmedValue = taskInput.value.trim();
    if (trimmedValue !== "") {
      const taskItem = taskList.appendChild(document.createElement("li"));
      taskItem.textContent = trimmedValue;
      taskItem.appendChild(document.createElement("button"))
        .textContent = "Удалить";
      taskItem.lastChild.onclick = () => taskList.removeChild(taskItem);
      taskInput.value = "";
    }
  }

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

✅ Шпаргалка по работе с 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