random word shortcode

\

@@ -0,0 +1,21 @@
+const buttons = document.getElementsByClassName("randomword-button");
+
+export function randomizeWords() {
+  registerButtons();
+}
+
+function registerButtons() {
+  for (let button of buttons) {
+    button.addEventListener("click", function () {
+      button.innerHTML = processWordlist(button.getAttribute("data-wordlist"));
+    });
+    button.click();
+  }
+}
+
+// takes all the words and returns only one
+function processWordlist(wordlist) {
+  return wordlist;
+}
+
+function stripSpaces() {}

assets/scss/colors.scss

@@ -35,6 +35,25 @@ a {
   color: $dark-ln;
 }
 
+.randomword-button{
+  &.light {
+    border-color: $light-fg;
+    background-color: $light-bg;
+    color: $light-fg;
+    &:hover {
+      color: $light-bg;
+      background-color: $light-fg;
+    }
+  }
+  border-color: $dark-fg;
+  background-color: $dark-bg;
+  color: $dark-fg;
+  &:hover{
+    color: $dark-bg;
+    background-color: $dark-fg;
+  }
+}
+
 a.footer-nav-item.active,
 a.footer-nav-item:hover {
   &.light {

assets/scss/layout.scss

@@ -21,13 +21,19 @@ footer {
   margin-bottom: 84pt;
 }
 
+.randomword-button {
+  width: auto;
+  height: auto;
+}
+
 #content p,
 #content ul,
 #content ol,
 #content table,
 code,
 .postdescription,
-hr
+hr,
+#content div .video-player
 {
   margin-right: 24%;
   margin-left: 24%;

assets/scss/style.scss

@@ -108,3 +108,12 @@ ul a{
     padding: 0.12em;
   }
 }
+
+.randomword-button {
+  border-style: solid;
+  padding: 0.12em;
+  border-radius: 0;
+   &::before {
+    content: " ";
+  }
+}

layouts/_default/baseof.html

@@ -5,6 +5,5 @@
     {{- partial "header.html" . -}}
     <div id="content">{{- block "main" . }}{{- end }}</div>
     {{- partial "footer.html" . -}}
-    <script type="module" src="/js/main.js"></script>
   </body>
 </html>

layouts/partials/head.html

@@ -2,6 +2,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{{ .Title }}@{{ .Site.Title }}</title>
+    <script type="module" src="/js/main.js"></script>
     {{ $css := resources.Get "scss/main.scss" }}
     {{ $css = $css | toCSS }}
     <link rel="stylesheet" href="{{ $css.RelPermalink }}">

layouts/shortcodes/randomword.html

@@ -0,0 +1 @@
+<button class="randomword-button colorswitch" data-wordlist="{{.Get 0}}"></button>

static/js/lightmode.js

@@ -12,7 +12,6 @@ function switchToLight() {
 function switchToDark() {
   button.innerHTML = "";
   for (let item of colorswitchers) {
-    console.log(item);
     item.classList.remove("light");
   }
 }

static/js/main.js

@@ -1,7 +1,9 @@
 import { updateMode } from "./lightmode.js";
 import { activateHamburger } from "./hamburger.js";
+import { randomizeWords } from "./randomword.js";
 
 document.addEventListener("DOMContentLoaded", () => {
   updateMode();
   activateHamburger();
+  randomizeWords();
 });

static/js/randomword.js

@@ -0,0 +1,31 @@
+const buttons = document.getElementsByClassName("randomword-button");
+
+export function randomizeWords() {
+  registerButtons();
+}
+
+function registerButtons() {
+  for (let button of buttons) {
+    button.addEventListener("click", function () {
+      let new_word = processWordlist(button.getAttribute("data-wordlist"));
+      // do this so people dont have to click twice
+      if (button.innerHTML == new_word) {
+        button.click();
+        console.log("oh no!!! this was already the value!");
+      } else {
+        button.innerHTML = new_word;
+      }
+    });
+    button.click();
+  }
+}
+
+// takes all the words and returns only one
+function processWordlist(wordlist) {
+  let seperated = wordlist.split(",");
+  return seperated.random();
+}
+
+Array.prototype.random = function () {
+  return this[Math.floor(Math.random() * this.length)];
+};