I am currently working on a website for a snow cone stand and I want to incorporate an interactive feature using JavaScript. Specifically, I would like to color code the flavor list based on the actual fruit color. The flavor list is already structured in arrays and inserted into the HTML page using my addToPage function. Can anyone suggest how I can create an array of colors and implement this coloring functionality? Thank you.
var flavorAdder = (function() {
var flavorArr1, flavorArr2, flavorArr3, flavorArr4, textLocator1, textLocator2, textLocator3, textLocator4, addToPage;
flavorArr1 = [
'<p>Apple</p>',
'<p>Banana</p>',
'<p>Birthday Cake</p>',
'<p>Black Cherry</p>'
];
flavorArr2 = [
'<p>Green Apple</p>',
'<p>Guava</p>',
'<p>Honeydew Melon</p>',
'<p>Huckleberry</p>'
];
flavorArr3 = [
'<p>Peach</p>',
'<p>Piña Coloda</p>',
'<p>Pineapple</p>',
'<p>Pink Grapefruit</p>'
];
flavorArr4 = [
'<p>Pink Lemonade</p>',
'<p>Red Raspberry</p>',
'<p>Rootbeer</p>'
];
textLocator1 = document.querySelector('#flavorList1');
textLocator2 = document.querySelector('#flavorList2');
textLocator3 = document.querySelector('#flavorList3');
textLocator4 = document.querySelector('#flavorList4');
addToPage = function(arr, text) {
arr.forEach(function(current) {
text.insertAdjacentHTML('beforeend', current);
});
}
addToPage(flavorArr1, textLocator1);
addToPage(flavorArr2, textLocator2);
addToPage(flavorArr3, textLocator3);
addToPage(flavorArr4, textLocator4);
})();