Opschonen van Enquete Data

Datavisualisatie enquête

Ik ben eerst bezig geweest om de data op te schonen van de datavisualisatie enquête. Deze was het slordigst. Hierdoor kon ik alvast oefenen met het ophalen van data en het opschonen daarvan.

Verkrijgen van de data

Ik begon met simpelweg het verkrijgen van de data in mijn console. Dit ging vrij makkelijk en al snel maakte ik een functie waarbij ik een specifieke kolom kon opvragen:

const surveyAnswers = data
const columnName = oogKleur
getAnswerOfQuery(surveyAnswers, columnName)

function getAnswerOfQuery(list, query){
  let results = []
  for(answer of surveyAnswers){
    results.push(answer[query])
  }
  console.log('results are:', results)

Al snel vond ik het irritant om elke keer in de code de keyword aan te passen en dus maakte ik een inputveld met een eventlistener waar ik mijn keyword in kon typen om een specifieke kolom op te vragen:

// Variables
const userInput = document.querySelector(".userInput")
const userInputButton = document.querySelector(".userInputButton")
const surveyAnswers = data

let columnName
let answersToQuery = []
let listOfAnswers = []

console.log('Alle survey antwoorden:', surveyAnswers)

userInputButton.addEventListener('click', function(e){
  e.preventDefault();
  columnName = userInput.value;
  console.log('userInput is:', columnName)
  answersToQuery = getAnswerOfQuery(surveyAnswers, columnName)
})

function getAnswerOfQuery(list, query){
  let results = []
  for(answer of surveyAnswers){
    results.push(answer[query])
  }
  console.log('results are:', results)

Deze week wil ik ook meer leren over map. Ik heb dus de for-loop in getAnswerOfQuery uiteindelijk omgezet naar map. Deze function werd hierdoor veel korter:

function getAnswerOfQuery(list, query){
  let results = list.map(answer => answer[query])
  console.log('results are:', results)
}

Als laatste heb ik de function aangepast zodat hij de function aanroept om de hashtack te controleren:

function getAnswerOfQuery(list, query){
  let results = list.map(answer => answer[query])
  console.log('results are:', results)
  checkHash(results)
  return results
}

Aanpassen van de data: Hashtack

Ik ging me focussen op de oogkleur van de studenten. Ik dacht dat dit een uitdagend maar niet te hoog gegrepen kolom was. Toch was het iets lastiger dan gedacht. Veel van de inputs hadden de hex-kleurcode met een hashtack geschreven. Andere hadden die helemaal niet. Sommige hadden simpelweg het woord van de kleur geschreven, andere een rgb-waarde en weer andere hadden een spatie in hun kleurcode zitten. De hashtack was het grootste probleem en dus pakte ik dit als eerste aan. Ik maakte een nieuwe functie om de waarden te lezen en waar nodig een hashtack toe te voegen. Als eerste had ik dit:

function checkHash(results){
  if(results.length < 1 || undefined){
    console.log('Array must be filled you dummy')
    return
  }
  for(result in results){
    if (result.charAt(0) === '#'){
      console.log('yay')
    }
    else{
      console.log('nay')
      result = '#' + result
    }
  }
  console.log('the NEW results are:', result)
}

Dit werkte niet. Blijkbaar kan het object niet zo aangepast worden. Je hebt daadwerkelijk het object en de index nodig om de data te kunnen aanpassen. Ik herschreef mijn function dus met results[result] in plaats van result en paste ook de for-loop in getAnswerOfQuery aan van answer in surveyAnswers naar answer of surveyAnswers:

function checkHash(results){
  if(results.length < 1 || undefined){
    console.log('Array must be filled you dummy')
    return
  }
  for(result in results){
    if (results[result].charAt(0) === '#'){
      console.log('yay')
    }
    else{
      console.log('nay')
      results[result] = '#' + results[result]
    }
  }
  console.log('the NEW results are:', results)
}

En dat werkte. Alle waarden hadden nu een hashtack.

Aangezien ik nu wist dat dit werkte, hoefde ik niet meer specifiek te loggen wanneer het een hash had en wanneer niet. Ik verwijderde de else-statement en herschreef de for-loop zo:

function checkHash(results){
  if(results.length < 1 || undefined){
    console.log('Array must be filled you dummy')
    return
  }
  for(result in results){
    if (!(results[result].charAt(0) === '#')){
      results[result] = '#' + results[result]
    }
  }
}

Aanpassen van de data: controleren

Daarna ging ik verder met de geschreven woorden. Hier waren niet heel veel verschillende van. Ik koos daarom ervoor om deze maar te hardcoden. Maar voordat ik dat kon doen, moest ik controleren of het al een HEX-kleurcode was of niet. Hiervoor maakte ik een simpele function:

function checkColorCode(results){
  for(result in results){
    if (typeof results[result] === 'string'){
      console.log('yes string')
    }
    if (results[result].length === 7){
    console.log('yes length 7')
    }
    else{
      console.log('NO! result is', results[result])
    }
  }
}

Deze werkte, maar ik vond dit, door de 2 if-statements wat slordig en paste deze aan:

function checkHexCode(results){
  for(result in results){
    if (typeof results[result] === 'string' && results[result].length === 7){
      console.log('probably hex')
    }
    else{
      console.log('Not a HEX:', results[result])
    }
  }
}

Maar ik wilde ook controleren of er onjuiste letters waren gebruikt. Ik ben hiervoor lang opzoek geweest maar heb niet iets makkelijks kunnen vinden. Ik heb daarom maar heel slordig met de hand de foutieve letters in een if-statement gezet

function checkHexCode(results){
  for(result in results){
    if (typeof results[result] === 'string' && results[result].length === 7){
      console.log('probably hex')
      if (results[result].toLocaleUpperCase().includes('G' || 'H' || 'I' || 'J' || 'K' || 'L' || 'M' || 'N' || 'O' || 'P' || 'Q' || 'R' || 'S' || 'T' || 'U' || 'V' || 'W' || 'X' || 'Y' || 'X')){
        console.log('Not a HEX:', results[result])
        toHexCode(results, result)
      }
      else{
        console.log('it must be HEX!')
      }
    }
    else{
      console.log('Not a HEX:', results[result])
    }
  }
}

Dit kan waarschijnlijk kleiner en beter, maar heb geen andere manier daarvoor gevonden. Ik heb uiteindelijk wel de function korter geschreven door maar 1 if statement en 1 else te gebruiken:

function checkHexCode(results){
  for(result in results){
    if ((typeof results[result] === 'string' && results[result].length === 7) && (!(results[result].toLocaleUpperCase().includes('G' || 'H' || 'I' || 'J' || 'K' || 'L' || 'M' || 'N' || 'O' || 'P' || 'Q' || 'R' || 'S' || 'T' || 'U' || 'V' || 'W' || 'X' || 'Y' || 'X')))){
      console.log('it must be HEX!')
    }
    else{
      console.log('ERRRRRORRRR Not a HEX:', results[result])
    }
  }
}

Aanpassen van de data: Geschreven Woorden

Vervolgens ben ik verder gegaan met het controleren of het geschreven woorden zijn. Deze heb ik dus maar 'gehardcode'.

function toHexCode(results, index){
  if (results[index].toLocaleLowerCase() === '#bruin'){
    results[index] = '#A52A2A'
  }
  else if (results[index].toLocaleLowerCase() === '#lichtblauw'){
    results[index] = '#ADD8E6'
  }
  else if (results[index].toLocaleLowerCase() === '#groen'){
    results[index] = '#008000'
  }
  else if (results[index].toLocaleLowerCase() === '#blauw'){
    results[index] = '0000FF'
  }
  else {
    console.log('geen geschreven kleuren')
  }
}

Dit werkte prima zo en ben toen gelijk door gegaan naar het controleren op spaties in de data. Ik ben vervolgens bezig geweest met het netter ketenen van functions

Aanpassen van data: Spaties

In dezelfde function ben ik gelijk bezig geweest om eventuele spaties weg te werken

function toHexCode(results, index){
  if (results[index].toLocaleLowerCase() === '#bruin'){
    results[index] = '#A52A2A'
  }
  else if (results[index].toLocaleLowerCase() === '#lichtblauw'){
    results[index] = '#ADD8E6'
  }
  else if (results[index].toLocaleLowerCase() === '#groen'){
    results[index] = '#008000'
  }
  else if (results[index].toLocaleLowerCase() === '#blauw'){
    results[index] = '0000FF'
  }
  else if (results[index].indexOf(' ') >= 0){
    let removedSpace = results[index].replace(/\s+/g, '') //BRON: https://css-tricks.com/snippets/javascript/strip-whitespace-from-string/
    results[index] = removedSpace
    console.log('space found and removed:', results[index])
  }
  else {
    console.log('geen geschreven kleuren')
  }
}

Herschrijven van functions

Vervolgens ben ik de function gaan splitten. Hierdoor heb ik meerdere kleinere functions die maar 1 specifieke doel hebben. Dit kan ik later dan ook opvragen en gebruiken. Ik begon met de hoofdfunctie die checkt welke onderliggende function uitgevoerd moet worden:

function toHexCode(results, index){
  // Check for whitespaces
  if (results[index].indexOf(' ') >= 0){
    removeWhitespaces(results, index)
    return
  }
  // Check written color words
  else if (results[index].toLocaleLowerCase() ==='#bruin'||'#lichtblauw'||'#groen'||'#blauw'){
    wordToHex(results, index)
    return
  }
  else{
    console.log('I do not know what you did, but you broke me')
  }
}

De nieuwe functions voor het controleren op hashtack en spaties zagen er zo uit:

function wordToHex(results, index){
  if (results[index].toLocaleLowerCase() === '#bruin'){
    results[index] = '#A52A2A'
  }
  else if (results[index].toLocaleLowerCase() === '#lichtblauw'){
    results[index] = '#ADD8E6'
  }
  else if (results[index].toLocaleLowerCase() === '#groen'){
    results[index] = '#008000'
  }
  else if (results[index].toLocaleLowerCase() === '#blauw'){
    results[index] = '0000FF'
  }
  else {
    console.log('Error: Kleurwoord niet gevonden')
  }
}

function removeWhitespaces(results, index){
    let removedSpace = results[index].replace(/\s+/g, '') //BRON: https://css-tricks.com/snippets/javascript/strip-whitespace-from-string/
    results[index] = removedSpace // This must be asigned like this since replace doesn't change the original key
    console.log('space found and removed:', results[index])
}

Dit gaf als resultaat: Alleen de rgb-kleurcode moet nog opgeschoond worden nu

Aanpassen van code: rgb-kleurcode naar HEX

Iemand had een RGB-kleurcode gegeven in plaats van HEX. Deze moet ook omgezet worden. Als eerst zorgde ik ervoor dat ik een algemene function heb

function rgbToHex(results, index){
  // remove the rgb text and other character so only the numbers remain
  removeRBGStyling(results, index)
}

Daarin zette ik, onder andere, een function die de styling characters weghaalt.

function removeRBGStyling(results, index){
  let rgb = results[index].split("(")
  rgb = rgb[1].split(")")
  rgbString = rgb[0] 
  console.log(rgbString)
}

Vervolgens probeerde ik deze functie korter te schrijven door ze achterelkaar te zetten

function removeRBGStyling(results, index){
  let rgb = results[index].split("(")[1].split(")")[0] // split 
  console.log(rgb)
}

Dit werkte ook en gaf als resultaat dit: 139.69,19

Zoals u ziet heeft de persoon, om het extra moeilijk te maken een punt (.) gebruikt en een komma (,) voor het scheiden van de getallen. Dit gaf me wat moeite. Maar uiteindelijk bedacht ik me dat ik natuurlijk ook heel makkelijk met replace de , en of . kan vervangen met replace. Hiervoor het ik dan ook gekozen.

function splitRGBNumbers(results, index){
  let rgbValues = results[index].replace('.', ',')
  results[index] = rgbValues.split(",")
}

Vervolgens kwamen we bij het omzetten. Ik had geen idee hoe ik dit moest aanpakken en dus heb ik code overgenomen van stack overflow. Ik begrijp de code, maar vooral het omzetten naar base16 string was ikzelf nooit opgekomen.

function rgbNumbersToHex(results, index){
    let dinges = results[index].map(function(rgbValue){       //For each array element
      rgbValue = parseInt(rgbValue).toString(16);             //Convert to a base16 string
      return (rgbValue.length==1) ? "0"+rgbValue : rgbValue;  //Add zero if we get only one character BRON: https://stackoverflow.com/questions/13070054/convert-rgb-strings-to-hex-in-javascript/13070198
  })
  console.log(dinges) 
}

Als laatste voeg ik in dezelfde function een regel toe die de string met behulp van join samenvoegt met een #

function rgbNumbersToHex(results, index){
    let hexArray = results[index].map(function(rgbValue){       //For each array element
      rgbValue = parseInt(rgbValue).toString(16);             //Convert to a base16 string
      return (rgbValue.length==1) ? "0"+rgbValue : rgbValue;  //Add zero if we get only one character BRON: https://stackoverflow.com/questions/13070054/convert-rgb-strings-to-hex-in-javascript/13070198
  })
  console.log('#'+hexArray.join('')) 
  results[index] = '#'+hexArray.join('')
}

Uiteindelijk heeft hij nu de data compleet opgeschoond:

Checken van input

Mensen maken fouten en aangezien ik gebruik maak van een input veld wilde ik nog wat meer gaan oefenen met javascript door te controleren of de input geldig is en of deze enigszins om te zetten is naar een leesbare string. Dit doe ik met .replace()

Ik begon met een if-statement in de eventlistener en een nieuwe function die controleerde of de spelling goed is

  let inputChecked = checkSpelling(columnName)
  if (inputChecked != null){
    let answersToQuery = getAnswerOfQuery(surveyAnswers, inputChecked)
    console.log('the CLEANED results are:', answersToQuery)
  }
})

