✅ Меняем размер шрифта с помощью ползунка.

Размер шрифта автоматически обновляется при перемещении ползунка, и текст на странице меняется в соответствии с выбранным размером шрифта.

<input type="range" min="10" max="50" value="16" class="slider" id="fontSlider">
  <div id="output">Размер шрифта: 16px</div>
  <p id="changeText">Пример текста для изменения размера</p>

const fontSlider = document.getElementById("fontSlider");
const output = document.getElementById("output");
const changeText = document.getElementById("changeText");
fontSlider.oninput = function () {
  const fontSize = this.value;
 output.textContent = `Размер шрифта: ${fontSize}px`;
  changeText.style.fontSize = `${fontSize}px`;};

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

✅ Просмотр оттенков цвета VSCode

Colorize - это плагин для Visual Studio Code, который призван упростить работу с цветами в коде, делая их более узнаваемыми и наглядными.

Основные возможности: Автоматическое распознавание цветов, Подсветка цветов, Поддержка различных форматов и Настройка подсветки.

@code_ready | #плагин

✅ Переворачиваем слова

Word Reverser - это простое веб-приложение, которое позволяет пользователю переворачивать слова. Просто введите слово в текстовое поле, нажмите кнопку "Reverse", и приложение мгновенно перевернет его.

<h1>Word Reverser</h1>
<input type="text" id="input-word" placeholder="Enter a word">
<button id="reverse-btn">Reverse</button>
<p id="reversed-word"></p>

document.getElementById("reverse-btn").addEventListener("click", function () {
  const inputWord = document.getElementById("input-word").value;
  const reversedWord = reverseWord(inputWord);
  document.getElementById("reversed-word").textContent = reversedWord;});
function reverseWord(word) {
  return word.split("").reverse().join("");
}

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

✅ Шпаргалка по всем типам данных в JS

Шпаргалка по типам данных в JavaScript предоставляет краткое описание каждого типа данных, включая примитивные типы и ссылочные типы.

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

@code_ready | #консоль

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

Эта шпаргалка представляет собой примеры создания и использования регулярных выражений в 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 #шпаргалка