@code_ready | #мем

✅ Полезные горячие клавиши VSCode

• Shift + Del — удаляет строку целиком. Теперь не нужно выделять мышкой всю строку и потом нажимать Backspace.

•Ctrl + L — выделяет всю строку целиком. Теперь копипастить еще проще.

@code_ready | #клавиши

✅ Создание анимации 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 | #плагин

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

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 | #консоль