Реализуем клон Trello(трелло) на чистом JS. DragNDrop. Vanilla JavaScript

[@lets_try_js]

Какие еще интересные приложения повторить на чистом JS ?

[@GreatVolcano]

Socket.io - чат в реальном времени

[@GreatVolcano]

Или, если хорошо шаришь, то простенький crud firebas'а через js

[@lets_try_js]

По сокетам есть видосик небольшой на сайте

[@lamer492]

Figma

[@lets_try_js]

@@lamer492 ну фигма это очень жестко )

[@LectorWeb]

Trello - вообще классная штука, уже много лет ей пользуюсь!

[@user-kc5kr9fq2z]

Дивлюсь другий раз, шустро кодиш, крутяк))

[@lets_try_js]

практика)

[@Eminem6979]

Чувак ты офигенный просто, спасибо, всё получается, медленно но уверенно иду вперед!!!

[@lets_try_js]

рад помочь)

[@piratplay4689]

Огромное спасибо за крутой контент!

[@albeespensor613]

Чотко! Разобрался со всеми вопросами только по твоему видео, спасибо

[@lets_try_js]

рад)

[@АлександрМелянюк-ц9ю]

Очень круто получилось) Всё понятно объяснил. Спасибо!

[@lets_try_js]

спасибо)

[@m1akarov2021]

Крутой контент , делайте дальше =)
Давайте еще для новичков , практика ++

[@lets_try_js]

благодарю) будет

[@max-ek5uu]

спасибо!!! Drag and drop🤓

[@lets_try_js]

Рад помочь )

[@o_boxe]

привет,а почему ты все другие классы стал прописывать внутри .app{}.что это значит?это значит что ты свойства класса .app также применяешь на другие классы?допустим я писал с расширением .css и там синтаксис этого не позволяет.

[@egorzhigarev1469]

Добрый день! Подскажите какой шрифт вы используете в VS Code? Уж больно понравился

[@endiffallengod]

это дефолтный шрифт

[@pie_company]

у меня dragStart делает элемент прозрачным....и никакие стили не помогают сделать его нормальным.что делать?

[@АндрейВасютин-э9з]

function delBoard() {
const boards = document.querySelectorAll('.boards__item')
for (let i = 0; i < boards.length; i++) {
const board = boards[i]
board.addEventListener('dblclick', () => {
board.remove()
})
}
}
delBoard()
и в функцию добавления тоже прописать

[@lets_try_js]

Круто! )

[@ilnarbikkinyaev5473]

@@lets_try_js я сделал все похожим образом, но когда я хочу удалить listItem, то у меня все доска тоже стирается. Я так понял они выполняются одновременно. Как можно было бы разграничить области для клика, чтобы они удалялись не совместно?

[@АндрейЧашин-ы1у]

@@ilnarbikkinyaev5473 сделай проверку через ивент. если он нужного класса то удаляй если нет то нет. не стоит благодарности

[@Novel6789]

@@ilnarbikkinyaev5473 может добавить к событию клика .self ?

[@TheMrBorne]

Все делал так же в итоге карточка добавляется под кнопку, вместе с карточкой добавляется пустая карточка и не работает добавление карточки в другую доску.
Что не так может быть...

[@TheMrBorne]

Добавление задачи в новую доску сделал, заменив стрелочную функцию на обычную.

[@romaskhin]

Может сделать виртуальную клавиатуру при нажатии на неё будет выводиться в инпуте текст , но если мы введем с клавиатуры реальной текст чтобы блокировался если это можно или были звёздочки, т.е текст можно вводить только с виртуальной клавиатуры который мы сделали .

[@lets_try_js]

вот это интересная идея, спасибо )
сделал заметочку)

[@romaskhin]

@@lets_try_js будем ждать )

[@lets_try_js]

@@romaskhin не знаю когда, но это я точно сделаю, так как мне это действительно показалось интересным))

[@endoscopy8351]

Відео супер, хочу повторити і не виходить один момент - карточки при перетягуванні стають напівпрозорі. Як зробити їx непрозорими?

[@lets_try_js]

не помню как я это делал в коде, но скорее всего где-то нужно исправить свойство opacity с 0.5 до 1

