JS-DOM(поиск терминов и открытие модального окна)

/* Тестовые данные */

const terms = [
  {
    key: 'А',
    items: [
      {
        term: 'Абулия',
        description: '<p><dfn>Абули́я</dfn> (<a href="#">др.-греч.</a> ἀ- — отрицательная частица и βουλή — воля) — медицинский термин из области <a href="#">неврологии</a> и <a href="#">психиатрии</a>, обозначающий состояние патологического отсутствия <a href="#">воли</a>, при котором пациент не способен выполнить действие, необходимость которого осознаётся, не способен принять необходимое решение. При данном состоянии больные ощущают отсутствие желаний (частичное или полное) ко всякой деятельности. Менее тяжёлым состоянием понижения волевой активности является гипобулия. Абулия, по уровню снижения мотивации, находится между более лёгким состоянием апатии и более тяжёлым состоянием акинетического мутизма. Сочетание абулии с обездвиженностью называется абулически-акинетическим синдромом, а с апатией — апатико-абулическим, также известным как <a href="#">апато-абулический</a>.</p>',
        cite: 'Материал из Википедии — свободной энциклопедии',
      },
      {
        term: 'Абстиненция',
        description: '<p><dfn>Абстине́нция</dfn> (от <a href="#">нем.</a> <i>Abstinenz</i> и <a href="#">лат.</a> <i>Abstinentia</i>: воздержность, задержка, задержание, воздержание, воздержанность, а также пост, голодание, бескорыстие, честность) — в отличие от традиционного, <a href="#">наркологического</a> значения термина, в <a href="#">психоанализе</a> употребляется для описания состояния больных истерией страха и неврозом навязчивых состояний в процессе психоаналитической терапии. Абстиненция рассматривается не как патогенный фактор, а скорее как фактор, поддерживающий оптимальный уровень <a href="#">фрустрации</a>, необходимый для достижения терапевтического эффекта.</p>',
        cite: 'Материал из Википедии — свободной энциклопедии',
      },
      {
        term: 'Авторитетность',
        description: '<p>Имеющий <a href="#">авторитет</a>, заслуживающий признания, доверия и уважения.</p><p>Как видите, работа даже такого бесспорно авторитетного режиссёра, как Станиславский, подвергалась некоторому сомнению со стороны критики. Блейхман отвечал без лишних слов: Совет для анархистов совершенно не авторитетен; если к его решению присоединятся большевики, то это ничего не значит, Совет в целом служит буржуазии и помещикам; никаких определённых намерений у анархистов на завтра нет; участвовать в манифестации они будут ― со своими чёрными знамёнами, а насчет того, будут ли с оружием, то, может быть, пойдут без оружия, а может быть, и с оружием.</p>',
        cite: 'Н. Н. Суханов, «Записки о революции / Книга 4», 1918–1921 г. (цитата из Национального корпуса русского языка, см. Список литературы)',
      },
      {
        term: 'Адаптация',
        description: '<p><dfn>Адапта́ция</dfn> (лат. adapto «приспособляю») — приспособление строения и функций организма, его органов и клеток к условиям внешней среды. Процессы адаптации направлены на сохранение <a href="#">гомеостаза</a>.</p>',
        cite: 'Материал из Википедии — свободной энциклопедии',
      },
      {
        term: 'Аддикция',
        description: '<p><dfn>Адди́кция</dfn> (<a href="#">англ.</a> <i>addiction</i> — зависимость, пагубная привычка, привыкание), в широком смысле, — ощущаемая человеком навязчивая потребность в определённой деятельности. Термин часто употребляется для таких явлений, как лекарственная зависимость, наркомания, но теперь больше применяется не к химическим, а к психологическим зависимостям, например, поведенческим, примерами которых могут служить: интернет-зависимость, игромания, шопоголизм, психогенное переедание, фанатизм, зависимость от порнографии и т. п.</p>',
        cite: 'Материал из Википедии — свободной энциклопедии',
      },
      {
        term: 'Акцентуация',
        description: '<p><dfn>Акцентуа́ция</dfn>, акцентуа́ция хара́ктера, акцентуа́ция ли́чности, акцентуи́рованная ли́чностная черта́ (от <a href="#">лат.</a> <i>accentus</i> — ударение) — находящаяся в пределах клинической нормы особенность характера (в других источниках — личности), при которой отдельные его черты чрезмерно усилены, вследствие чего обнаруживается избирательная уязвимость в отношении одних психогенных воздействий при сохранении хорошей устойчивости к другим. Акцентуации не являются психическими расстройствами, но по ряду своих свойств схожи с расстройствами личности, что позволяет делать предположения о наличии между ними связи.</p>',
        cite: 'Материал из Википедии — свободной энциклопедии',
      },
      {
        term: 'Альтруизм',
        description: '<p><dfn>Альтруи́зм</dfn> (<a href="#">лат.</a> <i>Alter</i> — другой, другие) — понятие, которым осмысляется активность, связанная с бескорыстной заботой о благополучии других; соотносится с понятием самоотверженность — то есть с приношением в жертву своих выгод в пользу блага другого человека, других людей или в целом — ради общего блага.</p>',
        cite: 'Материал из Википедии — свободной энциклопедии',
      },
      {
        term: 'Апперцепция',
        description: '<p><dfn>Апперцепция</dfn> (<a href="#">лат.</a> <i>ad</i> — к и <a href="#">лат.</a> <a>perceptio</a> — восприятие) — это процесс, в результате которого элементы сознания становятся ясными и отчетливыми.</p><p>Это одно из фундаментальных свойств <a href="#">психики человека</a>.</p><p>Данное свойство выражается в том, что человек воспринимает предметы и явления внешнего мира обусловленно - в тесной взаимосвязи друг с другом. Человек осознает то, как он воспринимает внешний мир. Данное восприятие зависит от запаса определенных знаний и опыта, а также от конкретного психического состояния его <a href="#">личности</a>. Восприятие внешнего мира обусловлено особенностями общего содержания психической жизни в целом.</p>',
        cite: 'Материал из Википедии — свободной энциклопедии',
      },
      {
        term: 'Атрибуция',
        description: '<p><dfn>Атрибуция</dfn> (<a href="#">лат.</a> <i>attributio</i> — приписывание) — психологический термин, обозначающий механизм объяснения причин поведения другого человека.</p>',
        cite: 'Материал из Википедии — свободной энциклопедии',
      },
      {
        term: 'Аффилиация',
        description: '<p><dfn>Аффилиация</dfn> (аффиляция, <a href="#">англ.</a> <i>affiliation</i> — «соединение, связь» от позднелатинского filialis — <a href="#">«сыновний»</a>) — это стремление быть в обществе других людей, потребность человека в создании тёплых, доверительных, эмоционально значимых отношений с другими людьми. Стремление к сближению с людьми, <a href="#">дружба</a>, <a href="#">любовь</a>, <a href="#">общение</a> — всё это попадает под понятие аффилиация. Формирование данной потребности обусловлено характером взаимоотношений с родителями и сверстниками в раннем детстве и может нарушаться при ситуациях, сопряжённых с тревогой, неуверенностью в себе и приводящих к возникновению чувства одиночества, беспомощности.</p>',
        cite: 'Материал из Википедии — свободной энциклопедии',
      },
    ],
  },
  {
    key: 'Б',
    items: [
      {
        term: 'Базальные эмоции',
        description: '<p><dfn>Базальные эмоции</dfn> — теоретический конструкт, объединяющий эмоции минимального набора, на базе которых формируется все многообразие эмоциональных процессов и состояний. К подобным эмоциям относят эмоции радости, горя (печали), страха, гнева, удивления, отвращения.</p>',
        cite: 'Материал из Википедии — свободной энциклопедии',
      },
      {
        term: 'Бионика',
        description: '<p><dfn>Био́ника</dfn> (от <a href="#">др.-греч.</a> βίον «живущее») — прикладная наука о применении в технических устройствах и системах принципов организации, свойств, функций и структур живой природы, то есть формах живого в природе и их промышленных аналогах.</p>',
        cite: 'Материал из Википедии — свободной энциклопедии',
      },
    ],
  },
  {
    key: 'В',
    items: [],
  },
  {
    key: 'Г',
    items: [],
  },
  {
    key: 'Д',
    items: [],
  },
  {
    key: 'Е',
    items: [],
  },
  {
    key: 'Ж',
    items: [],
  },
  {
    key: 'И',
    items: [],
  },
  {
    key: 'К',
    items: [],
  },
  {
    key: 'Л',
    items: [],
  },
  {
    key: 'М',
    items: [],
  },
  {
    key: 'Н',
    items: [],
  },
  {
    key: 'О',
    items: [],
  },
  {
    key: 'П',
    items: [
      {
        term: 'Память',
        description: '<p><dfn>Па́мять</dfn> — это общее обозначение комплекса познавательных способностей и высших психических функций, относящихся к накоплению, сохранению и воспроизведению знаний, умений и навыков.</p><p>Память в разных формах и видах присуща всем высшим животным. Способность к памяти и обучению все животные унаследовали у общего предка, который жил примерно 600 миллионов лет назад. Наиболее развитый уровень памяти характерен для человека.</p>',
        cite: 'Материал из Википедии — свободной энциклопедии',
      },
      {
        term: 'Паника',
        description: '<p><dfn>Па́ника</dfn> — внезапное чувство <a href="#">страха</a>, настолько сильное, что подавляет <a href="#">логическое мышление</a>. Паника может возникать у отдельных людей или проявляться в больших группах как массовая паника.</p>',
        cite: 'Материал из Википедии — свободной энциклопедии',
      },
      {
        term: 'Персонализация',
        description: '<p><dfn>Персонализация</dfn> (<a href="#">лат.</a> <i>persona</i> – личность) – процесс осознания субъектом собственной личности как общественно значимой, результатом чего выступает его активная деятельность, нацеленная на трансляцию другим своей индивидуальности. Персонализация, иными словами, – это потребность индивида в проявлении своей личности.</p>',
        cite: 'Материал из Википедии — свободной энциклопедии',
      },
    ],
  },
  {
    key: 'Р',
    items: [],
  },
  {
    key: 'С',
    items: [],
  },
  {
    key: 'Т',
    items: [],
  },
  {
    key: 'У',
    items: [],
  },
  {
    key: 'Ф',
    items: [],
  },
  {
    key: 'Х',
    items: [],
  },
  {
    key: 'Ч',
    items: [],
  },
  {
    key: 'Ш',
    items: [],
  },
  {
    key: 'Э',
    items: [],
  },
  {
    key: 'Ю',
    items: [],
  },
];

