Write a JS module for the browser that turns a string of text into a Breaking Bad styled DOM element. The below image is an example of properly done string of text.
This is a JSON document that contains information about the periodic table
Requirements:
Make a JS function that return an unambiguous description of how to render the text. This does not need to actually make HTML or CSS. You should produce an object in JS that correctly describes which letters of which words are to be turned into the squares.
- Only words 3 letters or longer should have any element effects applied.
- Only prefixes to words should be used.
- If there is no match (like Xylophone), do not apply any effect.
- If there is more than one match, like Hello, which matches H for Hydrogen and He for Helium, use the 2 letter element over the one letter one.
- Capitalization doesn't matter.
Requirements:
Produce semantically-acceptable HTML that makes nodes looking like the test logo above.
- Use a green-ish background like the image.
- Use any Sans-Serif family font for the element-ified text.
- Use a font with serifs for the unaffected text.
- Make the text white.
- Make the square around the element-ified text white.
- The element-ified text should be both vertically and horizontally centered inside the white bounding box.
- You do not need to put anything inside the element squares but the text for the element symbol.
Requirements:
You get points for adding in any or all of the following in roughly the same position as in the sample logo:
- Molar mass ("molar" in the JSON)
- Atomic number
- Electrons
Make colors, fonts, dimensions, and inclusion/exclusion of flair configurable using a JS object as a second parameter.