# Creating a random hex code generator

In preparation for a sprint where I would create a full stack app by myself in two days I decided I would have some fun, practice, and learn a bit by making a random hex code generator.

My initial idea for the sprint was a logo maker, using a simple user interface and svgs to create exportable logos, so I decided something even simpler, and design-minded, would be a good pre-sprint project. Eventually I decided on the random hex generator, thinking I may be able to either incorporate bits of it into my real sprint, or if things really tanked during the two days I would have a base to work from.

The first thing I did was create a function to generate a random hex code. I set up a bits array for uppercase and lowercase, depending on what I was looking for.

`let bits = [ 'a', 'b', 'c', 'd', 'e', 'f', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' ];// let bits = [ 'A', 'B', 'C', 'D', 'E', 'F', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' ];`
`let index = () => Math.floor(Math.random() * 16);`
`let hex = () => bits[index()];`
`let randomColor = function() {  let color = '#';  for (var i = 0; i < 6; i++) {    color += hex();  }  return color;};`

I’ve been playing around with HTML/CSS for ten years without ever having truly studied, so this was a fun learning moment in regards to hexadecimals. Having to find all the pieces that make up a hex color code was simple, there’s only 16, and most of them are numbers. It also shines light on RGB colors, since hex codes are divided into 3 sections themselves for red, green, and blue, each containing two of the six hexadecimal characters. When you take into account that there are 16 possibilities for each character of a hex code, and two create each color, you realize that 16 * 16 is 256. Then, if you account for the first value being 0, you can easily find the value in RGB.

At first I envisioned this project incredibly simple. All I wanted was a simple toy problem: create a random hex generator and display the code, filling up the screen, in the created color. This was done mostly with jQuery, creating events that would create a new color and swap the text and styling of that text with the newly created color. But once I had the code up on the page, it looked lonely, and there wasn’t really a way to change it unless you refreshed the page. So I added a randomize button that would let you change the color without refreshing.

`let changeColor = function(element, color) {  element.css('background-color', color)         .css('color', color);}`
`let changer = function(color) {  // Change html background and font colors     changeColor(\$('html'), color);   // '#hex' refers to the visible text    \$('#hex').val(color); // '#hex' refers to the     \$('#hex').css('color', color);  // Change button background color    \$('button').css('background-color', color);}`

But that wasn’t enough. The point of this exercise, beyond practice, was also about inspiration. I wanted to be inspired; inspired by the code, by the design, and by my own abilities. So I moved forward with the project!

`// Set up simple cache for colors let colors = {    now: '#000000',    last: '#000000'}`
`// Cache for saved colorslet cache = [];`
`let changeColor = function(element, color) {    element.css('background-color', color)           .css('color', color);}`
`let changer = function(color) {  // Save current color as last color    colors.last = colors.now;  // Change current color to new color    colors.now = color;    changeColor(\$('html'), color);    \$('#hex').val(color);    \$('#hex').css('color', color);    \$('button').css('background-color', color);}`
`let cacheDot = function(hex) {  // Limit dot cache to 21 dots    if(cache.length < 22) {        cache.push(hex);    }}`

My next thought was, if anyone was to use this as a real app, they would probably want to save the colors they find. So I created a save button and, if people are flipping through random colors too quickly, a previous button. The previous button only goes back one color, however, because I felt having a cache of all the previously seen colors would be too much.

`\$('#change').on('click', function() {    changer(randomColor());});`
`\$('#prev').on('click', function() {    changer(colors.last);});`
`let dotMaker = function(color) {    cacheDot(color);`
`    let dot = \$('<div>').addClass('dot')                          // Give each dot an index-based id                        .attr('id', 'dot' + cache.length)                          // Set dot background to specific color                        .css('background-color', color)`
`    changeColor(dot, color);    return dot;}`
`\$('#save').on('click', function() {  // Check if color is already in cache    if(!cache.includes(colors.now)) {      // Create dot and add to the screen        let \$dot = dotMaker(colors.now)        \$('.collection').append(\$dot);    }});`

This is all I have time to talk about now, but I will continue at another time! The fun really started when I began enabling dragging and click-to-copy events. Look forward to that!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.