solution-extended

// You can make the colorData arr a json file called data.json, add it to the
// current directory and use the commented out function to get the colors
// this makes the colorData arr unnecessary

// extract colors data from JSON
// function readTextFile(file, callback) {
//   var rawFile = new XMLHttpRequest();
//   rawFile.overrideMimeType('application/json');
//   rawFile.open('GET', file, true);

//   rawFile.onreadystatechange = function () {
//     if (rawFile.readyState === 4 && rawFile.status == '200') {
//       callback(rawFile.responseText);
//     }
//   };

//   rawFile.send(null);
// }

// // get json data from local file
// readTextFile('./data.json', (text) => {
//   const dataArr = JSON.parse(text);
//   generateColors(dataArr);
// });

// REWRITE of the above with hard-coded color data, instead of fetching it

const colorData = [
  'IndianRed',
  'LightCoral',
  'Salmon',
  'DarkSalmon',
  'LightSalmon',
  'Crimson',
  'Red',
  'FireBrick',
  'DarkRed',
  'Pink',
  'LightPink',
  'HotPink',
  'DeepPink',
  'MediumVioletRed',
  'PaleVioletRed',
  'LightSalmon',
  'Coral',
  'Tomato',
  'OrangeRed',
  'DarkOrange',
  'Orange',
  'Gold',
  'Yellow',
  'LightYellow',
  'LemonChiffon',
  'LightGoldenrodYellow',
  'PapayaWhip',
  'Moccasin',
  'PeachPuff',
  'PaleGoldenrod',
  'Khaki',
  'DarkKhaki',
  'Lavender',
  'Thistle',
  'Plum',
  'Violet',
  'Orchid',
  'Fuchsia',
  'Magenta',
  'MediumOrchid',
  'MediumPurple',
  'RebeccaPurple',
  'BlueViolet',
  'DarkViolet',
  'DarkOrchid',
  'DarkMagenta',
  'Purple',
  'Indigo',
  'SlateBlue',
  'DarkSlateBlue',
  'MediumSlateBlue',
  'GreenYellow',
  'Chartreuse',
  'LawnGreen',
  'Lime',
  'LimeGreen',
  'PaleGreen',
  'LightGreen',
  'MediumSpringGreen',
  'SpringGreen',
  'MediumSeaGreen',
  'SeaGreen',
  'ForestGreen',
  'Green',
  'DarkGreen',
  'YellowGreen',
  'OliveDrab',
  'Olive',
  'DarkOliveGreen',
  'MediumAquamarine',
  'DarkSeaGreen',
  'LightSeaGreen',
  'DarkCyan',
  'Teal',
  'Aqua',
  'Cyan',
  'LightCyan',
  'PaleTurquoise',
  'Aquamarine',
  'Turquoise',
  'MediumTurquoise',
  'DarkTurquoise',
  'CadetBlue',
  'SteelBlue',
  'LightSteelBlue',
  'PowderBlue',
  'LightBlue',
  'SkyBlue',
  'LightSkyBlue',
  'DeepSkyBlue',
  'DodgerBlue',
  'CornflowerBlue',
  'MediumSlateBlue',
  'RoyalBlue',
  'Blue',
  'MediumBlue',
  'DarkBlue',
  'Navy',
  'MidnightBlue',
  'Cornsilk',
  'BlanchedAlmond',
  'Bisque',
  'NavajoWhite',
  'Wheat',
  'BurlyWood',
  'Tan',
  'RosyBrown',
  'SandyBrown',
  'Goldenrod',
  'DarkGoldenrod',
  'Peru',
  'Chocolate',
  'SaddleBrown',
  'Sienna',
  'Brown',
  'Maroon',
  'White',
  'Snow',
  'HoneyDew',
  'MintCream',
  'Azure',
  'AliceBlue',
  'GhostWhite',
  'WhiteSmoke',
  'SeaShell',
  'Beige',
  'OldLace',
  'FloralWhite',
  'Ivory',
  'AntiqueWhite',
  'Linen',
  'LavenderBlush',
  'MistyRose',
  'Gainsboro',
  'LightGray',
  'Silver',
  'DarkGray',
  'Gray',
  'DimGray',
  'LightSlateGray',
  'SlateGray',
  'DarkSlateGray',
  'Black',
];

function main() {
  // create color choice divs
  function generateColors(colorsArr) {
    const conditionsElement = document.querySelector('.conditions');

    colorsArr.forEach((color) => {
      let div = document.createElement('div');
      div.style.width = '35px';
      div.style.height = '35px';
      div.style.backgroundColor = color;
      div.style.display = 'inline-block';
      div.classList.add('color');

      // append
      conditionsElement.appendChild(div);
    });
  }

  function addColorListeners() {
    let colorDivElements = Array.from(document.querySelectorAll('.color'));

    colorDivElements.forEach((color) => {
      color.addEventListener('click', addToChoices);
    });

    let order = 0;

    function addToChoices() {
      let colorPicked = this.style.backgroundColor;

      // iterate over color buttons
      const colorsElement = document.getElementById('colors');

      let divColorElements = Array.from(colorsElement.children);

      // remove fixed sizing from div buttons
      divColorElements.forEach((ele) => {
        ele.style.width = 'auto';
        ele.style.minWidth = '30%';
        ele.style.padding = '13px 4px';
      });

      // set colors one by one, after each choice
      if (order === 0) {
        divColorElements[order].style.backgroundColor = colorPicked;
        divColorElements[order].innerHTML = colorPicked;
        order++;
      } else if (order === 1) {
        divColorElements[order].style.backgroundColor = colorPicked;
        divColorElements[order].innerHTML = colorPicked;
        order++;
      } else if (order === 2) {
        divColorElements[order].style.backgroundColor = colorPicked;
        divColorElements[order].innerHTML = colorPicked;
        order++;
      }
    }
  }

  generateColors(colorData);
  addColorListeners();
}

function growingWord() {
  const exerciseElement = document.getElementById('exercise');
  const growingWordElement = exerciseElement.querySelector('p');

  const colorsArr = initializeColors();

  // Initiate
  increaseFont(growingWordElement);
  nextColor(growingWordElement, colorsArr);

  // Declarations
  function increaseFont(element) {
    if (!element.style.fontSize) {
      element.style.fontSize = '1px';
    }

    let currentSize = element.style.fontSize;
    element.style.fontSize = parseInt(currentSize) * 2 + 'px';
  }

  function nextColor(element, arr) {
    if (!element.style.color) {
      element.setAttribute('data-color', 0);
    }

    let currentColor = Number(element.getAttribute('data-color'));

    if (currentColor > 2) {
      currentColor = 0;
    }

    element.style.color = arr[currentColor];
    element.setAttribute('data-color', ++currentColor);
  }
}

function initializeColors(pickedColors) {
  // get and contain colors
  const colorsArr = [];

  const colorsElement = document.getElementById('colors');
  Array.from(colorsElement.children).forEach((color) => {
    // change the button color
    color.style.backgroundColor = color.innerHTML;

    // add the color to the collection
    colorsArr.push(color.innerHTML.toLowerCase());
  });

  return colorsArr;
}

// On Load
window.addEventListener('load', main);