////////////////////////////////////////////////////////////////////
function checkSpelling(input){
  if (input === 'oogKleur'){
    console.log('Grammer positive')
    return input
  }
  else{
    return input 
      .replace(/oog/, 'oogKleur')
      .replace(/ogen/, 'oogKleur')
  }
}

Dit werkte maar ik moet er rekening mee houden dat er later ook andere inputs gemaakt kunnen worden voor andere kolommen. Ik veranderde de else dus in een else if. Ik gebruikte hierbij includes. Hierdoor kon ik mijn replace rij kort houden.

function checkSpelling(input){
  if (input === 'oogKleur'){
    console.log('Grammer positive')
    return input
  }
  else if (input.toLocaleLowerCase().includes('oog') || input.toLocaleLowerCase().includes('ogen') || input.toLocaleLowerCase().includes('eyes')){
    console.log('Incorrect Grammer! Converting...')
    return input.replace(input, 'oogKleur')
  }
  else{
    console.log('I cannot read that! Please try again')
    return null
  }
}

Maar nu werd de else if regel erg lang. Helemaal als ik een stuk of 10 woorden wilde checken. Ik ging dus verder puzzelen om op een andere manier includes te controleren.

Uiteindelijk kwam ik op het idee om een array te maken met keywoorden en die te doorlopen. Hiervoor maakte ik een aparte functie zodat ik deze voor verschillende inputs makkelijk kan ophalen. Dit scheelt code. Mijn if-statement zag er nu zo uit

