Code Ready | Frontend

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

<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

Два плюс два — это сколько? Время, когда айтишников заставляли учить математику, информатику и физику, прошло. Теперь писать код может каждый гуманитарий. «Си шарп» ему в помощь. Изучаешь за 2 недели, а потом легко пишешь сайты, приложения, игры. Главное, проходить уроки по системе, которую разработали старшие айтишники с канала «C#-о-мания». Вы в надёжных руках, если читаете их гайды и повторяете шаг за шагом. Бóльшего не нужно, чтобы разработать собственный цифровой продукт. Теперь вам по силам зарабатывать 300К в месяц, как достойный айтишник: @csh_mania

✅ Вычисления факториала чисел Факториал - это математическое понятие, которое представляет собой произведение всех положительных целых чисел от 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

Перестань тратить часы на поиск нужного материала на просторах Гугла, мы всё сделали за тебя! 💜 Шрифтография — популярная бесплатная кириллица и латиница, которую мы отобрали для тебя! 🧡 Дизайник — только бесплатные полезные плагины и материалы, которые значительно ускорят твою работу над дизайном. 💙 ПроДизайн — новые нейросети, шаблоны для твоих социальных сетей, крутые мокапы, и всё это совершенно бесплатно! 🩷 ПроЦвет — собрали тут цветовые палитры с наглядными примерами где их можно использовать! Подписывайся и получай всё это ежедневно!

@code_ready | #консоль

✅ Шпаргалка по операциям с переменными Эта шпаргалка предоставляет основные команды для управления переменными в JavaScript. Включает в себя операции присваивания, арифметические и логические операторы, преобразование типов и многое другое. @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() {
  var passwordInput = document.getElementById("password");
  var toggleCheckbox = document.getElementById("toggle");
  if (toggleCheckbox.checked) {
      passwordInput.type = "text";
  } else {
      passwordInput.type = "password";
  }
}

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

Как вас последние 5 постов? Мне кажется они получились одни из самых полезных и крутых! 🔥

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

Всем привет, хочу поделиться ссылочной на мой второй полезный канал @time_design. Успей вступить и спокойной ночи ❤️

✅ Горячие клавиши для ускорения верстки • Alt + ↓ / ↑ — переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш. • Ctrl + Shift + ← / → — Выделяет слова после или перед курсором. • Alt — множественный ввод. Поможет написать одно и то же сразу в нескольких местах. @code_ready | #клавиши

✅ Шпаргалка по работе с DOM в JS Данная шпаргалка предоставляет основные команды для выбора, изменения и управления элементами веб-страницы. Включает в себя операции с текстовым и HTML-содержимым. @code_ready | #js #шпаргалка

Как вам посты, про создания различных эффектов с использованием JS кода? Все можно посмотреть по хештегу #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

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