Skip to content
OverviewSolutions
21
Comments
6

HK273

@HK273530 points

Learning something new everyday....

Latest solutions

View more solutions

Latest comments

  • HK273•530
    @HK273

    Nice Work! Check this out for formatting your tailwind classes. Little video example here

    Marked as helpful
  • HK273•530
    @HK273

    Nice work! For a good overview of light/dark mode check out this. You'll want to use a theme context as well, so check this. For drag and drop there are a few different approaches but I found react-beautiful-dnd to be pretty good. It can be a bit fiddly at first but there's also a good tutorial here. Hope that helps!

    Marked as helpful
  • HK273•530
    @HK273

    Nice job! Chuck this on the body tag to get rid of the scroll bars....

    body {
overflow: hidden;
}

    This will drop your footer out though so you may want to re-configure your html / other styles a bit if you want to keep the attribution div

    Marked as helpful
  • HK273•530
    @HK273

    Good job! Liked your comments in the HTML to split up your grid sections. Quick tip for your centre issue. Use fractional units (fr) rather than percentages on your main tag (gird-template-columns)

    main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 50% 50%;
  gap: 30px;
  margin: auto;
}

    For the responsive side of things, the biggest tip I can give is to approach the design as mobile first. This does take a while to get used to but once you grasp the concept, you'll be writting much less code and having a much easier time with media queries etc.

    The best way to think about it is if you just write the HTML without any styles, it will automatically be in a mobile state (everything stacked on top of each other). Then rather than worrying about positioning and gird at first you can add the design element styles to the text, containers etc.

    Then you can think about adding gird, flexbox etc. and then use a min-width media query to set the desktop styles. Check out Kevin Powells video on mobile first for a good intro to this.

    Hope this helps! Keep up the good work!

    Marked as helpful
  • HK273•530
    @HK273

    Nice job on the design of this and getting it all working! I feel your pain with the JS on this one aha - I remember doing it myself as one of the first JS based challenges I tried. Firstly, you're going to be much better off actually using the data.json file included, rather than hard coding the values directly in the HTML. Take a look at the fetch API (https://www.w3schools.com/jsref/api_fetch.asp) and map function (https://www.w3schools.com/jsref/jsref_map.asp) for this. What this will allow you to do is render the entire HTML strucutre for each card element and include all of the data (much less code in the long run!). You could then use a similliar method to what you've already implemented to toggle between each data point. You'll also want to take a look at using the forEach method (https://www.w3schools.com/jsref/jsref_foreach.asp) to manage the event listeners assigned to the buttons. Not saying my method is the perfect soltuion for this, but check out my code (https://github.com/HK273/time-tracking-dashboard/blob/main/script/script.js) for this challenge if you want more of a clearer idea on what I'm talking about. Hope this helps!

  • HK273•530
    @HK273

    Nice solution Alex! Quite a tricky one to attempt first time. I would suggest looking into Grid and Flexbox as float-based layouts are somewhat dated now. You'll find it much easier to make it responsive and get more flexibility with Grid than using float. Check out Kevin Powell’s video on this exact challenge for a great introduction to Grid. https://www.youtube.com/watch?v=rg7Fvvl3taU&t=14s

    Marked as helpful