PhoenixDev22• 16,950@PhoenixDev22Submitted about 2 years agoHello 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 advanceexpenses-chart-component HTML CSS Js Mobile-flow first1183
MohammedDuke• 150@MohammedDukePosted about 2 years agogreat 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 helpful0This comment has received 1 replyShow