Frontend Mentor | Mikhil Desai's profile

P

@toshirokubota

Submitted 6 months ago

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?

results summary component with javascript and flexbox

1

Mikhil Desai•560

@mike15395

Posted 2 months 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!

AnDev•540

@AnDevM

Submitted 3 months ago

Body Mass Index calculator

1

Mikhil Desai•560

@mike15395

Posted 3 months ago

hey @AnDevM Congratulations on completing the challenge!

Your solution is awesome and great work!

Here are small micro-improvements from my side:

For normal weight category, the text weight is rendered two times, to fix this just remove weight text from line 52->bmic/src/components/MetricCalculator.tsx.
Desktop view of Last section cards is not as per design. You can use grid layout with more cols like 16 and adjust the colspan accordingly to get desired result.

Happy Coding!

Marked as helpful

P

Habeeb Kareem•690

@olaide-hok

Submitted 3 months ago

E-commerce product page

1

Mikhil Desai•560

@mike15395

Posted 3 months ago

@olaide-hok Congratulations on completing the challenge!

Your solution is excellent and nice work!.

Few micro-improvements(as per design) from my side:

Add hover effect for add-to-cart and checkout buttons.
Mobile view - after opening menu-sidebar, the image-carousel prev-buttons is displayed in front of menu-sidebar hiding menu contents.

Happy Coding!

Utkarsh Sachan•300

@Utkarsh860

Submitted 3 months ago

News Homepage

1

Mikhil Desai•560

@mike15395

Posted 3 months ago

Congratulations @Utkarsh860 on completing the challenge!

Your solution looks good and is responsive as well.

But it would be more better if you would have used semantic HTML like <header> <nav> <aside> <article> with proper aria-label wherever required.

Your solution accessbility score is 88 on lighthouse(rightclick->inspect-> >> ->lighthouse->check accessibilit score). Make sure it is 100.

I didn't understand the usage of temp.txt file in your code.

Rest everything is perfect and well written. Happy Coding!.