LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Type in content to generate QR code:

CSS
* {
  box-sizing: border-box;
}
.body {
  text-align: center;
  position: relative;
  max-width: 500px;
  width: 100%;
  margin: 5% auto;
}
.body .text {
  width: 100%;
  margin-bottom: 30px;
}
.body .text .input-panel {
  width: 70%;
  margin: 0 auto;
  position: relative;
}
.body .text .input-panel .user {
  width: 95%;
  height: 30px;
  border-top: none;
  border-Left: none;
  border-right: none;
  border-bottom: 3px solid #ccc;
  color: #CCC;
  font-weight: 100;
  font-style: italic;
  padding: 0 15px;
  padding-right: 25px;
  font-size: 20px;
}
.body .text .input-panel .user::-webkit-input-placeholder:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  height: 3px;
  width: 30px;
  background-color: red;
}
.body .text .input-panel .user:active,
.body .text .input-panel .user:focus {
  color: #333;
  font-style: normal;
  outline: none;
  border-top: none;
  border-Left: none;
  border-right: none;
  border-bottom: 3px solid #afd33d;
}
.body .text .input-panel .fa-qrcode {
  font-size: 22px;
  color: #ccc;
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.body .QRplace {
  width: 100%;
}
.body .QRplace canvas {
  width: 100%;
  height: 100%;
}
.body a {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  margin-top: 20px;
  background-color: #ccc;
  color: #fff;
  border-radius: 5px;
  padding: 20px 40px;
  font-size: 18px;
  -webkit-transition: 400ms ease all;
  transition: 400ms ease all;
}
.body a:hover {
  background-color: #afd33d;
}
JS
personalBrand();
$('.QRplace').qrcode({
	// render method: 'canvas', 'image' or 'div'
	render: 'image',
	minVersion: 1,
	maxVersion: 40,
	ecLevel: 'L',
	size: 300,
	fill: '#000',
	background: null,
	text: 'http://leoh.me',
	mode: 0,
	mSize: 0.1,
	label: 'no label',
});
$('.user').keypress(function(){
	var userInput = $('.user').val();
	var image = $('.QRplace img').attr('src');
	var filename = userInput.split(' ', 2).toString().replace(',' , '');
	$('.QRplace img').remove();
	$('.body a').remove();
	$('.QRplace').qrcode({
		// render method: 'canvas', 'image' or 'div'
		render: 'image',
		minVersion: 1,
		maxVersion: 40,
		ecLevel: 'L',
		size: 300,
		fill: '#000',
		background: null,
		text: userInput,
		mode: 0,
		mSize: 0.1,
		label: 'no label',
		fontname: 'sans',
		fontcolor: '#000',
		image: null
	});
	$('.body').append('save');
	if (userInput < 1 ) {
		$('.body a').remove();
	}
});
Host Instantly Drag and Drop Website Builder

 

Description

testing for visual input in a later implementation
Term
Mon, 11/27/2017 - 21:43

Related Codes

Pen ID
Pen ID
Pen ID