Rimuovere le parentesi con JavaScript
Con questo script rimuoviamo le parentesi dal contatore degli articoli che appartengono ad ogni categoria.
<script>
/* Recuperiamo tutte le voci di categoria dal DOM della pagina */
let list = document.getElementsByClassName("cat-item");
/* Per ogni elemento categoria creiamo un nuovo tag <a> che abbia lo stesso attributo href e contemporaneamente rimuoviamo le parentesi dal contatore degli articoli */
for(var i=0; i<list.length; i++) {
var liElement = list[i];
var str = liElement.innerText;
var oldA = list[i].firstChild;
var newA = document.createElement("a");
liElement.innerText = "";
liElement.appendChild(newA);
newA.href = oldA.href;
newA.innerText = str.substring(0, str.length-3).replace(/\n/g, '');
liElement.innerHTML += " " + str.substring(str.length-2, str.length-1);
}
</script>
Aggiungere un nuovo stile alle categorie
Ora non resta che aggiungere un po’ di stile con del CSS.
#category-block > div > h5 {
text-transform: uppercase;
font-weight: bold;
color: #454D64;
font-size: 1.4em;
margin-bottom: 0.4em;
margin-top: 0;
}
#category-block > div > ul {
padding-left: 0;
}
.cat-item {
display: flex;
justify-content: space-between;
padding: 1% 0;
color: #505050;
font-weight: 500;
}
.cat-item > a {
color: #505050;
font-weight: 500;
}
@media screen and (max-device-width:480px) {
#category-block > div > h5 {
text-align: center;
}
}
