Time Tracking Dashboard

Community feedback

• 

  RickyPWebDev•200

  @RickyPWebDev

  Posted 3 months ago

  This was a very challenging project with DOM manipulation and layering of content. You have done a great job on matching the design. Just out of curiosity there are some elements which never change, the top image the category i.e work play... so really dont need to be added to the dom through JavaScript as some of these variables will be empty... try refreshing your browser a few times you will see a "0" instead of the category.

  Just curious why you have put the top images in an array?

  const backGroundImages = [ "images/icon-work.svg", "images/icon-play.svg", "images/icon-study.svg", "images/icon-exercise.svg", "images/icon-social.svg", "images/icon-self-care.svg" ]

  you can just render that in the html- these elements never change.

  <div class="card work" data-title="Work"> <img class="top-image" src="images/icon-work.svg"> <div class="card-content">

      <div class="dots-heading">
        <h3>Work</h3>
        <img class="dots" src="images/icon-ellipsis.svg">
      </div>
  
      <h1><span class="current">32</span>hrs</h1>
      <p>Last Week - <span class="previous">36</span>hrs</p>
    </div>
  </div>
  

  00