Ниже по тексту идут долгие разъяснения о сути происходящего и ссылка ведет на код, в котором сперва можно заблудиться.
Я недавно закончил курс по javascript от этого сайта и в данный момент времени пытаюсь обобщить полученные данные, а так же выявить белые пятна, которые остались по завершению. Одна из проблем это явное неумение задать правильные имена методам и свойствам, но с этим я борюсь постепенно, а вот неумение правильно организовать код весьма мешает. Я пытаюсь создать веб-компонент, исключительно в учебных целях, в котором бы использовались основные темы, затронутые в курсе.
То, что имеется сейчас размещено в песочнице вот
здесь. На данный момент это просто 2 кнопки. При нажатии на первую появляется div с картинкой, при нажатии на вторую div исчезает. Исчезновение не доработано, по причине того, что код уже раздулся и стал нечитаемым. Поэтому я притормозил и решил обратиться за помощью. Итоговая цель этой затеи создать компонент, разметка которого включается в страницу, к ней подключается наш скрипт собранный с помощью webpack и пропущенный через babel и стили нашей разметки. Наш компонент умеет отображать аватар по клику на кнопку, по зажатию кнопки мыши на картинке, справа будет появляться контейнер, куда мы можем перетащить наш аватар, после перетаскивания кнопка скрыть аватар становится недоступной. Генерация картинок осуществляется через запрос к серверу, где из полученного json файла выбирается рандомная картинка. Это то, что я хочу реализовать. Буду чрезмерно благодарен, если кто то дочитал до этого момента и уделит время чтоб посмотреть на то, что сейчас я имею и подскажет как вышеперечисленное грамотнее всего организовать.