<div class="plaque">
	<h1>Random String Generator</h1>

	<form name="theForm">	
		<div class="options">
			<legend>Number of<br>Characters</legend>
			<div class="radios">
				<p>
					<input type="radio" id="myRadio1" name="numbers" value="8" checked>
					<label for="myRadio1">8</label>
				</p>
				<p>
					<input type="radio" id="myRadio2" name="numbers" value="12">
					<label for="myRadio2">12</label>
				</p>
				<p>
					<input type="radio" id="myRadio3" name="numbers" value="16">
					<label for="myRadio3">16</label>
				</p>
			</div>		
		</div>
		<div class="actions">
			<input type="button" value="Create" onClick="randomString();" class="btn">&nbsp;
			<input type="text" name="theField" size="20" value="" id="stringBox" onclick="this.select();">
		</div>
		<div style="padding-top: 50px;">
			<input type="checkbox" id="specialCharsCB" value="yes" checked>
			<label for="specialCharsCB">Include special characters.</label>
		</div>
	</form>
</div>
$theme-color: #4DB6AC;  // All colors on the page are based on a single them color
@import url('https://fonts.googleapis.com/css?family=Rubik:400');
html {box-sizing: border-box;}
body {
	background-color: $theme-color;
	font-family: 'Rubik', sans-serif;
	font-weight: 300;
	font-size: 16px;
	color: lighten($theme-color, 50%);
	text-rendering: optimizelegibility;
	padding: 50px;
}

h1 {
	font-size: 2.2em;
	font-weight: 400;
	color: lighten($theme-color, 50%);
	letter-spacing: -.008em;
	padding-bottom: 20px;
	text-align: center;
}

::selection {background: #FFFF00;}

.plaque {
	margin: 0 auto;
	background: lighten($theme-color,6%);
	border: 1px solid lighten($theme-color, 25%);
	box-shadow: 0 0 9px 9px darken($theme-color, 2%);
	padding: 20px 40px 50px 40px;
	border-radius: 9px;
	width: 570px
}

.smaller {
	font-size:.8em;
	padding-left: 20px;
	color: lighten($theme-color, 40%);
}

.btn {
  background: darken($theme-color, 25%);
  -webkit-border-radius: 9;
  -moz-border-radius: 9;
  border-radius: 9px;
  border: 1px solid $theme-color;
  letter-spacing: .04em;
  color: #ffffffdd;
  font-size: 20px;
  padding: 14px 22px 14px 22px;
  text-decoration: none;
}

.btn:hover {
  background: darken($theme-color, 30%);
  border: 1px solid $theme-color;
  text-decoration: none;
  cursor: pointer;
}
.btn:active {
	border: 1px solid lighten($theme-color, 20%);
	background-color: darken($theme-color, 20%);
}
.btn:focus, #stringBox:focus {outline: none;}

.options {
	float: left;
	padding-right: 50px;
	line-height: 1.5em;
}
.actions {
	padding: 80px 0 0 60px;
}
#stringBox {
	color: darken($theme-color, 90%);
	text-shadow: 1px 1px 0 #ffffff77;
	border: none;
	background-color: lighten($theme-color, 15%);
	font-size: 1.5em;
	letter-spacing: .05em;
	padding: 13px;
	border-radius: 9px;
	text-align: center;
	margin-left: 10px;
	transition: all 1s ease;
}

/* Radio button Style

 Radio button styling forked from:
 https://codepen.io/blacklightdesign/pen/OmWwzj?editors=1100

*/
.radios {
	margin-left: 16px;
}
[type="radio"]:checked,
[type="radio"]:not(:checked) {

	display: none;
  
  & + label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 1.3em;
    display: inline-block;
	 font-weight: 400;
    
    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 16px;
      height: 16px;
      border: 1px solid darken($theme-color, 10%);
      border-radius: 50%;
      background: #fff;
    }
    
    &:after {
      content: '';
      width: 12px;
      height: 12px;
      background: darken($theme-color, 10%);
      position: absolute;
      top: 3px;
      left: 3px;
      border-radius: 50%;
      transition: all 0.15s ease;
    }
  }
}

[type="radio"]:not(:checked) + label:after {
    opacity: 1;
    transform: scale(0);
}

[type="radio"]:checked + label:after {
    opacity: 1;
    transform: scale(.8);
}


function randomString() {
	var charsNumber   = "0123456789";
	var charsLower    = "abcdefghijklmnopqrstuvwxyz";
	var charsUpper    = "ABCDEFGHIJKLMNOPQRSTUVWXTZ";
	var charsSpecial  = "!@#$%^&*()-_=+,<.>?|";
	var charsAll      = [charsNumber,charsLower,charsUpper];  //  Include special character by default but allow checkbox to toggle option
	var specialCB     = document.getElementById("specialCharsCB").checked; 
	if(specialCB==true) {  //  Evaluate checkbox status
		charsAll = [charsNumber,charsLower,charsUpper,charsSpecial];
	}
	var chars         = charsAll.join('');
	// Check for number of characters to generate. Defauts to 8 characters
	var stringLength  = document.querySelector('input[name="numbers"]:checked').value;
	var randomString  = '';
	for (var i=0; i<stringLength; i++) {                               // Get string length
		var randNum    = Math.floor(Math.random() * chars.length);      // and then
		randomString  += chars.substring(randNum,randNum+1);            // randomize it
	}
	//  Adjust the size of the box based on the string. There must be a better way to do this.
	//  Perhaps to actually get the physical width of the string of characters? This is my
	//  temporary solution below.
	document.theForm.theField.size  = stringLength* 1.4;  
	// Print the string to the textfield
	document.theForm.theField.value = randomString;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.