Hello community, This is my solution for this frontend challenge. I've learnt a lot making for sure. Any suggestions how to optimize the JavaScript(Using less code), please feel free and leave a feedback. Thanks in advance
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