Создание упорядоченного списка с цветными кружками на числах используя JavaScript

Оффтоп javascript
1

Привет, ребята! У меня возникла проблема при создании упорядоченного списка с помощью JavaScript. Я хочу, чтобы числа в списке были окружены цветными кружками.

Вот что я пробую сделать:

const цвета = ['#FF0000', '#00FF00', '#0000FF'];
const элементы = ['Яблоко', 'Банан', 'Апельсин'];

let списокHTML = '';
for (let i = 0; i < элементы.length; i++) {
  списокHTML += `<li><span style='background-color:${цвета[i]}; border-radius: 50%; width: 25px; height: 25px; display: inline-block; text-align: center;'>${i + 1}</span> ${элементы[i]}</li>`;
}

document.getElementById('мойСписок').innerHTML = списокHTML;

<ol id='мойСписок'></ol>

Числа должны выглядеть как на примере, но каждый получает цвет из массива в цикле. Как можно добиться такого эффекта правильно?

2

Твой подход в целом правильный, но есть пара моментов для улучшения. Вместо инлайн-стилей лучше использовать CSS-классы. Это сделает код чище и гибче. Вот как можно оптимизировать:

.circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: 10px;
}

В JS просто добавляй класс и устанавливай цвет через style.backgroundColor. Так будет намного эффективнее и читабельнее.

3

Слушай, я тоже недавно делал похожую штуку. Вместо того чтобы возиться с inline стилями, попробуй задать стили для span в CSS отдельно. Типа так:

.circle {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  text-align: center;
  line-height: 25px;
  margin-right: 10px;
}

А в JS просто добавляй класс и цвет. Так код будет чище и проще поддерживать. Как думаешь, сработает?