function checkSpelling(input){
  let eyeKeywords = ['oog', 'ogen', 'eyes', 'eye']

  if (input === 'oogKleur'){
    console.log('Grammer positive')
    return input
  }
  else if (grammerFixed(eyeKeywords, input)){
    console.log('Incorrect Grammer! Converting...')
    return input.replace(input, 'oogKleur')
  }
  else{
    console.log('I cannot read that! Please try again')
    return null
  }
}

De functie die de spelling probeert te verbeteren, grammerFixed(), ziet er zo uit:

function grammerFixed(keywordArray, input){
  keywordArray.forEach((item, i) => {
    let hasKeyword
    if (item === input){
      console.log('YESSSSSS')
      hasKeyword++
    }
  });
  return (hasKeyword => 1)
}

Wanneer er 1 of meerdere keywoorden gevonden worden (dus het werkt ook bij de input: 'oogeyes'), komt er een getal bij hasKeyword. In return geeft hij dan een boolean om aan te geven of er een keywoord gevonden is. Zo niet, dan komt in de function checkSpelling() false uit en wordt er null gereturnt. De getAnswerOfQuery() function in de eventlistener wordt dan niet uitgevoerd.

Return, return, return

Bij functional programming pas je niet rechtstreeks objecten en data aan die hogerop in de scope zitten. Nee je controleert of voert bekeringen uit, maakt een lokale aanpassing, en geeft die terug met een return naar de functie-aanroeper. Ik heb voornamelijk de data gelijk aangepast. Ik ben dit dus gaan aanpassen zodat de data maar in 1 hogerop function echt wordt aangpast

Ik begon bij de hoogste function, de eventlistener die de eerstvolgende function uitvoert. Ik zette in de if-statement de getAnswerOfQuery in een variablen en vraag die variable op in console.log in plaats van de 'hoofdvariable' results

userInputButton.addEventListener('click', function(e){                          //Run when user gives input
  e.preventDefault();
  let columnName = userInput.value;                                             //Save userInput in Variable columnName
  console.log('userInput is:', columnName)
  let inputChecked = checkSpelling(columnName)                                  //Check if userInput is usable
  if (inputChecked != null){
    let answersToQuery = getAnswerOfQuery(surveyAnswers, inputChecked)          //Run getAnswerOfQuery if userInput is valid
    console.log('the CLEANED results are:', answersToQuery)
  }
})

Vervolgens ben ik getAnswerOfQuery gaan aanpassen zodat hij ook wat returnt. De variable ansterToQuery moet natuurlijk wel waarde krijgen. Ik zorgde ervoor dat de checkHash en checkHexCode functions worden opgeslagen in een variable. Op het einde returnt de getAnswerOfQuery function de opgeschoonde data: dataCleaned

function getAnswerOfQuery(list, query){
  let results = list.map(answer => answer[query])                               //Create new array of the specific column called results
  console.log('results are:', results)
  let hashResultsChecked = checkHash(results)                                   //Check if string begins with #
  let dataCleaned = checkHexCode(hashResultsChecked)                            // Check if string is a HEX
  return dataCleaned                                                            // Return the cleaned data
}

Ik ben op deze manier steeds dieper gegaan. We kwamen nu uit op de checkHash function Hier heb ik een nieuwe variable aangemaakt waarin hij de verkregen array instopt. Deze variable past hij aan wanneer er geen # gevonden wordt. Op het einde na de for loop return ik de aangepaste nieuwe array zodat de oorspronkelijke array intact blijft.

function checkHash(results){                                                    // Check if arrayItems start with #
  let resultsWithHash = results;
  if(resultsWithHash.length < 1 || undefined){                                  // If array is empty, return error
    console.log('Array must be filled you dummy')
    return
  }
  for(result in resultsWithHash){
    if (!(resultsWithHash[result].charAt(0) === '#')){
      resultsWithHash[result] = '#' + resultsWithHash[result]                   // add # if needed
    }
  }
  return resultsWithHash                                                        // return array with added #
}

Daarna kwam ik in de complexere function. Namelijk de function die controleert of het een hex-kleurcode is en deze waar nodig aanpast door meerdere functions aan te roepen. Het aanpassen van deze function was nog relatief eenvoudig. Het enige wat ik hier hoefde te doen was een return toevoegen die de nieuw gemaakte array meegeeft

function checkHexCode(results){
  let checkedHexCode = results
  for(result in checkedHexCode){                                                // Check for every item if value is a string, has a length of 7 and if it does have valid characters
    if ((typeof checkedHexCode[result] === 'string' && checkedHexCode[result].length === 7) && (!(checkedHexCode[result].toLocaleUpperCase().includes('G' || 'H' || 'I' || 'J' || 'K' || 'L' || 'M' || 'N' || 'O' || 'P' || 'Q' || 'R' || 'S' || 'T' || 'U' || 'V' || 'W' || 'X' || 'Y' || 'X' || '!' || '?' || '@' || '$' || '%')))){
      console.log('it must be HEX!')
    }
    else{
      console.log('ERRRRRORRRR Not a HEX:', checkedHexCode[result])
      toHexCode(checkedHexCode, result)                                         // Run toHexCode if value not valid
    }
  }
  return checkedHexCode
}

