/* Variables Caching */
var h3 = document.querySelector("h3");
var input_left = document.querySelector("#color_selector_1");
var input_right = document.querySelector("#color_selector_2");
/* Function Declerations */
function colorChange()
{
// edit body style accordingally
var newStyle = changeBodyStyle();
// edit h3
editH3(newStyle);
}
function editH3(new_body_style)
{
h3.textContent = "";
h3.textContent = new_body_style;
}
function changeBodyStyle()
{
var new_background = "linear-gradient(to right, " + input_left.value.toString() + ", " + input_right.value.toString() + ")";
document.body.style.background = new_background;
return new_background;
}
/* Adding Event Listeners */
input_left.addEventListener("input", colorChange);
input_right.addEventListener("input", colorChange);
body{
font: 'Raleway', sans-serif;
color: rgba(0,0,0,.5);
text-align: center;
text-transform: uppercase;
letter-spacing: .5em;
top: 15%;
background: linear-gradient(to right, red, yellow);
}
h1{
font: 600 3.5em 'Raleway' , sans-serif;
color: rgba(0,0,0,.5);
text-align: center;
text-transform: uppercase;
letter-spacing: .5em;
width: 100%;
}
h3 {
font: 900 1em 'Raleway' , sans-serif;
color: rgba(0,0,0,0.5);
text-align: center;
text-transform: none;
letter-spacing: 0.01em;
}
<!DOCTYPE html>
<html>
<head>
<title>Gradient Background</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Background Generator</h1>
<h2>Current CSS Background</h2>
<h3>
<h4>this is a test</h4>
</h3>
<input type="color" id="color_selector_1" value="#00ff00">
<input type="color" id="color_selector_2" value="#ff0000">
<!-- JavaScript -->
<script type="text/javascript" src="script.js">
</script>
</body>
</html>
