The generation of the individual counters was messy and looked quite complicated. I decided to have a render function that appends the necessary childs to the skelleton HTMLElement that will hold the created elements and used that as means to refactor everything and to separate the whole function into smaller ones. This should make thing easier to maintain and make things more clear when working with the JS of the website.
Additionally, a bug existed where the first counter had two span elements like so;
This happened because of how I was interpolating the string in order to include the span inside of each message. I didn't want to use the innerHtml attribute nor the double span. For a while this made the number of the main counter bigger thanks to applying the font-size: 1.8em rule twice, but a the end of the day it was a "happy accident" and it's not the right way to do this. After my changes on the PR there is only one span element and I changed the css a bit to target that specific span and make it bigger.
Description
The generation of the individual counters was messy and looked quite complicated. I decided to have a
renderfunction that appends the necessary childs to the skelletonHTMLElementthat will hold the created elements and used that as means to refactor everything and to separate the whole function into smaller ones. This should make thing easier to maintain and make things more clear when working with the JS of the website.Additionally, a bug existed where the first counter had two
spanelements like so;This happened because of how I was interpolating the string in order to include the span inside of each message. I didn't want to use the
innerHtmlattribute nor the double span. For a while this made the number of the main counter bigger thanks to applying thefont-size: 1.8emrule twice, but a the end of the day it was a "happy accident" and it's not the right way to do this. After my changes on the PR there is only onespanelement and I changed thecssa bit to target that specific span and make it bigger.