Design comparison
Solution retrospective
Dear All, I would be grateful for any kind of recommendation and feedback.
I have thought that the column with the greatest value could be formatted in Javascript and be dynamic although could not figure it out how.
Thank you Bence
Community feedback
- @prantiknoorPosted over 2 years ago
Hey @benceturbulence. You used this to measure the height
height: ${data.amount*2.5}px
. But if the data will be big, then the chart will also be big.So you can use a limit.
const maxHeight = 200;
. And you can find the max amount by this:const maxAmount = Math.max(...column.map((el) => el.amount));
By these two values, you can measure the height of every column.
const height = (element.amount / maxAmount) * maxHeight;
getData().then((column) => { // No matter how big the amount, the size of bar will be under maxHeight const maxHeight = 200; const maxAmount = Math.max(...column.map((el) => el.amount)); let htmlArray = column .map((element) => { const height = (element.amount / maxAmount) * maxHeight; return setHtml(element.day, height); }) .join(""); document.getElementById("column_container").innerHTML = htmlArray; }); function setHtml(day, height) { return ` <div class="column"> <span class="col" style ="width: 100%; height: ${height}px"></span> <p class = "days accent">${day}</p> </div> `; }
Marked as helpful1 - @anglicusPosted over 2 years ago
Yes, you can format the column with the greatest value dynamically. You just have to include some way of finding the maximum value in your JS and then mark that column by adding a class to it. Looking at your code, you could modify your
getData()
function to look something like this (there may be a more elegant way to do it, but this should at least give you the basic idea):getData().then(column => { console.log(column); let max = 0; // will store the largest value of amount let max_index = -1; // will set the index where the largest value is found let htmlArray = column.map((element, index) => { // check if the amount exceeds the largest found so far if (element.amount > max) { // if so, set the max and max_index max = element.amount; max_index = index; } return setHtml(element); }); const columnContainer = document.getElementById('column_container'); columnContainer.innerHTML = htmlArray.join(''); // add .highlight to the column that had the greatest amount columnContainer.querySelector(`:nth-child(${max_index + 1})`).classList.add("highlight"); })
After that, just add a bit to your CSS to recolor the column where the maximum occurred:
.highlight > .col { background-color: var(--cyan); }
Marked as helpful1 - @zambobencePosted over 2 years ago
Thank you very much for your valuable feedback, I really appreciate it.
0
Please log in to post a comment
Log in with GitHubJoin 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