// Start code
// Находим целевой контейнер с элементами
const navContainer = document.querySelector('.site-nav');
// Находим контейнер с определениями
const termsContainer = document.querySelector('.glossary');
// Находим контейнер с модальным окном
const modalWindowContainer = document.querySelector('.modal');
// Находим кнопку закрытия модального окна
  const buttonCloseModalWindow = document.querySelector('.close-button')
// Функция вывода элементов на страницу
const createNavItemString = ({key, items}) => 
  `<li class="site-nav-item">
    <a class="site-nav-link" ${items.length > 0 ? `href="#${key}"` : ''}>${key}</a>
  </li>
  `;
// Функция вывода секции с терминами
const createSectionString = ({key, items}) => 
`<section class="glossary-section">
  <h2 id="${key}">${key}</h2>
  <ul class="glossary-list">
    ${items.map(({term}) => `
      <li class="glossary-item">
        <a class="glossary-link" data-value="${term}" href="#">${term}</a>
      </li>
    `).join('')}
   </ul>
  </section> 
`;

// Функция вывода модального окна
const createTermModalWindow = ({items}) => 
  `<div class="modal-popup">
    <button class="close-button" type="button">
      <span class="visually-hidden">Закрыть окно</span>
    </button>
    <div class="modal-content">
       ${items.map(({description, cite}) => 
       `<p>${description}</p>
       <cite>${cite}</cite>
       `).join('')}
    </div>
   </div>
  `;

