facprecolorpicker - Founders & Coders Pre-Course Colour Palette Project

For one of my Pre-Course requirements, I built a simple colour palette project, in which the user can change the colour of an element - either a vertical or horizontal panel with one colour. This was based on a template provided of the website Coolors, though other sites such as Authentic could also apply.

Background context of colours

When constructing the JavaScript, I had to research briefly the complex reality behind colours, in particular the RGB colour model, in which the red, green, and blue primary colours of light are added together in various ways to reproduce a broad array of colours (see image below). Under the RGB model, a total of 255 different colours are available. Understanding the RGB model was important, as it is the RGB model that is used for the sensing, representation, and display of images in electronic systems, such as televisions and computers. I have also encountered issues with the RGB model when working on Photoshop. However, I have also used the Hexadecimal numbering system too, with base 16. In the hexadecimal system, there are 16 symbols or possible digit values from 0 to 9, followed by six alphabetic characters: A, B, C, D, E and F. These characters are used to represent decimal values from 10 to 15 in single bits. Generating a random colour is simply a matter of generating random colours.

Colours can be represented in formats like RGB, Hexadecimal, or Hsl notation (the latter of which I haven't used). In order to generate a random colour, I used the Math.random() function, which generated a random number - numbers being essentially how colours are represented on a screen. Of course, Math.random() will produce random floating-point non-integer numbers, so in order to round down to a whole number and get rid of the decimal, Math.floor() was also used - otherwise, the colours would not be able to be generated. This random number was specified in the JavaScript as being anywhere between 0 and a maximum of 255 for RGB. Meanwhile, for generating hex colour value, I once again generated a random number between 0 and 255, but also specified as part of the numbering system the base 16, as well as using padStart, which ensured that the random number generated will be represented by multiple digits rather than a single digit when converted to hexadecimal notation, so that it's a valid colour, which has to have 3 to 6 characters. Thus, those random numbers were converted to the corresponding hexadecimal values.

I created 8 vertical colour palette columns (though they could have just as been horizontal), with each colour palette column displaying the Hex colour code format for each random colour generated, along with text at the top instructing the user to click on each colour palette column.

In terms of issues that I have come up against, I have found that a white space is automatically inserted on the right of the columns as soon as the user minimises the browser and the columns stack. This is compared with the Coolors website, where the colours always extend to the edge of the screen:

In addition, I have also noticed that a user cannot control each colour palette column individually. Instead, if the user clicks to change the colour of one colour palette column, it changes all of them. I am interested to find out a method whereby each individual colour palette column can be controlled individually.

Finally. I also did not have the chance to address the optional extra features, such as saving palettes to Local Storage (which I encoutered when constructing my Fruit Shop Shopping Cart), exporting colour palettes in different formats to JSON (again, something that I encountered with the Fruit Shop Shopping Cart), and generating related colours rather than random.