A seperation of concerns
Another antipattern I come across in legacy codebases is a lack of a separation of concern.
<div id="main" style="width: 330px; border: 1px #ccc solid">
<h1 onclick="loadList()">Top 5 girls name</h1>
<ul style="display: none;">
<li onclick="clickName('Sophia');"
style="border-top: 1px #ccc solid; border-left: 1px #ccc solid; border-right: 1px #ccc solid;">Sophia</li>
<li onclick="clickName('Emma');"
style="background-color: #eee; border-left: 1px #ccc solid; border-right: 1px #ccc solid;">Emma</li>
<li onclick="clickName('Olivia');"
style="border-left: 1px #ccc solid; border-right: 1px #ccc solid;">Olivia</li>
<li onclick="clickName('Ava');"
style="background-color: #eee; border-left: 1px #ccc solid; border-right: 1px #ccc solid;">Ava</li>
<li onclick="clickName('Isabella');"
style="border-left: 1px #ccc solid; border-right: 1px #ccc solid; border-bottom: 1px #ccc solid;">Isabella</li>
</ul>
</div>Here we have a few issues,
Read more about A seperation of concerns
(2 minutes)