random word shortcode

This commit is contained in:
zoe 2022-04-16 22:01:53 +02:00
parent 26372fdcca
commit d267fc4356
10 changed files with 91 additions and 3 deletions

21
\ Normal file
View file

@ -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() {}

View file

@ -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 {

View file

@ -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%;

View file

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

View file

@ -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>

View file

@ -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 }}">

View file

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

View file

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

View file

@ -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();
});

31
static/js/randomword.js Normal file
View file

@ -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)];
};