✅ Делаем приложение для рисования на холсте

Для рисования на холсте в данном коде используется HTML5 Canvas API. Этот API предоставляет возможность программно создавать растровые изображения на веб-странице.

<canvas id="drawCanvas" width="600" height="350"></canvas>

body{text-align: center;}
canvas {border: 1px solid black;}

document.addEventListener("DOMContentLoaded", () => {
    const canvas = document.getElementById("drawCanvas");
    const context = canvas.getContext("2d");
    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;
    // Начать рисование
    function startDrawing(e) {
        isDrawing = true;
        [lastX, lastY] = [e.offsetX, e.offsetY];}
    // Закончить рисование
    function stopDrawing() {
        isDrawing = false}
    // Рисование на холсте
    function draw(e) {
        if (!isDrawing) return;
        context.beginPath();
        context.moveTo(lastX, lastY);
        context.lineTo(e.offsetX, e.offsetY);
        context.strokeStyle = "#000";
        context.lineWidth = 5;
        context.lineCap = "round";
        context.lineJoin = "round";
        context.stroke();
        [lastX, lastY] = [e.offsetX, e.offsetY];}
    // Слушатели событий
    canvas.addEventListener("mousedown", startDrawing);
    canvas.addEventListener("mouseup", stopDrawing);
    canvas.addEventListener("mouseout", stopDrawing);
    canvas.addEventListener("mousemove", draw);});

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

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

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

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

@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