✅ Создание анимации spinner

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

<div class="spinner"></div>

.spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    animation: spinner 1s linear infinite;
    margin: 0 auto;
  }
@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

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

✅ Создание озвучки текста

SpeechSynthesis - это интерфейс Web Speech API, который используется для перевода текста в речь. Он содержит содержимое, которое должен прочитать речевой сервис, и информацию о том, как его читать.

<textarea></textarea>
 <button>Speak</button>

const button = document.querySelector('button');
const text = document.querySelector('textarea');
button.addEventListener('click', () => {
  const utterance = new SpeechSynthesisUtterance(text.value);
  speechSynthesis.speak(utterance);});

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

✅ Шпаргалка с функциями обработчиков событий

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

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

✅ Вопрос с собеседования

Разница между унарным и бинарным оператором?

Ответ:

1. Унарные операторы:

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

2. Бинарные операторы:

Бинарный оператор действует на два операнда, то есть на два значения или переменных. Они выполняют операции между ними и возвращают результат.

@code_ready | #собеседование

@code_ready | #консоль

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

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

<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 | #плагин

✅ Вопрос с собеседования

Что такое регулярные выражения в JavaScript и зачем они нужны?

Ответ:

Регулярные выражения (regular expressions) в JavaScript - это мощный инструмент для работы с текстовыми данными. Они представляют собой шаблоны, описывающие набор символов, которые соответствуют определенным правилам или условиям. С их помощью можно осуществлять поиск, замену, извлечение и множество других манипуляций с текстом.

В основе регулярных выражений лежат специальные символы и конструкции, которые позволяют задавать различные шаблоны для поиска текста. Например, символы \d соответствуют любой цифре, а \w - любой букве или цифре. Есть также множество других символов для описания специальных условий, таких как начало строки ^ или конец строки $.

Когда регулярные выражения могут быть полезны:

1. Поиск слов или фраз в тексте
2. Проверка формата ввода
3. Извлечение информации из текста
4. Замена текста

@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 поста. Также если и есть реклама, то реально полезная, да, знаю, много где похожий контент, но все равно, я рекламирую хорошие каналы или сайты. И на многие стоит подписаться 😁
Забыл добавить что, интеграция на моем канале, стоит намного выше рынка, и я не продаю ее за копейки, просто спрос большой)

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