17.0 alpha 3: md5, fixes, better css

Author: miermontoto

package-lock.json

@@ -1,5 +1,6 @@
 {% addScript 'base64' %}
+{% addStyle 'webutils' %}
 
-<textarea id="decoded"></textarea>
+<textarea id="decoded" class="input"></textarea>
 <span><=></span>
-<textarea id="encoded"></textarea>
+<textarea id="encoded" class="output"></textarea>

package.json

@@ -0,0 +1,6 @@
+{% addScript 'md5' %}
+{% addStyle 'webutils' %}
+
+<input id="md5-input" class="input" type="text" placeholder="String to hash using MD5">
+<br> <br>
+<span id="md5-output" class="output"></span>

src/content/collections/webutils/base64.njk

@@ -1,6 +1,6 @@
 {% addScript 'tiny' %}
-{% addStyle  'tiny' %}
+{% addStyle 'webutils' %}
 
-<input id="input">
+<input class="input" id="tiny-input" type="text" placeholder="String to tinify">
 <br> <br>
-<span id="output"></span>
+<span class="output" id="tiny-output"></span>

src/content/collections/webutils/md5.njk

@@ -1,9 +1,9 @@
 @use '../base'
 
-#output
+span.output
 	$padding: 10px
 
 	border-radius: base.$radius
 	border: 3px solid base.$light
-	padding: $padding $padding 0 $padding
+	padding: $padding
 	margin: 25em 0

src/content/collections/webutils/tiny.njk

@@ -0,0 +1,16 @@
+// import md5 function from library blueimp-md5
+require('md5.min.js');
+
+window.addEventListener("load", function(event) {
+	const input = document.querySelector('#md5-input');
+	const output = document.querySelector('#md5-output');
+
+	input.value = '';
+	output.innerHTML = '';
+
+	const update = () => {
+		output.innerHTML = md5(input.value);
+	}
+
+	input.addEventListener('input', update);
+});

src/static/css/app/tiny.sass src/static/css/app/webutils.sasssrc/static/css/app/tiny.sass renamed to src/static/css/app/webutils.sass

@@ -1,8 +1,9 @@
 window.addEventListener("load", function(event) {
-	const input = document.querySelector('#input');
-	const output = document.querySelector('#output');
+	const input = document.querySelector('#tiny-input');
+	const output = document.querySelector('#tiny-output');
 
-	clear(input);
+	input.value = '';
+	output.innerHTML = '';
 
 	const update = () => {
 		output.innerHTML = tinify(input.value);
@@ -19,8 +20,3 @@ const superscript = { 'a': 'ᵃ', 'b': 'ᵇ', 'c': 'ᶜ', 'd': 'ᵈ', 'e': 'ᵉ'
 function tinify(str) {
 	return str.split('').map(c => superscript[c] || c).join('');
 }
-
-function clear(dom) {
-	dom.innerHTML = '';
-	dom.value = '';
-}