Skip to content

Instantly share code, notes, and snippets.

@russianryebread
Last active Jul 15, 2020
Embed
What would you like to do?
Random string generator written in Vue.js https://hoshor.me/rand/
<!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/vue@2.5.17/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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment