Skip to content
OverviewSolutions
22
Comments
28
Mikhil Desai
@mike15395

All comments

  • Mikhil Desai•600
    @mike15395

    Congratulations @JairRaid on completing the challenge!

    Following points are missing in your code:

    1. when quantity is 1 and after pressing decrement button, the item must get removed from the cart. Just update your decrement code. You may refer to following code
     function decrement() {
    if (quantity === 1) {
      removeFromCart(name);
    } else {
      decrementQuantity(name);
    }
  }

    not exactly like above as it is written by me but logically it should be same!

    1. Use Different component for Dessert instead of populating it in App.jsx, it will make your code more modular.

    Rest everything is good! Happy Coding!

  • James•110
    @Jamieeee1
    What are you most proud of, and what would you do differently next time?

    How I didnt give up and used various methods to tackle my problems.

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

    Shared file for cart and items. I used useState and updated only the changed item to prevent reloading of page. Did this with the help of AI

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

    setState and Json sever

    Reactjs flex grid

    #react#vite
    1
    Mikhil Desai•600
    @mike15395

    Congratulations @Jamieeee1 on completing the challenge!

    Your code is working fine but if you add following things to your code, it can further improve!

    1. Instead of directly copy pasting data into App.jsx you can simply import it from .json file without need of json server by using import data from "./../../data.json use ./ depending upon folder where the file is stored.

    2. Images are not updating as per view port, you can add following lines of code to fix it

     <picture>
          <source  media="(min-width: 1024px)" srcset={imgSrc?.desktop}/>
          <source media="(min-width: 640px)" srcset={imgSrc?.tablet}/>
          <img src={imgSrc?.mobile} alt="food-image" className={inCart ? withBorder : withoutBorder}/>
 </picture>
    1. You can use context/redux for global state management instead of writing all states in app.jsx. This will help in future complex applications.

    Rest Everything is good! Happy Coding!

    Marked as helpful
  • P
    toshirokubota•1,320
    @toshirokubota
    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•600
    @mike15395

    @toshirokubota Congratulations on completing the challenge!

    Here are few improvements:

    1. 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("");
}
    1. center main div,
    display:"flex";
justify-content:"center";
align-items:"center";
height:"100vh";
    1. Add cusor-pointer to button

    Rest everything is good! Happy Coding!

  • Mikhil Desai•600
    @mike15395

    hey @AnDevM Congratulations on completing the challenge!

    Your solution is awesome and great work!

    Here are small micro-improvements from my side:

    1. 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.

    2. 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
  • Mikhil Desai•600
    @mike15395

    @olaide-hok Congratulations on completing the challenge!

    Your solution is excellent and nice work!.

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

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

    Happy Coding!

  • Mikhil Desai•600
    @mike15395

    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!.

  • Mikhil Desai•600
    @mike15395

    @FernJBatista congratulations on completing the challenge!

    Here are few missing points in your solution:

    1. success message not displayed.
    2. error message for radio buttons not displayed.
    3. last check box error message should be in red color.
    4. not responsive.

    Rest your code in well written and 100% accessible. Happy coding!

    Marked as helpful
  • Mikhil Desai•600
    @mike15395

    @NavarroEmiliano Congratulations on completing the challenge!

    Your solution is awesome and looks pixel perfect to design.

    If you would have used semantic HTML like <details></details> and <summary></summary> then it would be more accessible.

    you can read more about it here.

    Happy Coding!

    Marked as helpful
  • Mikhil Desai•600
    @mike15395

    Hey @yudin7324 congratultions on completing the challenge!

    You are very close to the design but here are some micor-improvements from my side:

    1. Arrange html,css,js files in one folder- you have put css and js file in assets folder. When all files are there in one folder then it becomes easier to read for other devs.

    2. Issue with responsiveness- when i tried viewing in mobile view then right part of your main container gets cut. use max-width:390px to fix this. Also you don't need so many media queries for same.

    3. Use semantic HTML- try using semantic HTML like <article></article> instead of <div class="card"></div> to make it accessible.

    Rest your solution is good,Nice Work! and i liked your JS code-clean and short!.

    Happy Coding!.

  • Mikhil Desai•600
    @mike15395

    Hey @marcello88c congratulations on completing the challenge!

    You are very close to the design and solution but still i would suggest following micro improvements:

    1. Adjust the media query breakpoint for desktop view as it is showing tablet view in desktop screen.

    2. After submitting the answer, just highlight the incorrect answer (incase it is selected) and higlight correct answer. No need to highlight all incorrect options. As per figma this should be flow according to my understanding.

    3. After selecting the quiz topics, initially it shows placeholder in question section for few seconds then displays questions and answers.(small bug)

    4. You have hard coded initial quiz topics like HTML,CSS,JS,Accessibility. But instead you can make it dyanamic using following code:

    function displayQuizData(data) {
  let initialStart = data["quizzes"].map((ele) => {
    return `<div class="quiz-topics" id=${ele.title}><img src=${ele.icon} width=20 height=20 alt="icon-title"/> ${ele.title}</div>`;
  });
  document.querySelector(".section-2").innerHTML += initialStart.join("");

  document.querySelector(".section-2").addEventListener("click", function (e) {
    if (e.target.classList.contains("quiz-topics")) {
      data["quizzes"].map((item) => {
        if (item.title == e.target.id) {
          hideIntialQuizPage();
          currentHeading.innerHTML =
            `<img src=${item.icon}  id=${item.title} alt="icon-heading"/>` +
            item.title;
          displayQuestions(item["questions"], 0, item);
        }
      });
    }
  });
}

    This code is useful when someone changes initial quiz topics(title: "HTML") and adds more topics in data.json file then automatically it gets changed in UI as well.

    Rest your code is well written and maintained, i learned a lot from your code.

    Happy Coding!.

    Marked as helpful
  • P
    toshirokubota•1,320
    @toshirokubota
    What challenges did you encounter, and how did you overcome them?

    I had various issues on customizing the input range bar and its thumb. I overcame by consulting on google and AIs. I still have not been able to control the thumb programmatically, as its location may misalign when the page is refreshed.

    I generated a password simply by choosing characters randomly from the pool. There is no guarantee that it does include a number when the 'Include Numbers' check box is checked. What is does is simply to add 0-9 into the pool of characters.

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

    I would like to know how to move the thumb of a range input programmatically, so that I could fix the misalignment issue mentioned above.

    In addition, any suggestions on html/css/script for improvement are appreciated!

    password generator app

    1
    Mikhil Desai•600
    @mike15395

    Congratulations @toshirokubota on completing the challenge!

    Here are few pointers which will improve your solution:

    1. Styling input slider

    i have used character-length-input as id for my input , you change accordingly to your code

    CSS part

    #character-length-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, var(--neon-green) 50%, #18161F 50%);
    /* border-radius: 5px; */
    outline: none;
    cursor: pointer;
    border: none;
  }
  
  /* WebKit browsers (Chrome, Safari) */
  #character-length-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: #E7E7E7;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  }
  
  #character-length-input::-webkit-slider-thumb:hover {
    background: var(--dark-grey); /* Dark grey */
    border: 2px solid var(--neon-green);
  }

    JS part for adjusting percentage on change

    characterInput.addEventListener("input", function () {
  document.getElementById("character-length-value").innerHTML =
    characterInput.value;

  const min = this.min;
  const max = this.max;
  const value = this.value;
  const percentage = ((value - min) / (max - min)) * 100;

  // Dynamically update the background gradient
  this.style.background = `linear-gradient(to right, #A4FFAF ${percentage}%, #18161F ${percentage}%)`;
});
    1. you missed COPIED text after clicking on copy button
    2. check font color of heading and strength word as per design
    3. add hover effect on generate button and remove border as per design

    Rest your code is well written and maintained! Happy Coding!!

    Marked as helpful
  • Mikhil Desai•600
    @mike15395

    Congratulations @7osny13 on completing the challenge!

    After reviewing your code,Here are few improvements:

    1. You are not displaying correct output as per requirements, you can refer to code below for calculating output
    function calculateOutput(selectedValue) {
  if (billInput.value && totalPeople.value && selectedValue) {
    totalTipAmount = (billInput.value * selectedValue) / 100;

    let totalAmount = Number(billInput.value) + totalTipAmount;

    tipAmount.textContent =
      "$" +
      Number(
        totalPeople.value > 0
          ? (totalTipAmount / totalPeople.value).toFixed(2)
          : ""
      );

    tipTotal.textContent =
      "$" +
      Number(
        totalPeople.value > 0
          ? (totalAmount / totalPeople.value).toFixed(2)
          : ""
      );
  }
}

    2.There is no need of promises

    1. UI changes, refer to following code:
    .main{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 1fr;
    grid-template-areas: "input output";
    width: 55vw;
    height: 60vh;
    background-color: var(--White);
    border-radius: 10px;
    padding: 2%;
    gap:25px;
}

