Code Ready | Frontend

✅ Создание бесконечных часов на JS Этот код создает простые часы, отображающие текущее время в формате "часы:минуты:секунды". Функция setInterval вызывает функцию updateClock каждую секунду для обновления отображаемого времени. ⤵️

<div id="clock"></div>

#clock { font-size: 50px; font-family: Arial, sans-serif; text-align: center; margin: 100px; }

function updateClock() {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    document.getElementById('clock').innerText = `${hours}:${minutes}:${seconds}`;
  }
  // Обновляем часы каждую секунду
  setInterval(updateClock, 1000);
  // Запускаем обновление сразу, чтобы избежать задержки в отображении времени
  updateClock();

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

@code_ready | #консоль

Как вам посты на этой неделе? 🤔

Как вам посты на этой неделе? 🤔

✅ Создание таймера с помощью JS В этом примере создан простой таймер с кнопками "Старт", "Стоп" и "Сброс". Вы можете начать, остановить и сбросить таймер, используя соответствующие кнопки. Таймер отображает количество часов, минут и секунд. Ниже оставляем HTML, CSS и JavaScript код для создания крутого таймера. ⤵️

<div id="timer">00:00:00</div>
<button onclick="startStopTimer()">Старт/Стоп</button>
<button button onclick="resetTimer()">Сброс</button>

body { font-family: Arial, sans-serif; text-align: center; margin: 50px; }
#timer { font-size: 2em; margin-bottom: 20px; }
button { font-size: 1em; padding: 10px 20px; cursor: pointer; }

let timer, s = 0, m = 0, h = 0, t = 0;
  function startStopTimer() {
    if (t) {
      clearInterval(timer);
    } else {
      timer = setInterval(() => {
        t ? s++ : clearInterval(timer);
        updateTimer();
      }, 1000);
    } t ^= 1;}
  function resetTimer() {
    clearInterval(timer);
    timer = undefined;
    s = m = h = 0;
    updateTimer();
    t = 0; }
  function updateTimer() {
    const padZero = (value) => (value < 10 ? '0' : '') + value;
    document.getElementById('timer').innerText = `${padZero(h)}:${padZero(m)}:${padZero(s)}`; }

@code_ready | #html #css #js

Кидаю вам ссылку на мой второй канал @time_design ❤️

✅ Готовый макет 2rism Оставляю уже готовый макет с кодом — Github (без адаптива) • Сложность: Лёгкий • Язык: Английский • Адаптив: Нет Ссылка на макет — Figma @code_ready | #github

✅ Крутые горячие клавиши VS Code • Ctrl + F2 — Выбирает все вхождения текущего слова. Также можно менять эти слова. • Alt + ↑ / ↓ — Переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш. • Shift + Tab — Удаляет отступы. @code_ready | #клавиши

✅ Шпаргалка с методами строк в JS @code_ready | #js #шпаргалка

✅ Как создать цветной след от курсора Анимация группы переливающихся квадратиков, движущихся за курсором. Для его создания оставляем SCSS и JavaScript код ниже. ⬇️

.loader-container {
  width:100px;
  height:100px;
  position: absolute;
  animation: scaleUp .5s linear;
  opacity: 0;
  transform: scale(0);
  .loader {
    background: #fff;
    animation: filterHue 2.5s linear infinite;
    height:100%;
    width: 100%;
  }
}
  @keyframes scaleUp {
  50% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(0.25) }
  }

window.addEventListener("mousemove", function (e) {
  var to_append = document.getElementsByClassName('loader-container')[0];
  var all = document.getElementsByClassName('loader-container');
  var parent_div = document.createElement('div');
  parent_div.className = "loader-container";
  var inner_div = document.createElement('div');
  inner_div.className = "loader";
  parent_div.appendChild(inner_div)
  var d = document.body.appendChild(parent_div);
  parent_div.style.left = (e.clientX - 50)+'px';
  parent_div.style.top = (e.clientY - 50)+'px';
  if(document.getElementsByClassName('loader-container').length > 50) {
    document.body.removeChild(to_append)
  }
});

@code_ready | #практика #scss #js

✅ Подробная таблица использования группы child При помощи этих псевдоклассов можно удобно выбирать элементы по их порядковому номеру внутри родительского элемента. @code_ready | #css #шпаргалка

🆕 Специально для вас, на ночь оставляем ссылку на наш второй канал @time_design. Всем спокойной ночи и ещё раз с новым годом! ❤️ @time_design

С новым годом! 🎄

С наступающим, друзья! Пусть этот год Дракона будет полон творческих идей и важных событий. Желаем каждому реализовать все свои мечты, стать успешным разработчиком, желаем удачи, счастья и здоровья, чтобы вы преодолели любые преграды и добились всех своих целей!

✅ Итоги 2023 года Всем доброго вечера, буквально через пару часов будет новый 2024 год. Хоть этому каналу всего лишь 4 месяца, мы хотим поделиться итогами за это краткое время. ❤️ Что мы сделали? За эти 4 месяца мы успели набрать почти 2000 подписчиков, спасибо каждому кто смотрит посты, надеюсь мы для вас полезны! Вы нам помогаете развиваться и делать контент лучше, так как чем больше аудитория, чем больше реакций и комментариев, тем лучше становиться качество постов. Цели на новый 2024 год. Пожалуй самая главная цель, это 10 тысяч подписчиков на этом канале и 5 тысяч на нашем втором канале @time_design. Помимо этого, мы хотим расширяться и делать новые каналы, где уже будет в разы качественней контент. Также радовать вас и быть полезными для каждого кто смотрит наши каналы. Всем спасибо) Пожелания. Пусть этот год будет полон творческих идей и важных событий. Желаем каждому выполнить все свои цели, стать успешным разработчиком, желаем удачи, счастья и здоровья. ❤️ С наступающим Новым Годом! 🍾

Программистика: Кодируй с нами! 💻⚙️ Для тех, кто понимает разницу между == и ===, кто знает, что null не равно undefined, и для тех, кто иногда мечтает о рекурсивных функциях: Глубокие статьи, раскрывающие тонкости языков; Сервисы, которые упростят ваш DevOps процесс; Видеоуроки по новым фреймворкам и библиотекам; Актуальные новости из мира IT, которые заслуживают вашего внимания. Программистика – это не просто канал, это ваш партнер в мире кода. Join us!

@code_ready | #мем