Instantly share code, notes, and snippets.

codepo8/CODE100-bunt-statt-braun.md

Last active April 1, 2024 04:51
Show Gist options
• Save codepo8/f860816f98ea8ac47d722968f829e690 to your computer and use it in GitHub Desktop.
CODE100 "#BuntStattBraun" puzzle

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,
}
}```

If you want to solve this in the browser using JavaScript, we also set up a Codepen.

Let's paint the world!

ilumin commented Mar 29, 2024

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

codepo8 commented Mar 29, 2024

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

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"
}
``````
1. 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
``````
1. used `document.querySelectorAll` to retrieve color from all `i` elements.
2. 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`.