Coding-Challenges/index.html at main · Lachy-Dauth/Coding-Challenges · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lachlan's Coding Challenges</title>
  <link rel="icon" href="./favicon.svg" type="image/svg+xml">
  <link rel="stylesheet" href="./styles.css">
</head>
<body>

  <header class="site-header">
    <p class="header-eyebrow">Lachlan Dauth &mdash; Projects</p>
    <h1 class="header-title">CODING<br><em>CHALLENGES</em></h1>
    <div class="header-meta">
      <span class="header-meta-item" id="project-count">4 projects</span>
      <span class="header-meta-sep"></span>
      <span class="header-meta-item">Games &middot; Simulations &middot; Theory</span>
      <span class="header-meta-sep"></span>
      <span class="header-meta-item">Select to explore</span>
    </div>
  </header>

  <ul class="challenges-list" id="list"></ul>

  <footer class="site-footer">
    <span class="footer-label">Lachlan Dauth</span>
    <span class="footer-label" id="year-label"></span>
  </footer>

  <script>
    fetch('./challenges.json').then(r => r.json()).then(ITEMS => {

    document.getElementById('project-count').textContent = ITEMS.length + ' projects';

    const ARROW = `<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M2 7h10M7 2l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>`;

    const PLUS = `<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 1v12M1 7h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
    </svg>`;

    const list = document.getElementById('list');

    ITEMS.forEach((item, i) => {
      const li = document.createElement('li');
      li.className = 'c-item';
      li.setAttribute('role', 'button');
      li.setAttribute('aria-expanded', 'false');
      li.setAttribute('tabindex', '0');

      const num = String(i + 1).padStart(2, '0');

      const launchHTML = item.links
        ? `<div class="c-launch-group">${item.links.map(l =>
            `<a class="c-launch" href="${l.href}">${l.label} ${ARROW}</a>`
          ).join('')}</div>`
        : `<a class="c-launch" href="${item.href}">Launch ${ARROW}</a>`;

      li.innerHTML = `
        <div class="c-header">
          <span class="c-num">${num}</span>
          <span class="c-title">${item.title}</span>
          <span class="c-tag">${item.tag}</span>
          <span class="c-arrow">${PLUS}</span>
        </div>
        <div class="c-body" role="region">
          <div class="c-body-inner">
            <div class="c-body-content">
              <div class="c-desc">
                ${item.date ? `<span class="c-date">${item.date}</span>` : ''}
                <p>${item.desc}</p>
                <div class="c-chips">
                  ${item.chips.map(c => `<span class="c-chip">${c}</span>`).join('')}
                </div>
              </div>
              ${launchHTML}
            </div>
          </div>
        </div>
      `;

      // toggle
      const header = li.querySelector('.c-header');
      const body   = li.querySelector('.c-body');

      function toggle() {
        const isOpen = li.classList.contains('open');

        // close all others
        document.querySelectorAll('.c-item.open').forEach(el => {
          el.classList.remove('open');
          el.querySelector('.c-body').classList.remove('open');
          el.setAttribute('aria-expanded', 'false');
        });

        if (!isOpen) {
          li.classList.add('open');
          body.classList.add('open');
          li.setAttribute('aria-expanded', 'true');
        }
      }

      header.addEventListener('click', toggle);
      li.addEventListener('keydown', e => {
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); }
      });

      // stop launch links from toggling closed
      li.querySelectorAll('.c-launch').forEach(a => a.addEventListener('click', e => e.stopPropagation()));

      list.appendChild(li);
    });

    });

    // year
    document.getElementById('year-label').textContent = new Date().getFullYear();
  </script>

</body>
</html>