Skip to content
Submitted about 3 years ago

CSS grid, flex box, fetch API

General Fib•50
@Kandy-Hamisi
A solution to the Time tracking dashboard challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I fetched the data from the data.json file provided. It turns out that the timetracking cards I have rendered via javascript from the json file are only accessible when using css but when I use javascript "querySelector" I cannot access the elements. I started debugging and realised its because I used innerHTML, hence the elements are in form of a string thus I cannot access them via javascript. I hope I dont look like a help vampire, I really need to figure this out so that a user can be able to view the daily, weekly and monthly data dynamically. Thanks in advance

Code

Please log in to post a comment

Log in

Community feedback

  • Prabhash Ranjan•2,540
    @besttlookk

    hi, I dont thing there was any need to use fetch API as data was already inside your file system. Simply import it.

    Also i dont think you used grid correctly as it is not responsive for all screen.

    display:grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)  // adjust 30px as your need
gap:16px;

    Try to use about code. It will automatically wrap.

    Good Luck

    #happyCoding

    Marked as helpful
  • P
    Justin Green•2,940
    @jgreen721

    Create a JS function that when you click on of the time items, it grabs the daily/weekly/monthly (ie with e.target.textContent) and then you can toggle the class displays accordingly (ie click on weekly, set its display on and turn the other 2 to none). Nice job with the cards!

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