JSFiddle - React, Tailwind, and code Playground

by Maxim_Wolf

HTML

<ul class="course-plan"></ul>

CSS

:root{
  --lms-course-background: #F8FAFA;
  --lms-base-size: 16px;
  --lms-border-color: #4f4f4f;
}
html{
  font-size: var(--lms-base-size);
}
.course-plan{
  display: grid;
  grid-template-columns: 1fr auto;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 336px;
  background-color:var(--lms-course-background);
}
.course-plan__item{
  display: grid;
  grid-template-columns: subgrid;
  min-height: calc(4 * var(--lms-base-size));
}

.course-plan__icon{
  width: calc(2.5 * var(--lms-base-size));
  height: calc(2.5 * var(--lms-base-size));
  display: inline-block;
  border: 1px solid var(--lms-border-color);
  border-radius:50%
}

JavaScript

const list = [{
    name: 'Neurodiversity Explained',
    completed: true,
    moduleTotal: 2,
    moduleCompleted: 2,
  },
  {
    name: 'Neurodiversity in the Workplace 1.0',
    completed: true,
    moduleTotal: 2,
    moduleCompleted: 2
  },
  {
    name: 'Neurodiversity - Interview and Selection 1.0',
    completed: true,
    moduleTotal: 2,
    moduleCompleted: 2
  },
  {
    name: 'HR Ethics Series - Introduction to Neurodiversity and a welcome workplace 2.0',
    completed: false,
    moduleTotal: 4,
    moduleCompleted: 2,
  },
  {
    name: 'Disclosing Neurodivergence 2.0',
    completed: false,
    moduleTotal: 3,
    moduleCompleted: 0,
  },
]
const coursePlan = document.querySelector('.course-plan');
const createIcon = (line)=>{
  const icon = document.createElement('span');
  icon.className = 'course-plan__icon';
  if(line.completed){
  icon.classList.add('course-plan__icon_completed')
  }
  else{
    icon.innerText = `${line.moduleCompleted}/${line.moduleTotal}`
    if(line.moduleCompleted<=0){
      icon.classList.add('course-plan__icon_not-started');
    }
  }
  return icon;
}
const createLabel = (line)=>{
const label = document.createElement('span');
label.innerText = line.name;
label.className = 'coures-plan__label';
return label;
}
const createLi = (line) => {
  const li = document.createElement('li');
  const icon = createIcon(line);
  const label = createLabel(line);
  li.append(icon, label)
  li.className = 'course-plan__item';
  return li;
}

coursePlan.append(...list.map(createLi))