@media all and (max-width:768px){
    .main{

        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2,1fr);
        grid-template-areas: "input"
        "output";
        height: 90vh;
        width: 50vw;
    }
    .input-section,.output-section{
        width: 100%;
        height: 100%;
    }
    body{
        gap:0px;
    }
    
}

    refer my code here

    Happy Coding!

  • Mikhil Desai•600
    @mike15395

    Congratulations @elsayedelbauomy on completing this challenge! Your solutions looks very close to the design and functionality also working fine.

    Here are few improvements from my side:

    1. Use Rubik font as suggested in style.guide.md file, so that your solution is pixel perfect.
    2. You can use following code to incorporate DRY principle,
    function displayCards(activities, updatedTimeFrame) {
  let selectedTimeFrame;
  if (!updatedTimeFrame) {
    selectedTimeFrame = "daily";
  } else {
    selectedTimeFrame = updatedTimeFrame;
  }

  let cards = activities.map(
    (
      item
    ) => `<div class=${item.title} style="background-color:var(--${item.title})">
      <div class="card-background-image" style="background-color:var(--${item.title})">
        <img src="./images/icon-${item.title}.svg" alt="icon-work">
      </div>
      <div class="card-time-container">
        <div class="card-title-container">
          <span class="title">${item.title}</span><span class="dots">...</span></div>
        <div class="card-time-container">
          <div class="card-time">${item.timeframes[selectedTimeFrame].current}hrs</div>
          <div class="last-time">Last week-${item.timeframes[selectedTimeFrame].previous}hrs</div>
        </div>
      </div>
    </div>`
  );

  document.querySelector(".main-container").innerHTML += cards.join("");
}

    here i have not hardcoded each card as you did, instead i used generic code to achieve this.

    Rest everything is good and i learned a lot from your code too. Happy coding!

    Marked as helpful
  • Chame "Guigui-chan"•290
    @Guilherme-Porto-Silva
    What are you most proud of, and what would you do differently next time?

    For I re-created the basic concept of a form sumition had in my mind, I felt like I was doing something usefull, equal to what I had found to be "magic" before and, of course, updated!

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

    The two sections have diferent shapes. On desktop, only. That was surprising and pattern breaking! Confortzone-kun doesn't like that sort of stuff °^°!

    As usuall, I used ids to overcome it, by iding each section and setting the non-maching styles trough them. Sure it is easyer to understand than setting the style in DOM itself, but I would still like to learn a thirth way to do it that is better than both, since I literally set two ids to control a single slight diference.

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

    I am extreamely new to forms and, as has our friend said in the suggested by the learningpath article, they are hard! Any little tip is winning.

    Stay updated using JavaScript!

    #pure-css
    1
    Mikhil Desai•600
    @mike15395

    congratulations @Guilherme-Porto-Silva on completing this challenge! You need to improve a lot by making following changes: 1.Use email regex for checking valid email, you can check following function, function validateEmail(email) { const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; return pattern.test(email); }

    the above function return a boolean value, based on which you can naviagte to success message or not.

    This is the major change in your code and rest are UI changes just look at design more carefully.

    Happy Coding!

  • Mikhil Desai•600
    @mike15395

    Congratulations @AmineTamar on completing the challenge! Your solution looks perfect, but i can't review your code, since it shows 404 not found!

  • P
    juliusalberto•220
    @juliusalberto
    What are you most proud of, and what would you do differently next time?

    I was most proud of creating a page that is responsive and looks good!

    I also learnt how to hide elements in HTML and css. We can do two things basically:

    1. Moving the element past the container and setting the container overflow to be hidden. This way, when we need the element, we can "drag" it from the hidden part
    2. Set opacity and visibility to zero.
    What challenges did you encounter, and how did you overcome them?

    Eh, creating the event was challenging but doable. The hardest part is changing the shape for the popup (the desktop and mobile overlay are different from each other).

    Article Preview Component

    1
    Mikhil Desai•600
    @mike15395

    @juliusalberto congratulations on completing the challenge!

    You are very close to the design, i have noticed few bugs and mistakes which i would like to highlight to further improve your solution.

    1. Image border radius

    In your style.css file line no 26

    .card .header-img {
  border-radius: 10px 10px 0 0;
}

    should be like this border-radius:10px 0px 0px 10px

    border radius is always in clockwise direction starting from left-top right-top right-bottom left-bottom.

    2.Bug in mobile view When moving from desktop to mobile view at 768px breakpoint, the footer share icons appear for fraction of second then dissappear(without clicking share icon). May be this is happening because of transition css property, I am not sure but can figure it out.

    Rest everything is good and well written! Good Efforts:) Keep Growing:) Happy Coding:)

  • Arnaud Lahaut•200
    @Arnotts33
    What are you most proud of, and what would you do differently next time?

    I am just proud I did stick with this challenge and finished it. It was quite a hard one for my nerves! :D

    A lot of research to finally get something that works, though not perfect yet.

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

    Main challenges:

    • Section numbers.

    • Having the hero img change with responsiveness and having them to get the good size ratio.

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

    Well, still a lot to learn and practice on responsiveness but I am getting there. Any tool, tricks or ideas / sources to get better in there are welcome!

    Meeting Landing Page

    1
    Mikhil Desai•600
    @mike15395

    @Arnotts33 Congratulations on completing this challenge!

    To be honest i have also completed this challenge but my solution is also not perfect, but still i would like to help you with some points that i understood.

    1. First section: hero image is of tablet but displayed on desktop screen. You can easily handle this by writing following code: HTML

     <header>
      <div class="logo">
        <img src="./assets/logo.svg" alt="logo" class="logo-image">
      </div>
      <div class="header-section">


        <div class="image-left-container">
          <img src="./assets/desktop/image-hero-left.png" alt="image-hero-left" class="image-hero-left-desktop">
         
        </div>
        <img src="./assets/tablet/image-hero.png" alt="image-hero-tablet" class="image-hero-tablet">
        <div class="header-text">
          <div class="main-header-text">Group Chat for Everyone</div>
        
          <p class="header-paragraph">Meet makes it easy to connect with others face-to-face virtually and collaborate across any device.</p>
          <div class="header-buttons">
            <button class="header-download">Download <span>v1.3</span></button>
            <button class="header-what">What is it?</button>
          </div>
        </div>
        <img src="./assets/desktop/image-hero-right.png" alt="image-hero-right" class="image-hero-right-desktop">
      
      </div>

    CSS

    .image-hero-tablet{
    display: none;
}
@media all and (max-width:820px) {
.header-section{
        display: grid;
        grid-template-columns: repeat(1,auto);
        grid-template-rows: auto auto-fill;
        grid-template-areas: 
        "hero-image"
        "header-text";
           
    }
    .image-hero-left-desktop,.image-hero-right-desktop{
      display: none;
    }
    
    .image-hero-tablet{
        display: block;
        grid-area: hero-image;
        place-self: center; 
    }
    .header-text{
        grid-area: header-text;
        width: min-content;
        place-self: center; 
          
    }
    .main-header-text{
        font-size: 52px;
    }
  
}

    2.Using css for stlying 01 and 02 numbers It's good that you have written css for stlying numbers as per design but you can directly export image of it from figma file directly and then use it in <img></img>. This will save a lot of time writing css.

    3.code structure: Well written code but can be improved further by deleting unwanted empty files like initial.css in styles folder and updating readme as per template.

    I hope above points will improve your solution further.

    Keep Learning! Happy Coding:)

  • Mikhil Desai•600
    @mike15395

    Congratulations @Mr-sajith for completing the challenge!

    Your solution looks pixel perfect and responsive as well.

    To further improve your solution you can add one more break point for devices like Tablets(900px or 820px). This will make all cards look very clearly without getting streched downside.

    Also please check your README file and update it according to README-template.md.

    Rest your code is well written and maintained.

    Keep Growing! Happy Coding:)

    Marked as helpful