This commit is contained in:
Auric Vente 2021-06-21 12:14:57 -06:00
commit ece60fc6ea
5 changed files with 4721 additions and 0 deletions

169
base.js Normal file
View File

@ -0,0 +1,169 @@
const M = {}
M.init = function () {
M.numb = M.$("#numb")
M.filter = M.$("#filter")
M.keydec()
M.start_widgets()
M.update()
if (M.numb.value) {
M.do_numb_action()
}
if (M.filter.value) {
M.do_filter_action()
}
M.filter.focus()
M.move_cursor_to_end(M.filter)
}
M.$ = function (s, parent = false) {
if (!parent) {
parent = document
}
return parent.querySelector(s)
}
M.$$ = function (s, parent = false, direct = false) {
if (!parent) {
parent = document
}
let items = Array.from(parent.querySelectorAll(s))
if (direct) {
items = items.filter((node) => node.parentNode === parent)
}
return items
}
M.debounce = function (func, wait, immediate) {
let timeout
return function executedFunction() {
let context = this
let args = arguments
let later = function () {
timeout = null
if (!immediate) func.apply(context, args)
}
let callNow = immediate && !timeout
clearTimeout(timeout)
timeout = setTimeout(later, wait)
if (callNow) func.apply(context, args)
}
}
M.move_cursor_to_end = function (element) {
element.selectionStart = element.selectionEnd = element.value.length
}
M.do_numb_action = function () {
M.numb.value = parseInt(M.numb.value.replace(/\D/g, ""))
if (M.numb.value > 9999) {
M.numb.value = 9999
} else if (M.numb.value != "" && M.numb.value < 0) {
M.numb.value = 0
}
M.update(M.filter.value.trim())
}
M.do_filter_action = function () {
M.update(M.filter.value.trim())
}
M.keydec = function () {
M.numb.addEventListener(
"input",
M.debounce(function (e) {
M.do_numb_action()
}, 350)
)
M.filter.addEventListener(
"input",
M.debounce(function (e) {
M.do_filter_action()
}, 350)
)
M.filter.addEventListener("keydown", function (e) {
if (e.key === "Escape") {
M.clear_filter()
}
})
document.addEventListener("keydown", function (e) {
if (document.activeElement !== M.filter) {
if (e.key.length === 1 && e.key.match(/[a-zA-Z]/)) {
filter.focus()
}
}
})
}
M.update = function (txt = "") {
txt = txt.toLowerCase()
let s = ""
let all = txt ? false : true
let len = M.nouns.length
let index = parseInt(M.numb.value) % len
let exact = M.$("#exact_filter").checked
for (let i = 0; i < M.nouns.length; i++) {
let include = false
if (all) {
include = true
} else if (exact) {
include = M.nouns[i] === txt || M.nouns[index] === txt
} else {
include = M.nouns[i].includes(txt) || M.nouns[index].includes(txt)
}
if (include) {
s += `
<div class='list_item'>
<div class='list_item_word'>${M.nouns[i]}</div>
<div class='list_item_arrow'>-&gt;</div>
<div class='list_item_word_2'>${M.nouns[index]}</div>
</div>`
}
index += 1
if (index >= len) {
index = 0
}
}
M.$("#list").innerHTML = s
}
M.start_widgets = function () {
M.$("#exact_filter").addEventListener("change", function (e) {
if (M.filter.value) {
M.do_filter_action()
}
})
M.$("#clear_filter").addEventListener("click", function (e) {
M.clear_filter()
})
}
M.clear_filter = function () {
if (M.filter.value) {
M.filter.value = ""
M.do_filter_action()
}
}

BIN
favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 318 B

32
index.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title> Coke Bottle Glasses </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="favicon.ico?v=1" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css?v=1">
<script src='base.js?v=4'></script>
<script src='nouns.js?v=1'></script>
<script>
window.onload = function(){
M.init()
}
</script>
</head>
<body>
<div id='inputs'>
<input type='number' max='9999' min='0' id='numb' value='88' title='Page'>
<input type='text' id='filter' placeholder='Filter'>
<div class='flex_row_center'>
<div>Exact:</div>
<input id='exact_filter' type='checkbox'>
<div class='separator'>|</div>
<div id='clear_filter' class='pointer'>Clear</div>
</div>
</div>
<div id='list'></div>
</body>
</html>

4403
nouns.js Normal file

File diff suppressed because it is too large Load Diff

117
style.css Normal file
View File

@ -0,0 +1,117 @@
body,
html {
background-color: #242424;
color: #e6e6e6;
font-size: 20px;
font-family: monospace;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
input[type="text"],
input[type="number"] {
background-color: #151515;
color: #c2bbe0;
font-size: 1rem;
padding: 5px;
box-shadow: inset 0 0 2px currentColor;
border-radius: 50px;
text-align: center;
outline: none;
border: 0px solid grey;
}
input[type="checkbox"] {
outline: none;
}
#inputs {
position: sticky;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background-color: inherit;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
}
#numb {
width: 80px;
margin-bottom: 10px;
}
#filter {
width: 320px;
margin-bottom: 10px;
}
#exact_filter {
margin-left: 8px;
}
#list {
display: table;
text-shadow: 0 0 10px currentColor;
}
.list_item {
display: table-row;
padding-bottom: 20px;
}
.list_item > div {
padding: 10px;
}
.list_item:first-child > div {
padding-top: 0;
}
.list_item:last-child > div {
padding-bottom: 50px;
}
.list_item_word {
display: table-cell;
text-align: right;
text-transform: capitalize;
}
.list_item_word_2 {
display: table-cell;
text-align: left;
text-transform: capitalize;
}
.list_item_arrow {
display: table-cell;
text-align: center;
color: #c2bbe0;
}
.flex_row_center {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.separator {
opacity: 0.5;
margin-left: 15px;
margin-right: 15px;
}
.pointer {
cursor: pointer;
}
.pointer:hover {
text-shadow: 0 0 10px currentColor;
}