russianryebread · July 15, 2020 18:34
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Random String Generator</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css">
    <style type="text/css">
        .randomString {
            font-family: monospace;
            height: 100px;
        }
        [v-cloak] {
            display: none;
        }
    </style>
 </head>

 <body>
    <h1>Super Simple Random String Generator</h1>
    <blockquote>What happens in your browser, stays in your browser.</blockquote>
    <div id="app">
        <form>
            <label for="length">Length <code v-cloak>({{length}})</code></label>
            <input type="range" name="length" id="length" min="10" max="256" v-model.number.trim="length">
            <label for="symbols">
                <input id="symbols" type="checkbox" v-model="includeSymbols">
                Include Symbols? <code v-cloak>{{printSymbols}}</code>
            </label>
            <br><br>
            <textarea v-model="randomString" class="randomString" v-cloak></textarea>
        </form>
    </div>

    <!-- <footer>
        <p>Made with <code><3</code> by <a href="//hoshor.me" target="_blank">Ryan Hoshor</a> in 2019.</p>
    </footer> -->

    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                randomString: '',
                length: 32,
                includeSymbols: false,
                symbols: [33, 36, 37, 38, 40, 41, 42, 43, 44, 45, 46, 60, 61, 62, 63, 64, 91, 93, 94, 95, 124, 125, 126], // !$%&()*+,-.<=>?@[]^_|}~
                alphaNumeric: [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122],
            },
            mounted() {
                this.randomString = this.rand(this.length)
            },
            methods: {
                rand(length) {
                    // https://stackoverflow.com/a/47496558/810360
                    //[...Array(length)].map(() => Math.random().toString(36)[2])
                    
                    // https://stackoverflow.com/a/46536578/810360
                    var char;
                    var arr = [];
                    var length = length || 5;
                                            
                    do {
                        char = ~~(Math.random() * 128);
                        if (this.allChars.indexOf(char) !== -1) {
                            arr.push(String.fromCharCode(char))
                        }
                    } while (arr.length < length);

                    return arr.join('')
                },
            },
            computed: {
                 printSymbols() {
                    let arr = []
                    this.symbols.forEach((s) => {
                        arr.push(String.fromCharCode(s))
                    })
                    return arr.join('')
                },
                allChars() {
                    if (this.includeSymbols) {
                        return [].concat(this.alphaNumeric, this.symbols)
                    }
                    return this.alphaNumeric
                }
            },
            watch: {
                length(oldLength, newLength) {
                    this.randomString = this.rand(newLength)
                },
                includeSymbols(oldVal, newVal) {
                    this.randomString = this.rand(this.length)
                }
            }
        })
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Random String Generator</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.min.css">
	<style type="text/css">
	.randomString {
	font-family: monospace;
	height: 100px;
	}
	[v-cloak] {
	display: none;
	}
	</style>
	</head>

	<body>
	<h1>Super Simple Random String Generator</h1>
	<blockquote>What happens in your browser, stays in your browser.</blockquote>
	<div id="app">
	<form>
	<label for="length">Length <code v-cloak>({{length}})</code></label>
	<input type="range" name="length" id="length" min="10" max="256" v-model.number.trim="length">
	<label for="symbols">
	<input id="symbols" type="checkbox" v-model="includeSymbols">
	Include Symbols? <code v-cloak>{{printSymbols}}</code>
	</label>
	<br><br>
	<textarea v-model="randomString" class="randomString" v-cloak></textarea>
	</form>
	</div>

	<!-- <footer>
	<p>Made with <code><3</code> by <a href="//hoshor.me" target="_blank">Ryan Hoshor</a> in 2019.</p>
	</footer> -->

	<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
	<script>
	var app = new Vue({
	el: '#app',
	data: {
	randomString: '',
	length: 32,
	includeSymbols: false,
	symbols: [33, 36, 37, 38, 40, 41, 42, 43, 44, 45, 46, 60, 61, 62, 63, 64, 91, 93, 94, 95, 124, 125, 126], // !$%&()*+,-.<=>?@[]^_\|}~
	alphaNumeric: [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122],
	},
	mounted() {
	this.randomString = this.rand(this.length)
	},
	methods: {
	rand(length) {
	// https://stackoverflow.com/a/47496558/810360
	//[...Array(length)].map(() => Math.random().toString(36)[2])

	// https://stackoverflow.com/a/46536578/810360
	var char;
	var arr = [];
	var length = length \|\| 5;

	do {
	char = ~~(Math.random() * 128);
	if (this.allChars.indexOf(char) !== -1) {
	arr.push(String.fromCharCode(char))
	}
	} while (arr.length < length);

	return arr.join('')
	},
	},
	computed: {
	printSymbols() {
	let arr = []
	this.symbols.forEach((s) => {
	arr.push(String.fromCharCode(s))
	})
	return arr.join('')
	},
	allChars() {
	if (this.includeSymbols) {
	return [].concat(this.alphaNumeric, this.symbols)
	}
	return this.alphaNumeric
	}
	},
	watch: {
	length(oldLength, newLength) {
	this.randomString = this.rand(newLength)
	},
	includeSymbols(oldVal, newVal) {
	this.randomString = this.rand(this.length)
	}
	}
	})
	</script>
	</body>
	</html>