Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

css grid mainly

@mowzayo

Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

using flex box

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

how to use json was troublesome

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

the json part

Community feedback

@Juan122113

Posted

Hi! Respect to the JSON part that you ask for help, here's the JSON part of my code:

fetch('./data.json')
    .then(response => response.json())
    .then(data => {
        times = data;
        updateButtonStates(dayBtn);
        updateContent("daily");
    })
    .catch(error => console.error('Error:', error));

This JavaScript code uses the Fetch API to fetch data from a local JSON file and then update the content of a web page. Here's a detailed explanation:

  1. fetch('./data.json'): Uses the fetch function to make an HTTP GET request to the data.json file located in the same folder as the current JavaScript file (indicated by ./).

  2. .then(response => response.json()): This then method is executed when the fetch request is successfully resolved. The function response => response.json() takes the response and converts it into a JSON object.

  3. .then(data => {...}): This second then method is executed when the JSON object is ready for use. Within the {...} block, three main tasks are performed:

    • times = data;: Assigns the retrieved data stored in the data object to a variable named times.
    • updateButtonStates(dayBtn);: A call to a custom function that updates the states of buttons on the web page, taking dayBtn as a parameter.
    • updateContent("daily");: A call to another custom function that updates the content of the web page with daily data, passing the value "daily" as a parameter.
  4. .catch(error => console.error('Error:', error)): This catch method is executed when an error occurs in the fetch request or in any of the then operations. In case of an error, the function error => console.error('Error:', error) prints an error message in the browser console.

In summary, the code fetches data from a JSON file, processes it as a JSON object, and then updates the content and button states on the web page. If any errors occur, an error message is printed in the console.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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