BackgroundGenerator

by Jecs9

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Gradient Background Generator</title>
	<link rel="stylesheet" href="style.css">
</head>
<body id="gradient">
	<h1> Background Generator! </h1>
	<h2>1. Pick colors:</h2>
	<div id="colorPickers">
		<input class="color1" type="color" name="color1" value="#00ff00">
		<input class="color2" type="color" name="color2" value="#ff0000">
	</div>
	<h2>2. Pick the direction: </h2>
	<div id="arrows">
		<button id="left" class="buttons">&larr;</button>
		<button id="top" class="buttons">&uarr;</button>
		<button id="right" class="buttons">&rarr;</button>
		<button id="bottom" class="buttons">&darr;</button>
	</div>
	<h2>Current background:</h2>
	<p id="cssText">linear-gradient(to right, rgb(0, 255, 0), rgb(255, 0, 0));</p>
	<script src="script.js"></script>
</body>
</html>

CSS

html{
	min-height: 100%;
}

body{
	//font-family: 'Arial black';
	color: rgba(0, 0, 0, 0.7);
	text-align: center;
	letter-spacing: 0.5em;
	top: 15%;
	background: linear-gradient(to right, rgb(0, 255, 0), rgb(255, 0, 0));
}

h1{
	//font: 600 2em 'Arial black';
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}

h2{
	font-size: 1em;
	color: black;
	text-align: center;
	letter-spacing: 0;
	width: 100%;
}

#cssText{
	font-size: 0.8em;
	text-align: center;
	width: 100%;
	letter-spacing: 0;
}

input[type="color"]{
	border: none;
	background: rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

#arrows{
	max-width: 100%;
	padding: 1em;
}

#arrows button{
	font-size: 1em;
	border: none;
	padding: 4px;
	background: transparent;
	cursor: pointer;
}

#arrows button:active,
#arrows button:focus,
#arrows button:focus:active
{
	background-image: none;
	outline: 0;
	box-shadow: none;
}

JavaScript

var css = document.getElementById("cssText");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var body = document.getElementById("gradient");
var left = document.getElementById("left"); 
var up = document.getElementById("up");
var right = document.getElementById("right"); 
var bottom = document.getElementById("bottom");





function setGradient(ori){
	console.log(ori);
	if(ori === "left" || ori === "top" || ori === "right" || ori === "bottom"){
		body.style.background = "linear-gradient(to "+ ori + ", " + color1.value + ", " + color2.value +")";
		css.textContent = body.style.background + ";"; 
	}else{
		body.style.background = "linear-gradient(to right, " + color1.value + ", " + color2.value +")";	
		css.textContent = body.style.background + ";";
	}
}

function buttonClicked(e){	
	if(e.srcElement){
		id = e.srcElement.id;
		setGradient(id);
	}
}

document.getElementById("left").addEventListener("click", buttonClicked);
document.getElementById("top").addEventListener("click", buttonClicked);
document.getElementById("right").addEventListener("click", buttonClicked);
document.getElementById("bottom").addEventListener("click", buttonClicked);

/*left.addEventListener("click", buttonClicked);
top.addEventListener("click", buttonClicked);
right.addEventListener("click", buttonClicked);
bottom.addEventListener("click", buttonClicked);*/

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