In this challenge you get an HTML document that renders a lot of colourful hearts.
And you get a JSON object with the information about all the brown colours that were used:
[
{"name": "Brown", "rgb": "165, 42, 42", "hex": "A52A2A"},
{"name": "BurlyWood", "rgb": "222, 184, 135", "hex": "DEB887"},
{"name": "Chocolate", "rgb": "210, 105, 30", "hex": "D2691E"}
// … and more
]
The task is to find out which of the hearts are in a brown colour and report the overall number and which brown is used how many times.
For example:
{
"total":12,
"distribution": {
"Peru":3,"Chocolate":1,
"Sienna":1,"Brown":3,
"BurlyWood":1,
"SaddleBrown":1
}
}
If you want to solve this in the browser using JavaScript, we also set up a Codepen.
Let's paint the world!
I forgot to save my code in Codepen 😢
My solution is
browndata
into a key-value variable (so that I could use it fordistribution
) for example:will become
browndata
into a regular expression (so that I could use it to check that the color matches or not) for example:will become
document.querySelectorAll
to retrieve color from alli
elements.total
or else the next loop.distribution
.