Skip to content
Submitted almost 4 years ago

Time Tracking using css grid and pure JavaScript

Renaldy Prasetio•70
@iceofice
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello there, This is my second challenge on FrontMentor and I am well proud of it.

Questions How to reduce the copy and paste needed in my assignData function

function assignData(timeframe) {
  document.getElementById("workHours").innerHTML = data[0].timeframes[timeframe].current;
  document.getElementById("workPrev").innerHTML = data[0].timeframes[timeframe].previous;

  document.getElementById("playHours").innerHTML = data[1].timeframes[timeframe].current;
  document.getElementById("playPrev").innerHTML = data[1].timeframes[timeframe].previous;

  document.getElementById("studyHours").innerHTML = data[2].timeframes[timeframe].current;
  document.getElementById("studyPrev").innerHTML = data[2].timeframes[timeframe].previous;

  document.getElementById("exerciseHours").innerHTML = data[3].timeframes[timeframe].current;
  document.getElementById("exercisePrev").innerHTML = data[3].timeframes[timeframe].previous;

  document.getElementById("socialHours").innerHTML = data[4].timeframes[timeframe].current;
  document.getElementById("socialPrev").innerHTML = data[4].timeframes[timeframe].previous;

  document.getElementById("selfCareHours").innerHTML = data[5].timeframes[timeframe].current;
  document.getElementById("selfCarePrev").innerHTML = data[5].timeframes[timeframe].previous;
}

CSS misalignment I don't know why on the bottom of my card there is some misalignment.

Closing Thank you for everyone who reviewed my design. Any feedback will be appreciated!

Code

Please log in to post a comment

Log in

Community feedback

  • Nam HaÏ•820
    @Nam-Hai

    You can use querySelectorAll to get each "hours" header and "previous" header in a array, then use a for loop to change its content

    Marked as helpful
  • Fidel Lim•2,775
    @fidellim

    Hi Renaldy,

    To answer your question: "How to reduce the copy and paste needed in my assignData function?", you might want to try this:

    const hoursArr = ["workHours", "studyHours", "playHours", "exerciseHours", "socialHours", "selfCarHours"];
const prevArr = ["workPrev", "studyPrev", "playPrev", "exercisePrev", "socialPrev", "selfCarPrev"];

function assignData(timeframe) {
	for(int i = 0 ; i < hoursArr.length; i++){
		document.getElementById(hoursArr[i]).innerHTML = data[i].timeframes[timeframe].current;
		document.getElementById(prevArr[i]).innerHTML = data[i].timeframes[timeframe].previous;
	}
}

    I just made them into two arrays and loop them. Let me know if it works!

    Marked as helpful
  • Fidel Lim•2,775
    @fidellim

    Hi Renaldy,

    Great job on finishing this project! It looks great for both desktop and mobile views! Keep it up!

  • Renaldy Prasetio•70
    @iceofice

    Thanks to @BlueTampon and @fidelim! I have managed to revise my JS code.

    function assignData(timeframe) {
  var currentTimeframeElements = document.querySelectorAll(".current");
  var previousTimeframeElements = document.querySelectorAll(".previous");
  for (var i = 0; i < currentTimeframeElements.length; i++) {
    currentTimeframeElements[i].innerHTML = data[i].timeframes[timeframe].current;
    previousTimeframeElements[i].innerHTML = data[i].timeframes[timeframe].previous;
  }
}

    It works wonderfully!

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord