Desktop Design

Mobile Design

Todo app

<p class="text-item">Complete online Javascript course</p>

<p class="text-item">Jog around the park 3x</p>

<p class="text-item">10 minutes meditation</p>

<p class="text-item">Pick up groceries</p>

<p class="text-item">Complete Todo App on Frontend Mentor</p>

<div class="container-options-task">
    <p class="items-left">6 items left</p>
    <p class="clear-completed">Clear Completed</p>
  </div>

<div class="container-options">
    <p class="all option-active">All</p>
    <p class="active">Active</p>
    <p class="completed">Completed</p>
  </div>

<p class="drag-text">Drag and drop to reorder list</p>

<div class="footer">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a target="_blank" href="https://www.linkedin.com/in/emmanuelyapura/">Emmanuel_Yapura</a>.
  </div>

="circle"><img class="displayNone" src="./images/icon-check.svg"></div>

e</p><div><img class="cross" src="./images/icon-cross.svg"></div>

x</p><div><img class="cross" src="./images/icon-cross.svg"></div>

n</p><div><img class="cross" src="./images/icon-cross.svg"></div>

r</p><div><img class="cross" src="./images/icon-cross.svg"></div>

s</p><div><img class="cross" src="./images/icon-cross.svg"></div>

Please log in to post a comment

Community feedback

to do list with classes

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community