I am working on a website for a snow cone stand and am looking to add a unique effect to their flavor list. I want to create an interactive experience where hovering over a flavor name scales the text and changes its color to match the real fruit. Is there a way to achieve this without having to create individual variables for each flavor? (I already have all the color classes set up in CSS)
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);
})();