basic code switcher implementation. Needs love but worx

public/scripts/index.js

@@ -0,0 +1,36 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // init highlight.js
+  hljs.initHighlightingOnLoad()
+
+  // Lesson code switcher logic
+  const modules = Array.from(document.getElementsByClassName('lesson-module-code'))
+
+  modules.forEach((module) => {
+    const triggers = Array.from(module.getElementsByClassName('lesson-module-code__trigger'))
+    const codes = Array.from(module.getElementsByClassName('lesson-module-code__code'))
+
+    const handleTriggerClick = (e) => {
+      const target = e.target.getAttribute('data-target')
+
+      // Mark correct trigger as active
+      triggers.forEach((trigger) => {
+        trigger.classList.remove('lesson-module-code__trigger--active')
+      })
+      e.target.classList.add('lesson-module-code__trigger--active')
+
+      // Show correct code fields
+      codes.forEach((code) => {
+        code.classList.remove('lesson-module-code__code--active')
+        if (code.id === target) {
+          code.classList.add('lesson-module-code__code--active')
+        }
+      })
+    }
+
+    // Attach click handler to triggers
+    triggers.forEach((trigger) => {
+      trigger.onclick = handleTriggerClick
+    })
+  })
+})
+

public/stylesheets/style.css

@@ -2003,3 +2003,48 @@ github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 .lesson__cta {
     margin-bottom: 0;
 }
+
+.lesson-module-code {}
+
+.lesson-module-code__header {}
+
+.lesson-module-code__code-area {
+    background: #f7f9fa;
+}
+
+.lesson-module-code__trigger {
+    display: inline-block;
+
+    padding: 0 1em;
+    margin-right: 1em;
+
+    background: rgb(198, 199, 200);
+
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+
+    font-family: 'robotomedium', Helvetica, sans-serif;
+    font-size: 0.7em;
+    color: #fff;
+}
+
+.lesson-module-code__trigger:last-child {
+  margin-right: 0;
+}
+
+.lesson-module-code__trigger--active {
+      background: #f7f9fa;
+      color: #a9b9c0;
+}
+
+.lesson-module-code__code {
+    display: none;
+}
+
+.lesson-module-code__code pre {
+  margin: 0;
+}
+
+.lesson-module-code__code--active {
+      display: block;
+}