Button to copy credentials

by Manuel Souto Pico

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Oswald"></script>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
</head>
<body>

<center>

<button onclick="copyToClipboard('#user')">Copy username</button>
<p><code id="user">jane.doe@pisa-blabla</code></p>

<button onclick="copyToClipboard('#pswd')">Copy password</button>
<p><code id="pswd">6350f2f4079283adcc8af45b420a0b85</code></p>

</center>
  
</body>
</html>

CSS

body {
  background-color:#999999;
  font-family: 'Oswald', sans-serif;
}
p
{
  color:#000000;
  font-size:20px;
}

.textBox
{
  height:30px;
  width:300px;
}

button
{
  height:30px;
  width:160px;
  border-radius:8px;
  padding:10px;
  font-size:18px;
  font-family: 'Oswald', sans-serif;
  height:52px;
  cursor:pointer;
  background-color:wheat;
}

JavaScript

function copyToClipboard(element) {
		var $temp = $("<input>");
		$("body").append($temp);
		$temp.val($(element).text()).select();
		document.execCommand("copy");
		$temp.remove();
}