About

How did I make this?

Functionality:

This little demo was made using fengari. I originally had made this name generator in lua, and ran it in the terminal, but I thought it would be cool if I gave it a little UI. The problem: Lua doesn't natively run on webpages. The solution: fengari. fengari allows me, and other lua users to run lua in browsers with only one line of code. With the fengari script in place, all I have to do is adapt my old code a little to be compatible with JavaScript. Here is the name generation lua script in this website:

                        
local js = require "js"
local output = js.global.document:getElementById('output');
local copyright = js.global.document:getElementById('copyright');
local generateButton = js.global.document:getElementById('generate');

                            
local first = {"Quandale", "Bonerbeater", "Tickletipson", "Albert", "Goofingtion", "Quandalius", "Goofy goober", "Juandale", "Juantavious", "Jamarius", "Uncle", "Doodoosniff", "Martin Luther"}
local middle = {"Dingleberry", "Wrigleworm", "Jonathan", "Fingernoodle", "Scratchensniff", "Trippledickson", "Cornelius", "Bugglesmith", "Big Johnson", "Squintillion"}
local last = {"The third", "Footlicker", "Dookey", "Bingleton", "Bugfucker", "Madienchaser", "Clitsniffer", "Cochiekisser"," Winkledink", "Meatbeater", "Pringleton", "Dicksmith", "Ballbeater", "Tittylicker", "Sexmaster"}

function randomItem(t)
    return t[math.random(1,#t)];
end

function generateName()
    output.innerText = table.concat({ randomItem(first), randomItem(middle), randomItem(last) }, " ")
end

function generateButton:onclick(e)
    generateName();
end


generateName();
copyright.innerText = table.concat({ randomItem(first), randomItem(middle), randomItem(last) }, " ")
                        
                    
I know, pretty painless, right?

Looks:

Any web developer knows that CSS can be one of the hardest parts of web development. Without any css on this website, it would look like utter dogshit. Since I barley know any HTML, and no CSS, I had to find an easy CSS framework, to make this demo look acceptable. I did a quick google search and ultimately landed on Simple.css. Simple is exactly what the name suggests, a fast, good looking framework with no bs. It's literally drag and drop. I added this:

                        
< link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" >
                        
                    
one line of code to my head tag, and my site instantly looked 500% better. I highly recommend you check them out for any quick projects that you don't have to to spend hours writing css for it.

Inspiration:

This demo is not a totally original idea, I got the idea from this site