0423.gif
1.6 MB
✅ Компиляция кода прямо в редакторе
Плагин Quokka позволяет компилировать JavaScript код прямо внутри редактора. Результат кода выводится справа от самого кода(не комментарием).
Ссылка на видео с полным функционалом плагина -https://www.youtube.com/watch?v=l-zB8k582k8
@code_ready | #плагин
Плагин Quokka позволяет компилировать JavaScript код прямо внутри редактора. Результат кода выводится справа от самого кода(не комментарием).
Ссылка на видео с полным функционалом плагина -
@code_ready | #плагин
👍29🔥12👎4
✅ Для чего используются операторы break и continue?
Эти два термина относятся к циклам и являются единственными операторами, которые могут прервать выполнение кода.
• Оператор break заставляет интерпретатор перейти в конец цикла или другой инструкции.
• Оператор continue прерывает одну итерацию и продолжает следующую в цикле.
@code_ready | #собеседование
• Оператор break заставляет интерпретатор перейти в конец цикла или другой инструкции.
• Оператор continue прерывает одну итерацию и продолжает следующую в цикле.
• По сути, в коде цикл должен отработать до 10, но поскольку есть условие i === 5, а после него выход из цикла break, то выведется значения до 5.
• В следующем примере ситуация аналогичная, но на значении 5, оно будет пропущено из-за ключевого слова continue.
@code_ready | #собеседование
🔥31👍20
✅ Построение графиков прямо в браузере
Библиотека Chart.js предоставляет собой простой и удобный способ для построения графиков и диаграмм в браузере. График содержит данные о продажах для каждого месяца, а также ось Y, начинающуюся с нуля.
@code_ready | #обучение #js
Библиотека Chart.js предоставляет собой простой и удобный способ для построения графиков и диаграмм в браузере. График содержит данные о продажах для каждого месяца, а также ось Y, начинающуюся с нуля.
Если данный код работает неправильно, или вам не нужно делать его на весь экран, в комментариях оставлю css код для правки.
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
let ctx = document.getElementById("myChart").getContext("2d");
let myChart = new Chart(ctx, {
type: "line",
data: {
labels: ["Янв", "Фев", "Мар", "Апр", "Май", "Июн"],
datasets: [
{
label: "Продажи",
data: [12, 19, 3, 5, 2, 3],
borderColor: "rgba(255, 99, 132, 1)",
borderWidth: 1,},],},
options: {
scales: {
y: { beginAtZero: true },},},
});@code_ready | #обучение #js
👍37🔥12
✅ Размещение по центру с помощью html
Тег <center> помогает расположить любой вложенный в него контент по центру страницы, без помощи CSS
@code_ready | #обучение #html
Тег <center> помогает расположить любой вложенный в него контент по центру страницы, без помощи CSS
@code_ready | #обучение #html
👍54🔥18👎13😁9
👍32🔥11👎1
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Слайдер загрузки с процентами
Данный код создает трёхцветный слайдер загрузки, где цвет соответствует процентам, отображающимся снизу.
Реализовано без JavaScript.
Уже готовый код я оставил в комментариях)
@code_ready | #обучение #js
Данный код создает трёхцветный слайдер загрузки, где цвет соответствует процентам, отображающимся снизу.
Реализовано без JavaScript.
• С помощью свойства animation задаётся анимация контейнера загрузки.
• Далее с помощью декораторов @keyframes кастомизируется сколько угодно значений.
• Внутри декоратора задаем значения на 0 ,25, 50 и 100%.
• В следующем декораторе происходит смена текста под слайдером в соответствии процентам.
Уже готовый код я оставил в комментариях)
@code_ready | #обучение #js
🔥33👍16
0427 (2)(1).gif
302.1 KB
✅ Encrypted Password
Красивая анимация скрытия пароля с помощью нажатия на глаз в конце формы, следящего за курсором
👨💻 Готовый код: Ссылочка
@code_ready | #кодпен
Красивая анимация скрытия пароля с помощью нажатия на глаз в конце формы, следящего за курсором
@code_ready | #кодпен
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥50👍16👎2
✅ Настраиваемый перенос строки
Часто ли у вас возникала проблема, что большой объем текста с длинными словами выходит за рамки контейнера?
Вместо того, чтобы задавать переносы вручную, можно воспользоваться свойством hyphens.
Оно позволяет позволяет задавать перенос строки по значению:
• auto — автоматически, в зависимости от языка
• none — без переносов
• manual — настраиваемое вручную
Не забудьте указать значение языка в теге <html lang> для корректной работы свойства.
@code_ready | #свойство #css
Часто ли у вас возникала проблема, что большой объем текста с длинными словами выходит за рамки контейнера?
Вместо того, чтобы задавать переносы вручную, можно воспользоваться свойством hyphens.
Оно позволяет позволяет задавать перенос строки по значению:
• auto — автоматически, в зависимости от языка
• none — без переносов
• manual — настраиваемое вручную
Не забудьте указать значение языка в теге <html lang> для корректной работы свойства.
@code_ready | #свойство #css
🔥75👍22
✅ Шпаргалка по регулярным выражениям
Эта шпаргалка представляет набор основных методов для создания и использования регулярных выражений в JavaScript. В ней содержатся все основные операции.
@code_ready | #шпаргалка #js
Эта шпаргалка представляет набор основных методов для создания и использования регулярных выражений в JavaScript. В ней содержатся все основные операции.
@code_ready | #шпаргалка #js
👍85🔥33👎3
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Горячие клавиши для быстрой верстки
• Ctrl + F2 — Выделяет все вхождения текущего слова.
• Alt + ↑ / ↓ — Переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш.
• Shift + Tab — Удаляет отступы.
@code_ready | #клавиши
• Ctrl + F2 — Выделяет все вхождения текущего слова.
• Alt + ↑ / ↓ — Переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш.
• Shift + Tab — Удаляет отступы.
@code_ready | #клавиши
👍82🔥21👎4
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Делаем генератор штрих-кодов
Данный код позволяет генерировать различные штрих-коды с помощью библиотеки JsBarcode.
Она позволяет создавать штрихкоды разных форматов, так и кастомизировать текст под ними в едином шаблоне.
@code_ready | #обучение #js
Данный код позволяет генерировать различные штрих-коды с помощью библиотеки JsBarcode.
Она позволяет создавать штрихкоды разных форматов, так и кастомизировать текст под ними в едином шаблоне.
<input type="text" id="barcodeValue">
<button id="generateButton">Создать штрих-код</button>
<canvas id="barcodeCanvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>
const barcodeValueInput = document.getElementById("barcodeValue");
const barcodeCanvas = document.getElementById("barcodeCanvas");
const generateButton = document.getElementById("generateButton");
function generateBarcode() {
let barcodeValue = barcodeValueInput.value;
JsBarcode(barcodeCanvas, barcodeValue);
}
generateButton.addEventListener("click", generateBarcode);@code_ready | #обучение #js
👍63🔥21👎6
👋 Всем привет! В этом посте, хочу поделиться самыми полезными и интересными постами, которые выходили на этом канале:
1. Шпаргалки:
• Методы массива и Методы строк
• CSS Grid
• Обработчики событий
2. Разработка на JS:
• Отправка уведомлений
• Переключение видимости пароля
• Генератор QR кода
3. Горячие клавиши:
• Для быстрой верстки
• Дополнительные
4. Плагины:
• Создание скриншотов
• Исправление орфографических ошибок
⚠️ На канале сущесвует множество рубрик, их можно найти по специальным хештегам (пример #свойство или #обучение)
1. Шпаргалки:
• Методы массива и Методы строк
• CSS Grid
• Обработчики событий
2. Разработка на JS:
• Отправка уведомлений
• Переключение видимости пароля
• Генератор QR кода
3. Горячие клавиши:
• Для быстрой верстки
• Дополнительные
4. Плагины:
• Создание скриншотов
• Исправление орфографических ошибок
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥53👍24👎5
✅ Шпаргалка Flexbox позиционирования
Flexbox - позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.
@code_ready | #css #шпаргалка
Flexbox - позволяет контролировать размер, порядок и выравнивание элементов по нескольким осям, распределение свободного места между элементами и многое другое.
@code_ready | #css #шпаргалка
👍91🔥31
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Создание градиентного фона
В коде создается анимированный градиентный фон внутри div элемента. В Css мы определяем стили для этого div, включая его размеры, радиус скругления углов и анимацию градиентного фона.
@code_ready | #обучение #css
В коде создается анимированный градиентный фон внутри div элемента. В Css мы определяем стили для этого div, включая его размеры, радиус скругления углов и анимацию градиентного фона.
div {
width: 320px;
height: 220px;
background: linear-gradient(45deg, #64b5f6, #81c784, #ffeb3b, #ff8a65);
background-size: 400% 400%;
animation: gradientAnimation 7s ease infinite;
border-radius: 15px;
}
@keyframes gradientAnimation {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}@code_ready | #обучение #css
👍77🔥25
🔥30👍19😁8👎2
This media is not supported in your browser
VIEW IN TELEGRAM
✅ Генератор паролей с задаваемой длинной
Этот пример создает простой генератор паролей, который при нажатии кнопки, генерирует случайный пароль с задаваемой в верхней форме длинной, из символов из указанных в charset.
@code_ready | #обучение #js
Этот пример создает простой генератор паролей, который при нажатии кнопки, генерирует случайный пароль с задаваемой в верхней форме длинной, из символов из указанных в charset.
<div class="password-generator">
<input type="text" id="passwordLength" placeholder="Длина пароля">
<input type="text" id="password" readonly>
<button onclick="generatePassword()">Генерировать</button></div>
function generatePassword() {
const length = parseInt(document.getElementById("passwordLength").value);
const charset =
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+";
let password = "";
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charset.length);
password += charset[randomIndex];}
document.getElementById("password").value = password;}В комментариях я оставлю Css код, для стилизации генератора.
@code_ready | #обучение #js
🔥43👍17😁3
✅ Что такое замыкание в JavaScript?
Замыкание - это особенность языка, когда функция имеет доступ к переменным из области видимости внешней функции, даже после того, как внешняя функция завершила выполнение. Это возможно благодаря тому, что функция запоминает свою лексическую область видимости в момент объявления.
Замыкание используется для:
• Использования в качестве приватных переменных
• Обработки событий и калбеков
• Реализации фабричных функций
• Рекурсии
@code_ready | #собеседование
Замыкание - это особенность языка, когда функция имеет доступ к переменным из области видимости внешней функции, даже после того, как внешняя функция завершила выполнение. Это возможно благодаря тому, что функция запоминает свою лексическую область видимости в момент объявления.
В этом примере функция innerFunction является замыканием, потому что она имеет доступ к переменной outerVariable, которая была определена во внешней функции outerFunction.
Замыкание используется для:
• Использования в качестве приватных переменных
• Обработки событий и калбеков
• Реализации фабричных функций
• Рекурсии
@code_ready | #собеседование
🔥35👍18👎6