Responsive Time Tracking Dashboard with Data Fetching

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

By building this project, I was able to learn how to fetch data from an external source and display them in the page. I learned how to handle asynchronous task like fetching data. Additionally, I improved my HTML and CSS skills.

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

One of the challenges I encountered is how I can fetch the data from a file and then display it in the page. So, I read some articles and check their examples. Afterwards, I was able to come up with an idea on how to that and I implemented it in my code. Though it works, I am not certain that it was the best approach for this project. I believe their are more better solutions than mine.

What specific areas of your project would you like help with?

Though I was able to finish the project, I still have doubts on my solution, here are my list of concerns:

• What is the best way to render the data from the file?

In my case, I created all the elements of the report cards for each statistics data in my HTML file and just select all the elements that I want to fill some data in my JavaScript file.

My report card HTML looks like these:

<div class="report__card report__card--orange">
          <img class="report__card-logo" src="./images/icon-work.svg" alt="" />
          <div class="report__card-content">
            <div class="report__card-header">
              <h3 class="report__card-title">Work</h3>
              <button class="report__card-btn">
                <svg width="21" height="5" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M2.5 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z"
                    fill-rule="evenodd"
                  />
                </svg>
              </button>
            </div>
            <div class="report__card-body">
              <time class="report__current" datetime=""></time>
              <p class="report__previous"></p>
            </div>
          </div>
        </div>

Here is my JavaScript for selecting the necessary elements for editing:

const reportCards = document.querySelectorAll(".report__card");
const editableElements = [...reportCards].map(reportCard => {
    const reportTitle = reportCard.querySelector(".report__card-title");
    const reportCurrent = reportCard.querySelector(".report__current");
    const reportPrevious = reportCard.querySelector(".report__previous");

    return {
        reportTitle: reportTitle, 
        reportCurrent: reportCurrent,
        reportPrevious: reportPrevious,
    }
})

• Should I create the report card elements in my JavaScript file after fetching the data instead of directly creating placeholder elements in my HTML file and then just selecting them in my JavaScript file and editing their contents?

• What are the accessibility issues you can see in my solution?

I am not in the accessibility learning path yet but I want to know your feedback on this.

Any feedbacks and recommendations are welcome too!