✅ Методы для работы с файлами
В данной шпаргалке представлены основные методы для работы с файлами на JavaScript. После каждого метода есть комментарий поясняющий его функционал
@code_ready | #шпаргалка #js
В данной шпаргалке представлены основные методы для работы с файлами на JavaScript. После каждого метода есть комментарий поясняющий его функционал
@code_ready | #шпаргалка #js
👍31🔥12👎1
✅ Использование сторонней библиотеки для работы с картами
Библиотека Leaflet предоставляет широкий функционал для работы с картой мира. Это может быть удобно для вставки местоположения какого-либо предприятия, или компании к себе на сайт.
@code_ready | #обучение #js
Библиотека Leaflet предоставляет широкий функционал для работы с картой мира. Это может быть удобно для вставки местоположения какого-либо предприятия, или компании к себе на сайт.
<div id="map"></div>
<!-- Подключение библиотеки Leaflet -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
let mymap = L.map("map").setView([55.7558, 37.6173], 10);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
}).addTo(mymap);
// Создание маркера с указанными координатами
L.marker([55.7558, 37.6173]).addTo(mymap);@code_ready | #обучение #js
👍42🔥13
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