Skip to content
Submitted about 3 years ago

Time Tracking using css grid and pure JavaScript

Renaldy Prasetio•70
@iceofice
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Time tracking dashboard
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

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!

Community feedback

  • Nam HaÏ•820
    @Nam-HaiPosted about 3 years ago

    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
    1
  • Fidel Lim•2,775
    @fidellimPosted about 3 years ago

    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
    1
    Renaldy Prasetio•70
    @iceoficePosted about 3 years ago

    Thanks for the feedback @fidellim !

    I will try to revise my code for this challenge and try your idea. Cheers!

    1
    Fidel Lim•2,775
    @fidellimPosted about 3 years ago

    @iceofice Sure! Good luck with your future projects! Let me know if it works too!

    0
  • Fidel Lim•2,775
    @fidellimPosted about 3 years ago

    Hi Renaldy,

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

    1
  • Renaldy Prasetio•70
    @iceoficePosted about 3 years ago

    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!

    0

Please log in to post a comment

Log in with GitHub

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