Create a gist now

Instantly share code, notes, and snippets.

<html>
<head>
<script src="converter.js" type = "text/javascript" /></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<style>
#bohday {
font-family: 'Open Sans', 'sans-serif';
background: skyBlue;
color: white;
}
#junk {
font-size:xx-large;
position:fixed;
bottom:0px;
right:40px;
}
</style>
<body id="bohday">
<h1>
Words to Colours :)
</h1>
<input id="input" placeholder="Start typing here" onkeydown="toColour()"/>
<p id = "junk"></p>
</body>
</html>
function toColour() {
var input = document.getElementById('input').value; // get ascii input
var hexOutput = "";
var hexArray = [];
var arrayNum = 0;
// Convert ascii to hex and distribute them appropriately into hexArray
// Each array element only stores 6 chars as hex colours have 6 chars,
for (i = 0; i < input.length; i++) {
hexOutput += input.charCodeAt(i).toString(16);
if (hexOutput.length >= 6) {
hexArray[arrayNum] = hexOutput;
hexOutput ="";
arrayNum++;
}
}
var elem = document.getElementById("bohday"); // css element to change
var percentage = 100 / hexArray.length; // find percentage for columned background
var percentageAdded = 0;
var style = "linear-gradient(to right, "; // css change
// append to css change eg. linear-gradient(to right,
// 646667 25%, 646667 25%,
// 747975 25%, 747975 50%,
// 626e6d 25%, 626e6d 75%,
// 776572 25%, 776572 100%) idk if this is correct but it works lol
for (j=0; j < hexArray.length; j++) {
style += hexArray[j] + " " + percentage + "%";
percentageAdded += percentage;
style += ", " + hexArray[j] + " " + percentageAdded + "%";
if (j != hexArray.length-1 ) {
style += ", ";
}
}
style += ")";
elem.style.background=style; // change css element
// append "+" to extra hex outputs
if (hexOutput.length > 0) {
hexOutput = "+ " + hexOutput;
}
// append hex output to html
document.getElementById("junk").innerHTML = hexOutput;
console.log(percentage);
console.log(style);
console.log(hexArray);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment