Time tracking project using JSON

Community feedback

• 

  dali987•250

  @dali987

  Posted 28 days ago

  Hi! You did great overall! There are just a few small remarks that I wanted to make.

  • For some reason the images in the cards and the font arent loading and i get errors in the console for each icon used... also i copied the whole project in my local side and it worked ecept the self care icon (since it has a space so you have to replace the "-" with " " for it to work with the .replace() function)

  • there is a typo in the js where you added "e" (third line) (btw it doesnt do much but i told you about it anyway)

  • the site is not responsive for tablets (from 725px to 425px) which is not great so work on that!

  • when i hover over a card the image decides to show its hidden parts (the parts out of the card), just add "overflow: hidden;" to the "user-action-details" class to hide the parts out of it

  • a button doesnt look great when it doesnt have a hovering effect, so add that. All you have to do is to add this:

  button:hover{ /* using the button instead of a class because you didnt give the buttons one*/
      color: white;
  }
  

  and add "transition: 0.4s;" to the button (you can change the duration if you want) and it will have a nice hovering effect

  • some of the sizes and font-weights are not matching the template but its not a big deal so yeah you can ignore this one

  • when i try to hover over a card with developper tools in my browser i get weird stuff happening (2 cards starts flashing)

  For the most part you did great job! happy coding!

  02

  Marked as helpful
• 

  P

  Ralph Angelo Gonzaga•190

  @codejeroo

  Posted 28 days ago

  Hi great Solution! However if I may add, it's better to look up the design in various screen sizes. From what I can see, it has quite problems in tablet screen-size and mobile screen size. Your containers tend to overlap. You can fix this and adjust this by setting breakpoints using media querries and fixing it with CSS. Overall nice solution!

  01