✅ Отображение текущего времени на 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

@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