JSFiddle - React, Tailwind, and code Playground

IQ License generator

by Yaroslav Samardak

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/md5.min.js"></script>
<form id="configuration">
	<label for="organization">
		Enter organization name:
		<input type="text" id="organization" name="organization" required />
	</label>
	<label for="kioskCount">
		Enter count of kiosks:
		<input type="number" min='0' id="kioskCount" name="kioskCount" />
	</label>
	<label for="tvCount">
		Enter count of TV:
		<input type="number" min='0' id="tvCount" name="tvCount" />
	</label>
	<label for="feedbackCount">
		Enter count of feedback kiosks:
		<input type="number" min='0' id="feedbackCount" name="feedbackCount" />
	</label>
	<label for="operatorCount">
		Enter count of operators:
		<input type="number" min='0' id="operatorCount" name="operatorCount" />
	</label>

	<label>
		<input type="submit" value="generate" id="generate" />
	</label>
</form>

<pre id="out"></pre>

CSS

body {
	background: #20262e;
	padding: 20px;
	color: #62666c;
	font-weight: 300;
	font-family: monospace;
	cursor: default;
	user-select: none;
}

pre {
	color: #FFF;
	user-select: text;
}

label {
	display: block;
	margin-bottom: 16px;
}

small {
	color: #62666c;
	text-transform: uppercase;
}
small:before {
	content: '=== '
}
small:after {
	content: ' ==='
}


input {
	margin-top: 8px;
	display: block;
	background: #20262e;
	border: 1px solid #2d333b;
	padding: 8px;
	outline: none;
	width: 240px;
	box-sizing: border-box;
	-moz-appearance: textfield;
	color: #FFF;
}
input[type="button"], input[type="submit"] {
	transition: .218s linear color;
	text-transform: uppercase;
	cursor: pointer;
	color: #62666c;
}
input[type="button"]:hover, input[type="submit"]:hover {
	color: #FFF;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

JavaScript

const hashCode = (str, pref) => {
	const value = md5('QMS-iQueue, license for: ' + str)
	const sub = md5(value + ' v1.0')
	
	return (pref.toLocaleUpperCase() + value.slice(1, 6) + '-' +
		sub.slice(0, 4) + '-IQ-' + sub.slice(4, 8) + '-' +
		value.slice(6, 12)).toLocaleUpperCase()
}

const clearLog = (value) => out.innerHTML = ''
const log = (value) => out.innerHTML += value + '\n'
const info = (value) => out.innerHTML += `<small>${value}</small>\n`

const makeCodes = (e) => {
	e.preventDefault()
	clearLog()

	try {
		const codes = []
		const makeLicense = (val, key) => {
			const license = hashCode(val, key ? key : val[0])
			codes.push(license)
			log(license)
		}
		const makeLicenses = (key, count) => {
			if (count > 0) {
				info(key)
				for (let i = 0; i < count; i++) {
					makeLicense(key + organization.value + (i + 1))
				}
			}
		}

		if (!organization.value) {
			log('Enter organization name!')
			return
		}
		
		info(organization.value)
		makeLicense(organization.value, 'Q')
		makeLicenses('kiosks', kioskCount.value)
		makeLicenses('TV', tvCount.value)
		makeLicenses('feedbacks', feedbackCount.value)
		makeLicenses('operators', operatorCount.value)
	} catch (e) {
		log('Error: ' + e.message)
	}
}

configuration.onsubmit = makeCodes