2jiwon/background-generator.markdown

## background-generator.markdown

      
    Raw
  

              background-generator.markdown
            
          
    Background Generator

A Pen by Jiwon on CodePen.
License.

  
## index.html
<body id="gradient">
  <h1>Background Generator</h1>

  <h2>Pick Colors</h2>
    <input class="button color1" type="color" name="color1" value="#ffffff">
    <input class="button color2" type="color" name="color2" value="#0086a0">

  <h2>Current CSS Background</h2>

  <div class="group1">
     <div class="colorValue" type="text" id="colorValue"></div>
  </div>
  <div class="group1">
        <button class="btn-copy" type="button">Copy</button>
  </div>

  <h2>Random CSS Background</h2>
    <button class="button" type="button" id="button1">Color1</button>
    <button class="button" type="button" id="button2">Color2</button>

  <script type="text/javascript" src="script.js"></script>
</body>

## script.js
var css = document.querySelector (".colorValue");
var color1 = document.querySelector (".color1");
var color2 = document.querySelector (".color2");
var body = document.getElementById ("gradient");

setGradient ();

function setGradient () {
  body.style.background = "linear-gradient(to right, "
                        + color1.value + ", "
                        + color2.value + ")";

  css.textContent = body.style.background + ";";
}

color1.addEventListener ("input", setGradient);
color2.addEventListener ("input", setGradient);

function randomColor () {
  var x = Math.round (0xffffff * Math.random()).toString(16);
  var y = (6 - x.length);
  var z = "000000";
  z = z.substring (0, y);
  var rColor = "#" + z + x;

  return rColor;
}

function setRandomGradient (element1, element2) {
  element1.value = randomColor();
  element2.style.background = element1.value;
  setGradient ();
}

var button1 = document.getElementById ("button1");
var button2 = document.getElementById ("button2");

button1.addEventListener ("click", function () {
  setRandomGradient (color1, button1);
})

button2.addEventListener ("click", function () {
  setRandomGradient (color2, button2);
})

function selectElementText (element) {
  var range = document.createRange ();
  range.selectNodeContents (element);
  var selection = window.getSelection ();
  selection.removeAllRanges ();
  selection.addRange (range);
}

var btnCopy = document.querySelector (".btn-copy");

btnCopy.addEventListener ("click", function () {
  selectElementText (css);
  document.execCommand ("copy");
});

## style.css
body {
  font: 'Raleway', sans-serif;
  color: rgba(0,0,0,.5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .5em;
  top: 15%;
}

h1 {
  font: 600 3.5em 'Raleway', sans-serif;
  color: rgba(0,0,0,.5);
  text-align: center;
  text-transform: .5em;
  width: 100%;
}

h3 {
  font: 900 1em 'Raleway', sans-serif;
  color: rgba(0,0,0,.5);
  text-align: center;
  text-transform: none;
  letter-spacing: 0.01em;
}

.button {
  width: 100px;
  height: 40px;
  border: 2px solid light-grey;
  color: black;
}

.colorValue {
  font: 0.8em 'Arial', sans-serif;
  color: rgba(0,0,0,.5);
  text-align: center;
  letter-spacing: 0.01em;
  border-radius: 10px;
  border: 1px solid grey;
  padding: 5px;
  background-color: white;
}

.btn-copy {
  border-radius: 10px;
  border: none;
}

.color1, .color2 {
  width: 80px;
  height: 30px;
}

.group1 {
  height: 30px;
  padding: 5px;
  vertical-align: middle;
  display: inline-flex;
  justify-content: center;
}
	<body id="gradient">
	<h1>Background Generator</h1>

	<h2>Pick Colors</h2>
	<input class="button color1" type="color" name="color1" value="#ffffff">
	<input class="button color2" type="color" name="color2" value="#0086a0">

	<h2>Current CSS Background</h2>

	<div class="group1">
	<div class="colorValue" type="text" id="colorValue"></div>
	</div>
	<div class="group1">
	<button class="btn-copy" type="button">Copy</button>
	</div>

	<h2>Random CSS Background</h2>
	<button class="button" type="button" id="button1">Color1</button>
	<button class="button" type="button" id="button2">Color2</button>

	<script type="text/javascript" src="script.js"></script>
	</body>
	var css = document.querySelector (".colorValue");
	var color1 = document.querySelector (".color1");
	var color2 = document.querySelector (".color2");
	var body = document.getElementById ("gradient");

	setGradient ();

	function setGradient () {
	body.style.background = "linear-gradient(to right, "
	+ color1.value + ", "
	+ color2.value + ")";

	css.textContent = body.style.background + ";";
	}

	color1.addEventListener ("input", setGradient);
	color2.addEventListener ("input", setGradient);

	function randomColor () {
	var x = Math.round (0xffffff * Math.random()).toString(16);
	var y = (6 - x.length);
	var z = "000000";
	z = z.substring (0, y);
	var rColor = "#" + z + x;

	return rColor;
	}

	function setRandomGradient (element1, element2) {
	element1.value = randomColor();
	element2.style.background = element1.value;
	setGradient ();
	}

	var button1 = document.getElementById ("button1");
	var button2 = document.getElementById ("button2");

	button1.addEventListener ("click", function () {
	setRandomGradient (color1, button1);
	})

	button2.addEventListener ("click", function () {
	setRandomGradient (color2, button2);
	})

	function selectElementText (element) {
	var range = document.createRange ();
	range.selectNodeContents (element);
	var selection = window.getSelection ();
	selection.removeAllRanges ();
	selection.addRange (range);
	}

	var btnCopy = document.querySelector (".btn-copy");

	btnCopy.addEventListener ("click", function () {
	selectElementText (css);
	document.execCommand ("copy");
	});
	body {
	font: 'Raleway', sans-serif;
	color: rgba(0,0,0,.5);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .5em;
	top: 15%;
	}

	h1 {
	font: 600 3.5em 'Raleway', sans-serif;
	color: rgba(0,0,0,.5);
	text-align: center;
	text-transform: .5em;
	width: 100%;
	}

	h3 {
	font: 900 1em 'Raleway', sans-serif;
	color: rgba(0,0,0,.5);
	text-align: center;
	text-transform: none;
	letter-spacing: 0.01em;
	}

	.button {
	width: 100px;
	height: 40px;
	border: 2px solid light-grey;
	color: black;
	}

	.colorValue {
	font: 0.8em 'Arial', sans-serif;
	color: rgba(0,0,0,.5);
	text-align: center;
	letter-spacing: 0.01em;
	border-radius: 10px;
	border: 1px solid grey;
	padding: 5px;
	background-color: white;
	}

	.btn-copy {
	border-radius: 10px;
	border: none;
	}

	.color1, .color2 {
	width: 80px;
	height: 30px;
	}

	.group1 {
	height: 30px;
	padding: 5px;
	vertical-align: middle;
	display: inline-flex;
	justify-content: center;
	}