TGViewer
Точка входа в программирование Точка входа в программирование @prog_point · 18K subscribers
Post #4985 1.05K
Соберите галерею на чистом JavaScript: от циклов до событий

Упражнение MDN даёт готовый скелет: вы добавляете переключение миниатюр, кнопку затемнения и обработку кликов.

Здесь собраны почти все базовые куски JavaScript: выборка элементов через document.querySelector, перебор коллекции, обработчик клика и изменение атрибутов. Главное — увидеть, как отдельные конструкции складываются в один работающий механизм.

Совет: не копируйте готовое решение. Сначала попробуйте вывести одну миниатюру в большое изображение, потом добавьте остальные, а кнопку затемнения оставьте на последок.
MDN Web Docs Challenge: Image gallery - Learn web development | MDN In this challenge, we'll get you to build a fairly common item you'll see on a lot of websites — a JavaScript-powered image gallery. Along the way, you'll be tested on your knowledge of loops, functions, conditionals, events, DOM scripting, and object basics.
  • 🤔 2
  • ❤ 1
More from @prog_point
  1. Sep 26, 2026Как подготовить репозиторий к пулреквестам от ИИ-агентов Если ведёте учебный open source-п…
  2. Sep 26, 2026Как тренировать интерфейсы с ИИ, не отдавая ему всю работу Возьмите небольшой экран и снач…
  3. Sep 26, 2026Как разделить результат программы и ошибки в Python Функция print() по умолчанию пишет в с…
  4. Sep 26, 2026Как собрать турнирную сетку FIFA на CSS Grid и subgrid На странице FIFA каждый столбец рау…
  5. Sep 22, 2026Как искать по отсортированному списку с bisect В отсортированном списке не обязательно пер…
  6. Sep 22, 2026Как добавить динамику на статический сайт без своего сервера Статический сайт может получа…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →