expenses-chart-component HTML CSS Js Mobile-flow first

Community feedback

• 

  MohammedDuke•150

  @MohammedDukePosted over 2 years ago

  great work your solution better alot than my i've learnt alot form you code like how you to center component . i don't know if my js code can help you

  
  let chart = document.querySelectorAll("li.chart");
  let amount = document.querySelectorAll(".amount");
  
  // GET Data From json file and add to HTML File
  function chartsRepo() {
    fetch("./data.json")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        for (var i = 0; i < data.length; i++) {
          chart[i].style.height = data[i].amount + "%";
          amount[i].style.bottom = data[i].amount + 1 + "%";
          amount[i].innerHTML = "$" + data[i].amount;
        }
      });
  }
  chartsRepo();
  
  // Add Active & Remove
  chart.forEach((el) => {
    el.addEventListener("click", () => {
      chart.forEach((ele) => ele.classList.remove("active"));
      el.classList.add("active");
    });
  });
  

  hope good day for you

  Marked as helpful

  0

  ---

  

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  @MoDuke-12 Hello MoDuke-12,

  Thanks for your feedback . I’m glad that you have learnt something from my solution. Reviewing other developers code does help in many ways. As developers, we can come up with different approaches to the same challenge, I see you have used chaining then approach,I have used async and await to write asynchronous JavaScript that looks synchronous and allows for a clean and concise code.

  Thanks again .

  0