Time-tracking-dashboard

Community feedback

• 

  zeegu•310

  @zeeguPosted about 1 month ago

  Beautifully done!🎉

  Handling codes a lot with JS while keeping your HTML & CSS simple is really cool! I never thought about adding svg icons case by case by JS, I think that's a good idea👍

  Here's a little suggestion for a nicer code.

  Code refactoring

  • Converting button text to lowercase .toLowerCase() would be good for refactoring your code, since there's a bit of duplication. Check the code below!

  const handleView = (e) => {
      handleButtonStyle(e);
      const timeframe = e.target.textContent.toLowerCase(); 
      populateDOM(data, timeframe);
  };
  

  0

  ---

  

  zeegu•310

  @zeeguPosted about 1 month ago

  • Using .innerHTML and .forEach() would keep the iteration clean. Check the code below!

  activityData.forEach(activity => {
          const activityContainer = document.createElement('article');
          activityContainer.dataset.activityType = activity.title;
          appendSvgs(activityContainer);
  
          const activityCard = document.createElement('div');
          activityCard.classList.add('activity-card');
  
          activityCard.innerHTML = `
              <div class="activity-info">
                  <p class="activity-name">${activity.title}</p>
                  <svg width="21" height="5" xmlns="http://www.w3.org/2000/svg">
                      <path d="M2.5 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z" fill="#BBC0FF" fill-rule="evenodd"/>
                  </svg>
              </div>
              <div class="activity-time">
                  <h2 class="data-current">${activity.timeframes[timeframe].current}hrs</h2>
                  <p class="previous-time">${timeframeLabels[timeframe]} - ${activity.timeframes[timeframe].previous}hrs</p>
              </div>
          `;
  
          activityContainer.appendChild(activityCard);
          cardsContainer.appendChild(activityContainer);
      });
  

  I'm looking forward to your next challenge💕 Happy coding :D

  Marked as helpful

  0

  

  Paradox•330

  @TarestaPosted about 1 month ago

  @zeegu Thanks. I do it see it now. Using innerHTML will be a good idea. Thank you for taking the time to read my code.

  1

  

  Paradox•330

  @TarestaPosted about 1 month ago

  @Taresta, I hope you do not mind, but I also read your solution to the challenge and was impressed by how organised your code is. In comparison, mine felt like a big mess. I would learn to refactor my code and keep it organized in my future projects. Thanks for the motivation😇👍

  1

  

  zeegu•310

  @zeeguPosted about 1 month ago

  @Taresta Wow, Thank you for taking your time to read my code! It's an honor to be a motivation for you😊

  Refactoring is so complicated and difficult that my head is exploding😂 Thanks for your kind comments, I got a motivation, too! Let's build up our skills. Happy coding💻💪

  0