Vervolgens kwam ik bij de hoofdfunction die de waarde controleert en deze, waar nodig, aanpast. Hier heb ik ervoor gekozen om een nieuwe variable te maken en deze te gebruiken om de nieuwe uitkomsten in op te slaan. In plaats van dat ik alleen de functions aanroep die de waarde gelijk aanpassen, roep ik nu de functions op waar nodig, en sla ik deze op op de juiste locatie van de array. Zo wordt de nieuwe array alleen daar aangepast en niet apart in elk kleine function.

function toHexCode(results, index){
  // Check for whitespaces and replace
  let convertedHexCode = results
  if (convertedHexCode[index].indexOf(' ') >= 0){                               // If value has whitespace, run removeWhitespaces
    convertedHexCode[index] = removeWhitespaces(convertedHexCode, index)
  }
  // Check for rgb color
  else if (convertedHexCode[index].includes('rgb')){                            // If value is in rgb format, run rgbToHex
    convertedHexCode[index] = rgbToHex(convertedHexCode, index)
  }
  // Check written color words
  else if (convertedHexCode[index].toLocaleLowerCase() ==='#bruin'||'#lichtblauw'||'#groen'||'#blauw'){
    convertedHexCode[index] = wordToHex(convertedHexCode, index)                // If value contains colorWords, run wordToHex
  }
  else{
    console.log('I do not know what you did, but you broke me; CANNOT CONVERT TO HEX:', convertedHexCode[index]) // Give error if not able to read
  }
  return convertedHexCode                                                       // Returns fixedArray
}

De aangeroepen functions moeten hierdoor ook aangepast worden. Deze paste eerst de waarde aan. Nu returnen ze alleen de aangepaste value. Ik begon weer met de bovenste function, removeWhitespaces Doordat ik hier alleen maar de waarde hoefde mee te geven kon ik de function al een stuk korter schrijven

function removeWhitespaces(results, index){
    let removedEmptySpace = results[index].replace(/\s+/g, '') //BRON: https://css-tricks.com/snippets/javascript/strip-whitespace-from-string/
    console.log('space found and removed:', removedEmptySpace)
    return removedEmptySpace
}

Eerst haalde ik de nieuw aangemaakte variable weg die ervoor zorgde dat ik de data kon opslaan op results[index]. Vervolgens haalde ik ook de andere variable weg en zette er gewoon return neer op de plek waar ik de variable aanmaakte. De console.log kan dan de variable ook niet meer printen dus die heb ik ook maar verwijderd.

function removeWhitespaces(results, index){
    return results[index].replace(/\s+/g, '') //BRON: https://css-tricks.com/snippets/javascript/strip-whitespace-from-string/
}

Daarna ging ik aan de slag met de function die kleurwoorden omzet naar hex. Als eerste zette ik gewoon een nieuwe variable neer en die dan weer gereturnt wordt.

