Skip to content
Submitted 5 months ago

Responsive time-tracking-dashboard(first attempt)

Ejiofor John•450
@echocode1
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

What are you most proud of, and what would you do differently next time?

It was my first time using fetch Api and writing html with javscript. and it was a success though next time i will try using a frame work to compare and improvise

What challenges did you encounter, and how did you overcome them?

I had issue trying to use a conditional that any time an eventListener of onclick is executed (for the daily,weekly,and monthly),it immediately displays the right texts from the json file. since i could not get a right command for it. I had to display all 3 of them and used the onclick to display the visibility of each at when needed .which was a long process and involving a longer code

What specific areas of your project would you like help with?
  1. firstly i tried to avoid using promise for getting the json data, so i used the import but it keeps returning an type error thereby defining the ''assert" as type error.i checked and my node is still with a version that accepts it.please what can i do to solve that issue .
  2. due to the above issue i had to use an api fetch. coding my innerHTML to update my fetched file out side the promise or fetched function was not achievable as all attempt i tried to make the fetched file into a variable to use outside of the promise not working. please i need help on that

Community feedback

  • Krushna Sinnarkar•1,100
    @krushnasinnarkarPosted 4 months ago

    Hi @echocode1,

    Congratulations on successfully completing the challenge! The website looks fantastic and functions well across various screen sizes.

    I have a suggestion regarding your code that I believe will be of great interest to you.

    While your website works perfectly, it can be further improved for screen sizes between 1000px and 576px. In this range, each card gets elongated, which can be avoided by adding an additional breakpoint using media queries. Instead of showing all 4 columns, you can move the 4th column down, so fewer columns will be displayed nicely, and the cards won't get stretched.

    @media only screen and (max-width: 1000px) and (min-width: 576px) {}

    I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

    Feel free to reach out if you have more questions or need further assistance.

    Happy coding!

    Marked as helpful
    1
    Ejiofor John•450
    @echocode1Posted 4 months ago

    @krushnasinnarkar thanks on your feedback . i will work on it 🙏🙏

    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