[@ADULIK1994]

можно сделать рефакторинг кода ,,,скажем как на этом коде добавить localstorage. или кликать на элемент и открывался мадалъка с textare ,,, (для каждой элемента индивидуальная )

[@alimamedov9684]

Всем привет! У меня такая проблема: когда добавляю newItem в lists ( lists[0].append(newItem) ), то добавляется по "арифметической" прогрессии. При первом добавлении дополнительно один div добавляется (пустой), при втором добавлении уже 2 одинаковых div-ов (дублирует введенное значение), при третьем добавлении уже 3 одинаковых div-ов и так далее. // выражение const lists = document.querySelectorAll('.card__list'); я написал внутри функции addTask, так как иначе кнопки не работали и в консоли выходила ошибка lists[0] is undefined

[@lets_try_js]

Если что то работает не так, как должно это означает одно - код неправильный

[@alimamedov9684]

@@lets_try_js Роман, спасибо что откликнулся. Я бы хотел написать код точно как у тебя , но как уже сказал, вне функции я не могу присвоить значение lists переменной. Скорее всего в этом вся проблема. Сегодня пол дня пытался исправить это, не получается:(

[@lets_try_js]

У меня нет возможности помочь, нет пк при себе

[@endiffallengod]

@@alimamedov9684исправил это?

[@АндрейЧашин-ы1у]

в функции перетаскивания легче было бы через forEach делать

[@MrKumckuu]

Как при обновлении страницы, сохранять результат?

[@lets_try_js]

В данном случае например localstorage

[@ДмитрийКалганов-ю6э]

через базу данных делать
там по-сложнее

[@АндрейЧашин-ы1у]

@@lets_try_js я всю голову сломал как прикрутить localStorage. Не выходит ничего

[@dmitry3241]

Давай Попробуем: JavaScript можешь показать в следующем видео как правильно реализовать пагинацию на javascript? Было бы интересно посмотреть

[@lets_try_js]

Есть видео про пагинацию на реакт, если интересно
Там можно уловить суть просто как это работает, и внедрить в чистый js

[@bkrv]

Подскажите, зачем нужно было ставить таймер на ноль секунд ? какой в этом смысл если задержка нулевая ?

[@АндрейЧашин-ы1у]

привет. попробуй без таймера и увидешь что будет

[@serjbaidekin]

Ахха,Алгоритмы Ютуба хоть иногда нормальные видосы рекомендует =)

[@АндрейЧашин-ы1у]

нда удаление досок не такая уж и простоя задача и явно не в одну троку. если решать в лоб то при удалении карточки удаляется и сама доска.

[@vicerexp]

HOMBRE, POR FAVOR EN ESPAÑOL LOS SUBTITULOS

[@KlinovAS]

Не люблю SCSS. Вообще не знаю какая от него РЕАЛЬНАЯ польза кроме попугайнической потребности в каждой тупой компании. Создает длинный паравоз классов, что:
1. никак не экономит место
2. затрудняет редактирование, так как чтоб перебить правило, нужно создать еще длиннее паравоз и как правило до этого уже использовался !important
3. затрудняет редактирование, так как не срабатывает подсказка на GOTO # в место редактирование. Нет обратной совместимости!
4. Прекомпилятор использует язык, который мне нахрен не нужен. И это самое касается и JS дрочева, когда пишут на новом JS, но компилируют в старый. Хоть одну пользу назовите. Вам что руки отваляться если на чистом CSS напишете? Или вы побеждаете в конкурсе по скорости или по качеству? В чем превосходство?
Я делал личный прекомпилятор для:
- обновления версий. Когда редактируешь CSS, то в HTML или PHP редактируется *.js?ver0001 (+1), CSS
- *.TPL компилировался в PHP (если нужно прирост)
- Автоматический перевод с русского на украинский и английский, чтоб не использовать таблицы и переменный для перевода (клонировался HTML/PHP только другой каталог. Переводились только затронутые новые слова и то вручную, а так можно было HTML/CSS/JS редактировать - все быстро продублирует)
- еще несколько интересных но полезных тегов упрощающих жизнь, но SCSS никак не упрощает ничего. На Виниле CSS не хуже будет