script-notes.js

/* FUNCTION CALLS & CONSOLE OUTPUT TESTS*/

/*console.log(isValidHex("#000000"));                                   // SHOULD RETURN true
console.log(isValidHex("#0000000"));                                    // SHOULD RETURN false
console.log(isValidHex("#ffffff"));                                     // SHOULD RETURN true
console.log(isValidHex("#fff"));                                        // SHOULD RETURN true
console.log(isValidHex("#azp"));                                        // SHOULD RETURN false
console.log(isValidHex("#323"));                                        // SHOULD RETURN true
console.log(convertHexToRGB("123"));                                    // SHOULD RETURN {r: 17, g: 34, b: 51}
console.log(convertHexToRGB("ffe"));                                    // SHOULD RETURN {r: 0, g: 0, b: 0}*/

/* NOTES */

// N.B. THE ALPHABETICAL RANGE OF HEX VALUES ONLY RUN FROM a --> f

// FIRST, CREATE A FUNCTION WHICH CHECKS TO SEE WHETHER THE INPUT FROM THE USER IS A VALID HEX COLOR
    // THE USER CAN INPUT A HEX COLOR WITH OR WITHOUT A #, e.g. 000000 or #000000
    // FOR THIS TO THEN BE PARSED THROUGH CHECKS, THE # SHOULD BE OMITTED TO 'STANDARDISE' THE INPUT TYPE.
    // THE LENGTH OF THE CHARACTER SHOULD ALSO BE CHECKED. THE DEFAULT IS 6, HOWEVER 3 CHARACTERS SHOULD ALSO BE ACCEPTED
        // N.B. 123 --> 112233
        // 0   1  2
        // 00 11 22 --> THIS MEANS THE END VALUE MUST BE 6 CHARACTERS LONG
        // AN rgb IS A BASE 16 OF EACH INDIVIDUAL HEX VALUE
    // THE CHECKS ARE THEREFORE CONSIDERING 'ARE THE HEX VALUES ENTERED VALID TO BEGIN WITH?'

    /*  THE FUNCTION isValidHex CREATES A VARIABLE (SAME NAME) AND IS PASSED THE INPUT IN THE hex PARAMETER. INSIDE THE FUNCTION,
    A VARIABLE IS CREATED WHICH STORES A REGEX CHECK. ANOTHER VARIABLE IS CREATED WHICH TAKES THE hex CONTENTS AND STRIPS THE 
    '#' AT THE BEGINNING. AN if STATEMENT THEN CHECKS WHETHER THE FINAL hex IS EITHER 3 OR 6 DIGITS IN LENGTH AND THE CONTENTS 
    OF THE strippedHex VARIABLE MATCHES THE REGEX CHECK. IF THE hex IS USED HERE, IT WILL RETURN false, AS hex WILL MAY CONTAIN 
    A '#', WHICH FAILS THE REGEX CHECK, AND SUBSEQUENTLY THE if STATEMENT*/

// THE CHECK SHOULD CHECK BE 'IF HEX IS PRESENT AND IS BETWEEN 3 OR 6 AND FULFILS REGEX CHECK, RETURN true <-- TO BE DONE
// CALLING THE FUNCTION BY PASSING IT A VALUE AND RETURNING THE RESULT TO THE CONSOLE LOG
// THIS IS GOOD PRACTICE TO TEST OUT THE LOGIC OF THE FUNCTION TO ENSURE THINGS ARE RUNNING AS THEY SHOULD BEFORE ANY ADDITIONAL CODING IS PARSED TO THE INPUTS

// FOR A FUNCTION TO RUN, IT MUST BE CALLED BY, IN THIS CASE, PASSING IT A VALUE (e.g. convertHexToRGB("123"))

// CONVERTING hex VALUES TO rgb WILL ALLOW ALTERATIONS TO THEN BE MADE TO THEM (e.g. USER CHANGING LIGHT/DARK)

/* alterColor PERFORMS FIVE ACTIONS;
    1.  ACCEPTS hex AND percentage PARAMETERS PASSED TO IT VIA ARGUMENTS IN A FUNCTION CALL
    2.  CONVERTS THE HEX VALUES TO RGB USING THE FUNCTION convertHexToRGB(hex)
    3.  ASSIGNS THESE VALUES TO THE INDIVIDUAL OBJECT VARIABLES, e.g. for '111' --> 17 17 17    
    4.  INCREASE EACH r g AND b VALUE BY AN APPROPRIATE AMOUNT DEP. ON THE SLIDER POSITION (USING A % OF 255 - THE BASE VALUE), ie. 17 17 17 --> 42 42 42
    5.  TAKE THE NEW r g AND b VALUES AND CONVERT THESE TO A HEX VALUE e.g. 42 42 42 --> #2a2a2a
    6.  RETURN THE HEX VALUE, WHICH WILL BE OUTPUTTED IN THE RESPECTIVE DIV */


/*  A HIGHER PERCENT VALUE EQUATES TO AN INCREASE IN BRIGHTNESS, A LOWER/MINUS EQUATES TO A DECREASE */

/*  PASSING '000' AND '100' RESPECTIVELY IN THE alterColor FUNCTION RETURNS VALUES THAT MAKES SENSE, 
    AS ON THE EXTREME SCALE, A #000 (BLACK) WOULD BE A #fff ON A 100% CHANGE IN BRIGHTNESS. NOTE THAT
    A 10% BRIGHTNESS ON A WHITE COLOR, ie. ('fff', 10) WOULD STILL RETURN 255, 255, 255 --> #ffffff AS
    THE COLOR CANNOT BE BRIGHTER THAN WHAT IT ALREADY IS. ('fff', -10) HOWEVER WOULD RETURN A DARKER
    SHADE EQUAL TO A 10% REDUCTION IN BRIGHTNESS OF WHITE, WHICH IS 229, 229, 299 --> #e5e5e5 */

/*  WHILE THE ABOVE SHOULD RETURN #252525 (AFTER A 10% PARSE), IT RETURNS #191919. THIS IS BECAUSE
    WHEN BROKEN DOWN INTO PAIRS, 1 IN THE POSITION OF hex (ie. 19 19 19) IS 16, AND ADDING 9 ONTO IT
    THEN RESULTS IN THE 25, 25, 25 FOR THE NEW CALCULATED PAIRS BEFOREHAND, ie. 00 --> 25 25 25 --> #191919

    IF THE FUNCTION IS ALSO PARSED 'fff', 10, THE CODE WILL RETURN 280, 280, 280 FOR THE NEW VALUES, WHICH 
    ARE BEYOND THE 255 LIMITS, AND THEREFORE HAVE TO BE ALTERED. */