In the example Quote Machine, the colors change when the New Quote button is clicked. In my project I made an array of color rgb values as strings. I then use jQuery .css() to update the color, like this:
var colors = [
"",
"rgba(241, 228, 243, 1);",
"rgba(244, 187, 211, 1);",
"rgba(246, 134, 189, 1);",
"rgba(254, 93, 159, 1);",
"rgba(3, 25, 38, 1);",
"rgba(70, 129, 137, 1);",
"rgba(119, 172, 162, 1);",
"rgba(157, 190, 187, 1);",
"rgba(244, 233, 205, 1);",
"rgba(9, 64, 116, 1);",
"rgba(60, 105, 151, 1);",
"rgba(90, 219, 255, 1);",
"rgba(255, 221, 74, 1);",
"rgba(254, 144, 0, 1);",
"rgba(83, 55, 71, 1);",
"rgba(95, 80, 107, 1);",
"rgba(106, 107, 131, 1);",
"rgba(118, 148, 159, 1);",
"rgba(134, 187, 189, 1);",
"rgba(222, 239, 183, 1);",
"rgba(152, 223, 175, 1);",
"rgba(95, 180, 156, 1);",
"rgba(104, 45, 99, 1);",
"rgba(214, 210, 210, 1);"
];
$("#generateQoute").on("click", function() {
$.getJSON(api, function(json) {
$("#quote").html(json.quoteText);
$("#author").html("<cite>-- " + json.quoteAuthor + "</cite>");
$("#quote").css("color", colors[Math.floor(Math.random() * 23) + 1]);
});
});
If I hard code a string into the .css() it works, but I think it’s not reading the array color from the array index, which should be a string. Any advice would be great!