Часть 2: Создаем Ascii art как middle разработчик JS, добавил Scale и обернем функционал в Class

Описание

Добро пожаловать на вторую часть цикла видео по созданию ASCII Art конвертера на JavaScript! В этом уроке мы продолжаем улучшать наш проект, добавляя новые функции и делая код чище и структурированнее.

📌 Что вас ждет в этом видео?

- Добавим возможность масштабировать изображение через ползунок (Scale Image).
- Исправим ошибки в коде и обсудим три разных способа их решения.
- Обернем наш функционал в класс AsciiArtConvertor и разберем его работу.
- Улучшим читаемость кода с помощью стрелочных функций и удобной структуры.
- Тестируем наш шедевр в конце видео🎨

💬 Общее описание плейлиста
Постараюсь снять цикл видео от новичка до профи.
Спасибо за просмотр и до встречи в следующем видео! 🎉

🎥 О чем данное видео?
00:00 - Введение
00:43 - Мой канал на Rutube
00:53 - Добавляем input Scale Image и навешиваем событие
02:23 - Рефакторинг onload image
03:41 - Исправляем ошибку
04:26 - 3 решения как сделать код лучше
04:48 - 2 способ: вызов колбека onload()
05:28 - 3 способ: тригерим событие изменения ползунка
06:28 - Правим стили
06:42 - Переделываем на стрелочные функции
07:10 - Разберем новую функцию getAsciiChar()
10:40 - Напишем бесполезную функцию reverse()
12:11 - Оборачиваем функции в Class
13:44 - Создаем AsciiArtConverter класс
16:43 - Заносим события addEventListener в Конструтор
19:35 - Переносим все функции в класс
23:29 - Тестируем шедевр
24:13 - Всем пока, я устал! 😅

🔗 Проект
https://github.com/yesworld/tutorial-ascii-art

🔗 Youtube
https://youtu.be/NEGuqihT2Rg

🔗 Donate
https://boosty.to/dev_yesworld

#html #js #javascript #tutorial #junior #game #git #web #pattern #oop #coding #animation