✅ Шпаргалка по регулярным выражениям

Эта шпаргалка представляет собой примеры создания и использования регулярных выражений в JavaScript. В ней содержатся все основные операции.

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

✅ Запрос разрешения и отправка уведомлений

Этот код позволяет запрашивать разрешение пользователя на отправку уведомлений и создавать уведомление с заданным текстом и изображением при получении разрешения.

<button class="button">Показать сообщение</button>

const notifyBtn = document.querySelector(".button");
const reqestPermission = function () {
  if (!("Notification" in window)) {
    throw new Error ("Браузер не поддерживает уведомления");
  }
  Notification.requestPermission().then((permission) => {
const notification = new Notification("Code Ready",{
      body: "Привет! Подпишись на @code_ready",
      icon: "img/img.jpg",});});};
notifyBtn.addEventListener("click", reqestPermission);

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

Всем привет! ❤️
На этой неделе были опубликованы, реально полезные посты, и вообще не было рекламы. Но, к сожалению, с завтрашнего дня, опять появятся рекламы, и наверное будут каждый день. На это есть пару причин:

Во первых, думаю надо монетизировать канал, так как, я делаю посты каждый день, пытаюсь обучать и помогать людям. Поэтому, чтобы продолжать вести канал, нужно иметь доход с него.

Во вторых, все заработанные деньги с канала, я трачу на его развитие, то есть весь доход, уходит на закупы, для новой аудитории и продвижения дальше.

Надеюсь вы со мной согласны, и вам не помешает реклама каждый день, примерно раз в 2-3 поста. Также если и есть реклама, то реально полезная, да, знаю, много где похожий контент, но все равно, я рекламирую хорошие каналы или сайты. И на многие стоит подписаться 😁
Забыл добавить что, интеграция на моем канале, стоит намного выше рынка, и я не продаю ее за копейки, просто спрос большой)

Согласны со мной? Думаю, для изучения фронтенда на этом канале, реклама вряд-ли будет мешать (не надо выключать уведомления с моего канала) 🔥

✅ Улучшение читаемости кода

Rainbow Brackets — плагин для VSCode, добавляет разноцветную подсветку скобок, что делает код более читаемым и облегчает навигацию по блокам кода. Каждая пара скобок окрашивается в свой уникальный цвет, что помогает легко определить соответствие скобок и улучшает визуальное восприятие кода.

@code_ready | #плагин

@code_ready | #консоль

✅ Создание таймера с помощью JS

В этом примере создан простой таймер с кнопками "Старт", "Стоп" и "Сброс". Вы можете начать, остановить и сбросить таймер, используя соответствующие кнопки. Таймер отображает количество часов, минут и секунд.

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

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

✅ Шпаргалка с методами объекта console в JS

Объект Console служит для доступа к средствам отладки браузера. Работа с ним отличается в разных браузерах, но эти методы и свойства по факту поддерживаются всеми браузерами.

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

✅ Как сделать градиентную обводку текста?

Стилевое свойство text-stroke одновременно устанавливает цвет и толщину контура вокруг букв и символов текста.Но также чтобы создать градиент нужно добавить 2 свойства: background-clip: text и background-image: linear-gradient.

<h1>Stroke</h1>

body {
    background-color: #000119;
    display: grid;
    font-family: sans-serif;
    place-items: center;
  }
  h1 {
    background-clip: text;
    background-image: linear-gradient(to right, #09f1b8, #00a2ff, #ff00d2, #fed90f);
    font-size: 100px;
    -webkit-text-stroke: transparent 6px;
  }

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

@code_ready | #консоль

✅ Продвинутые Комментарии

Better Comments — это расширение для VSCode, способствующее улучшению структурирования комментариев в вашем коде. Оно предлагает возможность категоризировать комментарии и выделять их разными цветами, что поможет вам почеркнуть важные моменты, задачи или замечания.

@code_ready | #плагин

✅ Шпаргалка по методам объекта в JS

Эта шпаргалка содержит полный список методов объекта в JavaScript, предоставляя краткое описание каждого из них для удобства использования.

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

✅ Создание небольшой "галереи"

Этот код добавляет функциональность для увеличения изображений в галерее при клике на них. Он заменяет путь к изображению, чтобы загрузить его увеличенную версию, и открывает новое окно с этим изображением.

  <div class="gallery">
    <img src="img.png" alt="image">
</div>

const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
    image.addEventListener('click', function() {
        const enlargedSrc = this.src.replace('thumbnail', 'large');
        window.open(enlargedSrc, '_blank');
    });
});

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