Submitted 4 months ago

results summary component with javascript and flexbox

toshirokubota•770

@toshirokubota

Preview site View code

This is a solution for...Results summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I was able to populate the content semi-programmatically, although the data is hard-coded inside... I thought about making it completely dynamic but it turned out being more difficult than I wanted to spend time on.

I wanted to set the background of the background color of each category programmatically from the color of the SVG icon. It could be done, but I did not have time to work on it... But at least, I thought about it!

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

To populate the content dynamically, I pasted the provided json file inside

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

There is an outline on the "Continue" button when it is focused. I tried to remove it by setting outline: none, but it did not disappear completely.

Are there easy ways to read a local file without running a server nor modifying the security settings of the browser?

Community feedback

Mikhil Desai•560

@mike15395Posted 9 days ago

@toshirokubota Congratulations on completing the challenge!

Here are few improvements:

Dynamic code from data.json

let summaryContainer = document.getElementById("summary-container");

function getData() {
  fetch("./data.json")
    .then((res) => res.json())
    .then((data) => displaySummaryData(data));
}

getData();

function displaySummaryData(data) {
  let summaryContent = data.map((item) => {
    return ` <div class="flex flex-row justify-between bg-[${item.bgColor}] p-3 rounded-lg">
          <div class="flex flex-row gap-3"><img src=${item.icon} alt="icon-reaction"> <span class="text-[${item.textColor}]">${item.category}</span></div>
          <span> <strong>${item.score}</strong> <span class="text-[#303B59] font-bold">/ 100</span></span>
        </div>`;
  });

  console.log(summaryContent, "summary content");
  summaryContainer.innerHTML = summaryContent.join("");
}

center main div,

display:"flex";
justify-content:"center";
align-items:"center";
height:"100vh";

Add cusor-pointer to button

Rest everything is good! Happy Coding!

Please log in to post a comment

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