JSFiddle - React, Tailwind, and code Playground

by James Anderson

HTML

<link rel="stylesheet" href="https://projects.jamesandersonjr.com/css/default_style.css">
<link rel="stylesheet" href="https://projects.jamesandersonjr.com/css/styled_buttons.css">

CSS

ol.numeric_list 
	{
		counter-reset: list;
		
		margin:15px 0px;
		padding:0px 15px;
		
		font-size:15px;
	}

ol.numeric_list > li 
	{
		list-style: none;
		
		margin:10px 0px;
		padding:0px 10px;
	}

ol.numeric_list > li:before 
	{
		content: counter( list, decimal-leading-zero ) ".) ";
		
		counter-increment: list;
	}

JavaScript

/* Function returns only the 'correct' file extension, if it exist, from any given filename, or URL ('fileNameOrURL') argument. Also, optionally, returns .dot-file's like '.htaccess', and '.example', only if 'showUnixDotFiles' is set to Boolean: 'true'. [BEGIN] */

function getFileExt(fileNameOrURL, showUnixDotFiles)
	{
		/* First, let's declare some preliminary variables we'll need later on. */
		var fileName;
		var fileExt;
		
		/* Now we'll create a hidden anchor ('a') element (Note: No need to append this element to the document). */
		var hiddenLink = document.createElement('a');
		
		/* Just for fun, we'll add a CSS attribute of [ style.display = "none" ]. Remember: You can never be too sure! */
		hiddenLink.style.display = "none";
		
		/* Set the 'href' attribute of the hidden link we just created, to the 'fileNameOrURL' argument received by this function. */
		hiddenLink.setAttribute('href', fileNameOrURL);
		
		/* Now, let's take advantage of the browser's built-in parser, to remove elements from the original 'fileNameOrURL' argument received by this function, without actually modifying our newly created hidden 'anchor' element.*/ 
		fileNameOrURL = fileNameOrURL.replace(hiddenLink.protocol, ""); /* First, let's strip out the protocol, if there is one. */
		fileNameOrURL = fileNameOrURL.replace(hiddenLink.hostname, ""); /* Now, we'll strip out the host-name (i.e. domain-name) if there is one. */
		fileNameOrURL = fileNameOrURL.replace(":" + hiddenLink.port, ""); /* Now finally, we'll strip out the port number, if there is one (Kinda overkill though ;-)). */	
		
		/* Now, we're ready to finish processing the 'fileNameOrURL' variable by removing unnecessary parts, to isolate the file name. */
		
		/* Operations for working with [relative, root-relative, and absolute] URL's ONLY [BEGIN] */ 
		
		/* Break the possible URL at the [ '?' ] and take first part, to shave of the entire query string ( everything after the '?'), if it exist. */
		fileNameOrURL =...