Time Tracking Dashboard - Vanilla HTML/CSS/JS

Solution retrospective
Getting this done. It started easy but then I ran into a bunch of challenges with the desktop design and some of the JS -- but I got through it all. I also learned some new JS things and about the HTML `` tag which I found handy for this project
What challenges did you encounter, and how did you overcome them?I overcomplicated how to create the background and images above the card. A little internet research fixed the problem for me.
What specific areas of your project would you like help with?I think I understand why frameworks make things easier. Doing this vanilla took a bit of work but I got there. Really the only thing I need help with is simplifying things in the future especially with the JS
Please log in to post a comment
Log in with GitHubCommunity feedback
- @dolapobj
I really like how you used the <template> tag to dynamically render the different cards. I used a different approach and had to write out all the HTML for each card in my js script.
The only thing that really stood out to me to be improved is in how you define your grid.
@media screen and (min-width: 56em) { .grid-container { grid-template-columns: repeat(4, minmax(0,1fr)); grid-template-rows: repeat(2, 1fr); grid-template-areas: "profile work play study" "profile work play study" "profile exercise social self-care"; } }
Here you define two rows but in the template you have three? I think it was just a small typo.
Othwerwise, incredible job! Well done!
Marked as helpful - @ladibanks1
cool
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