// Функция очистки HTML и создания нового массива с разметкой
const render = () => {
  navContainer.innerHTML = '';

  const navElementsString = terms.map((item) => createNavItemString(item)).join('');

  navContainer.insertAdjacentHTML('beforeend', navElementsString);

  termsContainer.innerHTML = '';

  const termsElementsString = terms.map((item) => createSectionString(item)).join('');

  termsContainer.insertAdjacentHTML('beforeend', termsElementsString);
};

// Обработчик события клика на определение
const termClickHandler = (evt) => {
  const element = evt.target.closest('a');

  if (!element) {
    return;
  }
  evt.preventDefault();

  const value = element.dataset.value;

  const termsGroup = terms.find(({key}) => value.toUpperCase().indexOf(key.toUpperCase()) === 0);

  if (termsGroup && termsGroup.items) {
    const currentTerm = termsGroup.items.find((item) => item.term === value);

    if (currentTerm) {
      modalWindowContainer.classList.add('shown');
      const termString = createTermModalWindow(currentTerm);
 
      modalWindowContainer.innerHTML = '';
      modalWindowContainer.insertAdjacentHTML('beforeend', termString);
    }
  }
};

// Функция которая запускается при запуске страницы
const init = () => {
  render();

  termsContainer.addEventListener('click', termClickHandler);
}
// Вызов функции
init();

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff") format("woff2"),
    url("../fonts/Inter-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.woff") format("woff2"),
    url("../fonts/Inter-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2"),
    url("../fonts/Inter-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

body {
  margin: 0;
  font-family: "Inter", "Arial", sans-serif;
  font-size: 18px;
  line-height: 26px;
  color: #112933;
}

.visually-hidden {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.container {
  width: 1200px;
  margin: 0 auto;
}

.main-header {
  padding: 15px 0 10px;
  text-align: center;
  background-color: #f5f7f7;
}

.main-page {
  margin-bottom: 40px;
}

.main-page h1 {
  margin: 60px 0 40px;
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  text-align: center;
}

.site-nav {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 25px 0 20px;
  margin: 0 75px;
  list-style: none;
  border-top: 1px solid rgba(88, 91, 92, 0.1);
  border-bottom: 1px solid rgba(88, 91, 92, 0.1);
}

.site-nav-item {
  margin-right: 1.55em;
}

.site-nav-item:last-child {
  margin-right: 0;
}

.site-nav-link {
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}

.site-nav-link:hover,
.site-nav-link:focus {
  opacity: 0.7;
}

.site-nav-link:active {
  opacity: 0.5;
}

.site-nav-link:not([href]) {
  opacity: 0.3;
}

.glossary-section {
  padding-top: 50px;
  padding-bottom: 20px;
}

.glossary-section h2 {
  margin: 0 0 25px 0;
  font-weight: 600;
  font-size: 32px;
  line-height: 39px;
  text-transform: capitalize;
}

.glossary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-gap: 40px;
}

.glossary-item {
  margin-bottom: 20px;
}

.glossary-item a {
  font-weight: 500;
  font-size: 22px;
  line-height: 27px;
  color: inherit;
  text-decoration: none;
}

.glossary-item a:hover,
.glossary-item a:focus {
  color: #257799;
}

.glossary-item a:active {
  opacity: 0.5;
}

.main-footer {
  padding: 15px 0 10px;
  text-align: center;
  background-color: #f5f7f7;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
}

.modal.shown {
  display: block;
}

.modal-popup {
  position: fixed;
  width: 920px;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  padding: 55px 65px 50px 55px;
  background-color: #ffffff;
  box-shadow: 2px 2px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.modal-content p {
  margin: 0 0 10px 0;
  font-size: 22px;
  line-height: 31px;
  color: #112933;
}

.modal-content dfn {
  font-style: normal;
  font-weight: 500;
}

.modal-content cite {
  display: block;
  font-style: normal;
  margin-top: 40px;
  text-align: right;
}

.modal-content a {
  color: #257799;
  text-decoration: none;
}

.modal-content a:hover,
.modal-content a:focus {
  opacity: 0.7;
}

.modal-content a:active {
  opacity: 0.5;
}

.close-button {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 36px;
  height: 36px;
  background-color: transparent;
  border: none;
  background-image: url("../img/close-btn.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

.close-button:hover {
  opacity: 0.7;
}

.close-button:focus {
  outline: 1px dotted rgba(0, 13, 51, 0.6);
}

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <title>Словарь основных психологических терминов</title>
  </head>
  <body>
    <header class="main-header">
      <a class="main-header-logo" href="#">
        <img src="img/logo.svg" width="40" height="49" alt="Логотип словаря">
      </a>
    </header>
    <main class="main-page container">
      <h1>Словарь основных психологических терминов</h1>
      <nav class="main-nav">
        <ul class="site-nav">
          <!--ссылки из букв, они будут заменены при выполнении js-скрипта -->
          <li class="site-nav-item">
            <a class="site-nav-link" href="#а">А</a>
          </li>
          <li class="site-nav-item">
            <a class="site-nav-link" href="#б">Б</a>
          </li>
          <li class="site-nav-item">
            <a class="site-nav-link">В</a>
          </li>
          <li class="site-nav-item">
            <a class="site-nav-link">Г</a>
          </li>
          <li class="site-nav-item">
            <a class="site-nav-link" href="#Д">Д</a>
          </li>
          <!--ссылки из букв-->
        </ul>
      </nav>
      <section class="glossary">
        <!-- словарь с разделами, один раздел - термины, начинающиеся на одну букву алфавита -->
        <!-- раздел с терминами на определенную букву, будет заменён при выполнении js-скрипта -->
        <section class="glossary-section">
          <h2 id="а">А</h2>
          <ul class="glossary-list">
            <li class="glossary-item">
              <a href="#">Абстиненция</a>
            </li>
            <li class="glossary-item">
              <a href="#">Абулия</a>
            </li>
            <li class="glossary-item">
              <a href="#">Авторитетность</a>
            </li>
            <li class="glossary-item">
              <a href="#">Адаптация</a>
            </li>
            <li class="glossary-item">
              <a href="#">Аддикция</a>
            </li>
            <li class="glossary-item">
              <a href="#">Акцентуация</a>
            </li>
            <li class="glossary-item">
              <a href="#">Альтруизм</a>
            </li>
            <li class="glossary-item">
              <a href="#">Апперцепция</a>
            </li>
            <li class="glossary-item">
              <a href="#">Атрибуция</a>
            </li>
            <li class="glossary-item">
              <a href="#">Аффилиация</a>
            </li>
          </ul>
        </section>
      </section>
    </main>
    <footer class="main-footer">
      <a class="main-footer-logo" href="#">
        <img src="img/logo.svg" width="40" height="49" alt="Логотип словаря">
      </a>
    </footer>
    <div class="modal">
      <div class="modal-popup">
        <button class="close-button" type="button">
          <span class="visually-hidden">Закрыть окно</span>
        </button>
        <div class="modal-content">
           <!--статья с определением термина, будет заменена при выполнении js-скрипта -->
           <p>Па́мять — это общее обозначение комплекса познавательных способностей и высших психических функций, относящихся к накоплению, сохранению и воспроизведению знаний, умений и навыков.</p>
           <cite>Материал из Википедии — свободной энциклопедии</cite>
           <!--статья с определением термина -->
        </div>
      </div>
    </div>
    <script src="js/script.js"></script>
  </body>
</html>