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
render
function that appends the necessary childs to the skelletonHTMLElement
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 thefont-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 onespan
element and I changed thecss
a bit to target that specific span and make it bigger.