Spring/script.js at master · jskiller1404/Spring · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
const menuArrows = document.querySelectorAll('.menu-arrow');
if (menuArrows.length > 0) {
  Array.from(menuArrows).forEach((item) => {
    const menuArrow = item;
    menuArrow.addEventListener('click', function (e) {
      menuArrow.parentElement.classList.toggle('_active')
    });
  });
}

const iconMenu = document.querySelector('.header-burger');
if (iconMenu) {
  const menuBody = document.querySelector('.menu-body');
  iconMenu.addEventListener('click', function (e) {
    document.body.classList.toggle('_lock')
    iconMenu.classList.toggle('_active');
    menuBody.classList.toggle('_active')
  });
}

document.querySelector('.proj-input').oninput = function () {
  setTimeout(() => {
    let val = this.value.trim().toLowerCase();
    let projects = PROJECTS;
    let htmlCatalog = "";
    if (val !== '') {
      let filteredArr = projects.filter(({ title, text }) => {
        return title.toLowerCase().indexOf(val) !== -1 || text.toLowerCase().indexOf(val) !== -1
      })
      if (filteredArr.length === 0) {
        htmlCatalog = `
      <div>
        <h1 class = 'no-results'>No Results</h1>
      </div>
      `
      } else {
        htmlCatalog += filteredArr.reduce((html, { imageUrl, title, text }) => {
          return html += `
            <a class="project-box">
              <div class="proj-icon-box">
                <img class="proj-icon" src=${imageUrl}/>
              </div>
              <div class="proj-text-conteiner">
                <h3 class="proj-text-title">${title}</h3>
                <p class="proj-text">${text}</p>
              </div>
            </a>
           `
        }, ``)
      }
    } else {
      projects.forEach(({ imageUrl, title, text }) => {
        htmlCatalog += `
          <a class="project-box">
            <div class="proj-icon-box">
              <img class="proj-icon" src=${imageUrl}/>
            </div>
            <div class="proj-text-conteiner">
              <h3 class="proj-text-title">${title}</h3>
              <p class="proj-text">${text}</p>
            </div>
          </a>
        `;
      });
    }
    const html = `
        <div class="project-box-container">
          ${htmlCatalog}
        </div>
    `;
    Array.from(ROOT_PROJECTS).forEach(item => {
      item.innerHTML = html
    })
  }, 300)
}