Beginner
Task pills with classes and a progress bar
Render each task in tasks as an <li> with the classes pill and the task's status (done, late or todo), for example class="pill late". Add the class starred too when starred is true.
Inside each <li> show the title in a <span className="title"> and a progress bar: a <div className="bar"> whose inline style width is the task's progress as a percentage (40 → width: 40%).
The tasks are written out for you (no list code needed yet): fill in Pill.
What Check tests
- Each pill has the class
pilland its status - Only the starred task has the
starredclass - No class name says
falseorundefined - The bars are 100%, 40% and 0% wide (inline style)
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.