Hey, nice work.
Consider using a list for the statistics. Any time you have similarly-shaped data or UI elements, it might make sense to be in a list.
Marked as helpful
1
Jeffrey Hill• 100
@webdevhill
Posted
@burrijw the statistics do look like a list or even a table in HTML now that you mention it
0
Jeffrey Hill• 100
@webdevhill
Posted
@burrijw funny, I refactored the HTML as a <ul> and now I have a DRY class situation
<ul class="summary-scores">
<li class="score score-reaction score-container">
<img src="./assets//images/icon-reaction.svg" alt="Reaction">
<span>Reaction</span>
<span class="num-bold">80 <span class="num-light"> / 100</span></span>
</li>
<li class="score score-memory score-container">
<img src="./assets//images/icon-memory.svg" alt="Memory">
<span>Memory</span>
<span class="num-bold">92 <span class="num-light"> / 100</span></span>
</li>
<li class="score score-verbal score-container">
<img src="./assets//images/icon-verbal.svg" alt="Verbal">
<span>Verbal</span>
<span class="num-bold">80 <span class="num-light"> / 100</span></span>
</li>
<li class="score score-visual score-container">
<img src="./assets//images/icon-visual.svg" alt="Visual">
<span>Visual</span>
<span class="num-bold">80 <span class="num-light"> / 100</span></span>
</li>
</ul>
0
Jeffrey Hill• 100
@webdevhill
Posted
@burrijw
much cleaner, ty!
<ul>
<li class="score-reaction">
<img src="./assets//images/icon-reaction.svg" alt="Reaction">
<span>Reaction</span>
<span class="num-bold">80 <span class="num-light"> / 100</span></span>
</li>
<li class="score-memory ">
<img src="./assets//images/icon-memory.svg" alt="Memory">
<span>Memory</span>
<span class="num-bold">92 <span class="num-light"> / 100</span></span>
</li>
<li class="score-verbal ">
<img src="./assets//images/icon-verbal.svg" alt="Verbal">
<span>Verbal</span>
<span class="num-bold">80 <span class="num-light"> / 100</span></span>
</li>
<li class="score-visual ">
<img src="./assets//images/icon-visual.svg" alt="Visual">
<span>Visual</span>
<span class="num-bold">80 <span class="num-light"> / 100</span></span>
</li>
</ul>
1