function wordToHex(results, index){
  let convertedWord = results
  if (convertedWord [index].toLocaleLowerCase() === '#bruin'){
    convertedWord [index] = '#A52A2A'
  }
  else if (convertedWord [index].toLocaleLowerCase() === '#lichtblauw'){
    convertedWord [index] = '#ADD8E6'
  }
  else if (convertedWord [index].toLocaleLowerCase() === '#groen'){
    convertedWord [index] = '#008000'
  }
  else if (convertedWord [index].toLocaleLowerCase() === '#blauw'){
    convertedWord [index] = '0000FF'
  }
  else {
    console.log('Error: Kleurwoord niet gevonden')
  }
  return convertedWord 
}

Maar toen ik de code van Nathan bekeek, die ook met kleuren opschonen bezig was, zag ik dat hij replace gebruikte inplaats van if/else-statements. Dit is korter en staat een stuk netter. Ik heb daarom mijn function hier ook aangepast naar replace en Nathan vermeld als bron

function wordToHex(results, index){
  let convertedWord = results[index].toLocaleLowerCase()                        // Convert value to lowercase and replace values where needed
  .replace('bruin', 'A52A2A')
  .replace('lichtblauw', 'ADD8E6')
  .replace('groen', '008000')
  .replace('blauw', '0000FF')
  // (^ Idea to use replace instead of if/else-statements from Nathan Neelis)
  return convertedWord
}

Als laatste hebben we de groep functions die rgb omzetten naar hex. Ik begon met de centrale function die de andere functions uitvoert. Ik creëerde eerst weer nieuwe variablen die ik kon meegeven aan de andere functions om ze te 'chainen'. De laatste function returnde ik.

function rgbToHex(results, index){                                              // Run multiple functions to convert rgb to hex
  // remove the rgb text and other character so only the numbers remain
  let rgbStylingRemoved = removeRBGStyling(results, index)
  let rgbNumbersList = splitRGBNumbers(rgbStylingRemoved)
  return rgbNumbersToHex(rgbNumbersList)
}

De removeRGBStyling kon een stuk korter geschreven met return. Ik hoef geen variablen aan te maken en die weer gebruiken om de array te overschrijven. Ik hoefde alleen maar de styling te splitten en deze te returnen. Dit kon nu op 1 regel:

function removeRBGStyling(results, index){
  return results[index].split("(")[1].split(")")[0]                             // Split results at ( and ) and grab the index of just the numbers
}

De splitRGBNumbers function werd ook een regel korter doordat ik de array niet veranderde. Helaas werkt .split niet achter .replace en heb ik nog wel de variable nodig en 2 regels

function splitRGBNumbers(rgbValues){
  let rgbValuesCleaned = rgbValues.replace('.', ',')                            //change . into ,
  return rgbValuesCleaned.split(",")                                            // split the values into an array at ,
}

En dan als allerlaatste function die aandacht nodig had, rgbNumbersToHex(). Deze was makkelijk aan te passen. Het enige wat ik hoefde te doen was de parameter te veranderen naar 1 parameter die de waarde gelijk meegaf (in plaats van array met index) en dan in plaats van console.log() en array aanpassing een return te schrijven.

function rgbNumbersToHex(splittedRGBNumbers){
    let hexArray = splittedRGBNumbers.map(function(rgbValue){                   //For each array element
      rgbValue = parseInt(rgbValue).toString(16);                               //Convert to a base16 string
      return (rgbValue.length==1) ? "0"+rgbValue : rgbValue;                    //Add zero if we get only one character BRON: https://stackoverflow.com/questions/13070054/convert-rgb-strings-to-hex-in-javascript/13070198
  })
  return ('#'+hexArray.join(''))                                                // Return the joined hexKey
}

Dat was de laatste aanpassing tot nu toe. De functions zijn beter op een functional programming manier geschreven, en data wordt correct opgehaald en opgeschoond.