CODE100 "#BuntStattBraun" puzzle

CODE100-bunt-statt-braun.md

CODE100 Challenge #BuntStattBraun

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!

{
  "total": 20,
  "distribution": {
    "Brown": 3,
    "BurlyWood": 3,
    "Chocolate": 3,
    "Peru": 3,
    "SaddleBrown": 3,
    "RosyBrown": 0,
    "Sienna": 5
  }
}

{
  "total": 20,
  "distribution": {
    "Brown": 3,
    "BurlyWood": 3,
    "Chocolate": 3,
    "Peru": 3,
    "SaddleBrown": 3,
    "RosyBrown": 0,
    "Sienna": 5
  }
}

Excellent, what was your solution?

I forgot to save my code in Codepen 😢

My solution is

1. transformed browndata into a key-value variable (so that I could use it for distribution) for example:

{"name": "Brown", "rgb": "165, 42, 42", "hex": "A52A2A"}

will become

{
  "brown": "Brown",
  "rgb(165, 42, 42)": "Brown",
  "A52A2A": "Brown"
}

2. transformed browndata into a regular expression (so that I could use it to check that the color matches or not) for example:

{"name": "Brown", "rgb": "165, 42, 42", "hex": "A52A2A"}

will become

/Brown|165, 42, 42|A52A2A/i

3. used document.querySelectorAll to retrieve color from all i elements.
4. loop all colors and check:
   • Does it match with the regular expression from step 2? Then count total or else the next loop.
   • Does it match with the key-value variable from step 1? Then count distribution.