Skip to content
OverviewSolutions
23
Comments
74
Boots đŸ˜ē
@adityaphasu

All comments

  • P
    Edâ€ĸ720
    @EdwinSch
    What are you most proud of, and what would you do differently next time?

    Just happy everything worked out as planned in the end. I actually started this project with a very simple POC to test my plan/logic before I started working with the actual designs.

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

    I knew the "plan" section/page was going to be a tough cookie. 5 sets of 3 choices need to be handled, I choose to handle all this input in 1 continues updating state. On top of that the option components are custom styled radio buttons. We probably all know what a pain custom input styling can be...

    I did take some "creative liberty" within the plan page. The summary shows as a direct result of the form submit, and get's updated directly if the user chooses to re-consider any options. I didn't really see the need to make this a separate modal like in the original design. Also user can continue to checkout from the summary directly.

    For questions I had left, I found chatGPT to be pretty helpfull on squashing some bugs and making my logic a bit more compact.

    Coffeeroaster subscription with React

    #react
    1
    Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hey Ed! Nice work! ✨

    There's one suggestion and just a minor one which is that maybe try to use 1200px as the max-width instead of 1300px because most laptop screens start from there and currently on my laptop, there's lots of space due to that especially the plans page which looks a bit odd and appears to be left aligned. It is the categories disappearing which just shifts the form and the options to the left. I tried to simulate the screen sizes in dev tools and it does look cool at 1200px as well if you start the large screen layout at that size

    Marked as helpful
  • Rebecca Padgettâ€ĸ2,100
    @bccpadge
    What are you most proud of, and what would you do differently next time?

    Hey everyone,

    This is my solution to the Project tracking intro component. All feedback is welcome and greatly appreciated.

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

    I would like feedback on the mobile version of my website. I have an iPhone SE and can't scroll past the image to see the section content. I have the transform CSS property on my image.

    section < img{
  transform: translate(10%) scale(1.1);
}

    I am unsure if that is causing the issue and if you have any suggestions, please let me know.

    Thanks, Rebecca

    Responsive Project tracking intro component using HTML, CSS & JS

    #accessibility#bem#lighthouse
    2
    Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hey Rebecca, the reason you can't scroll past is not because of the transform on the image but instead, it's the overflow: hidden; on the body.

    The min-height: 100vh on the body sets the height of the body element to be equal to the viewport height, so it fills the entire screen, and overflow: hidden will hide any content that overflows the boundaries of the body element and in this case its all the content which is coming after the image so you just see the image and can't scroll.

    If you remove the overflow from the body then it's just a partial fix, as that will only make that horizontal scroll bar reappear (which you might be trying to hide initially haha)

    Fix:

    1. Remove the overflow: hidden from the body first.
    2. Now there are 2 possible things you can do:
    • Simply add the overflow: hidden to your section tag. (This project doesn't have any other content that can be clipped by the overflow so it's okay for this specific project)
    • The 2nd approach which I feel is good in the longer run is to encapsulate the img in its own div and then apply the overflow: hidden to this div. (you have to move the styles from section > img to the img tho) like this:
    //the Image container div
div {
  overflow: hidden;                    
}

img {                       // give it a class name if you want to 
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(10%) scale(1.1);
    padding-block: 2rem;
}

    This usually will save you the trouble for any future changes in the styles of other things inside the section.

    and that's it!

    You can go with either solution you like! I just wanted to state that there are multiple ways to solve this problem 😊

    Tip: Try to use the browser dev tools whenever you get stuck styling something and inspect the elements to find the culprit that is causing the issue.

    Hope this helps and happy coding! đŸĨŗ

    Marked as helpful
  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    @Fullpacki @TheRequiem It might be that when you spam click too fast the function handling the cross button is running into race conditions that is competing for access to modify the same data at the same time. I did try to replicate the problem but there wasn't any on my part....or I wasn't fast enough in spamming lol.

  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hello, @OniOdd!

    The issue is arising due to the conflicting images you have put up in the <picture> element and no media attribute being used on it hence the image doesn't switch. The sizes attribute being used doesn't switch images instead it sets the sizes at which the images should be displayed and the widths specified along with the URLs is used by the browser to see if the space is available to fit that width is there then only it will show the image. Since you are already using <picture> you can make do without using sizes or specific widths. The most basic use case of this would be using sizes when you want to control the images using the img tag alone.

    To fix the issues:

    • First of all, decrease the min-width:90em of your media query to something smaller as maybe up to the size of tablet devices (768px) so that the card isn't shown in for mobile view for laptop users as well.

    Some few things to explain before diving into the code snippet:

    • In your current picture element in the source you have used srcset to set both the mobile and desktop images in jpg and webp. This is what I think is the reason why it's causing responsive issues. It's best to separate all the srset URLs to their respective source to avoid responsive issues.
    • If you look closely the image in the screenshot is actually the mobile one and all this might be due to the info I provided earlier. So rewrite the <picture> element to this:
    <picture>
  <source media="(min-width: 768px)" srcset="./images/image-product-desktop.webp" type="image/webp">
  <source media="(min-width: 768px)" srcset="./images/image-product-desktop.jpg" type="image/jpeg">
  <source srcset="./images/image-product-mobile.webp" type="image/webp">
  <source srcset="./images/image-product-mobile.jpg" type="image/jpeg">
  <img class="card__image" src="./images/image-product-mobile.jpg" alt="Image of Gabrielle perfume">
</picture>
    • Since you are using mobile-first workflow, I have updated the src of img so that the initial image is the mobile one and see how I have provided different sources for jpg and webp. The first two sources don't have the media attribute because if the initial image isn't there then these will be displayed and for desktop ones, I have used the media so that they switch when the width is above 768px. (I have done the same for the desktop jpg and webp as well).

    This should hopefully fix the issue you are having, you might have to play around some CSS after this though.

    Not gonna lie this kinda made me scratch my head several times to find the issue first then delete stuff in devtools and add stuff but eventually fixed it with what I wrote above 😭

    If you still get the issue after this then let me know and we can work it out together hahahaha

    Edit: I just checked after typing this out and It seems that you've fixed it....just a change though instead of using max-width in those media attributes keep it the same way you have used media for CSS that is the mobile first workflow that way it wont be confusing (You can refer to the snippet above as it is according to mobile first)

    Marked as helpful
  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hello again! @AbieroAlvin

    To answer your question, to add those quotation marks you can just add them like a text like this:

     <p className="py-4 md:text-3xl text-2xl text-[var(--LightCyan)]">
       "{advice}"
 </p>
    • Basically wrap the {advice} with " "
    • For the advice number, the API also returns an id for them so you would want to modify your code a bit like this:
    try {
      const response = await fetch(url);
      const data = await response.json();
      setAdvice(data.slip);   //here 
    }

    In the try block instead of getting the advice from the slip object we just get the object as it is and then access the advice and id number from it using dot notation like this:

     <p className="py-4 md:text-3xl text-2xl text-[var(--LightCyan)]">
       "{advice.advice}"
 </p>

    and in your your h1 access the id for the advice like this:

      <h1 className="md:text-2xl text-xl text-[var(--NeonGreen)] uppercase">
        Advice  #{advice.id}
   </h1>

    This should work.

    • An alternative way for the above solution would be to make another state (say id and setId) and set the id like this in the try block:
    try {
      const response = await fetch(url);
      const data = await response.json();
      setAdvice(data.slip.advice);
      setId(data.slip.id);    // This line
    }

    and then in h1 like this:

    <h1 className="md:text-2xl text-xl text-[var(--NeonGreen)] uppercase">
        Advice  #{id}
   </h1>

    This should also work but in my opinion, the 1st one is better since you do not have to manage 2 states and just use one to handle the whole object but 2nd is one is also fine as it's more readable I guess hahaha

    Good luck and happy coding!🙌đŸģ

  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hello, @BBualdo!

    • It's a good practice to handle errors when making API requests. To handle errors we can add a .catch() block to handle errors during the fetch like this:
    diceButton.addEventListener('click', () => {
  fetch(API_ADVICE_URL)
    .then(res => res.json())
    .then(data => {
      const id = data.slip.id;
      const advice = data.slip.advice;
      adviceNumber.innerHTML = `Advice #${id}`;
      adviceContent.innerHTML = `"${advice}"`;
    })
    .catch(error => {
      console.error("An error occurred:", error);
    });
});
    • Instead of using innerHTML you can use textContentwhen dealing with plain text content because it makes sure that any potential HTML tags in the data won't be treated as markup so you can rewrite the code like this:
    adviceNumber.textContent = `Advice #${id}`;
adviceContent.textContent = `"${advice}"`;

    A brief summary of what promises and callbacks are:

    • callbacks are functions you give to other functions to be called when something is done.
    • promises are like assurances that something will be done. It can be in one of the 3 states that are pending(means ongoing), resolved (means its done and completed), or rejected(error is there and fail).

    This was just a brief explanation.. give this video a watch by webdev simplified and i hope you will understand better from it!

    Good luck!

    Marked as helpful
  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hello, @adex-hub!

    Nicely done with react!

    To get in that react practice try this challenge too! This challenge will make you want to learn how to work with json data that is pretty common when using react.

    Just a quick suggestion:

    • Instead of using create-react-app which is now deprecated the docs recommend making the react project using Vite and other technologies. Here is the link on how you can started with it!

    Good luck on your react journey and happy coding!🙌đŸģ

  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hello, @KingLyrics!

    Regarding CSS, some few fixes to reduce unnecessary code:

    • Instead of using margin (margin: 100px auto) to center the main .container on desktop screens use flex/grid on body using media query to center the card like this:
    //under the media query
body {
    display: grid;
    min-height: 100vh;
    place-items: center;
}
    • This will center the card in the middle of the page without using margin and the min-height will make sure that it stays in the center even if viewed from landscape modes.
    • After doing this you can remove the margin from the container.

    Now coming on to the removing and refactoring code:

    • There's actually a shorthands for writing top, right, bottom and left paddings/margins instead of writing those separately like in this example:
    padding: 20px 30px 40px 50px
     //top   //right    //bottom  //left

    or if you only want to give (top and bottom) or (left and right) it can be done like this:

    padding: 20px 0;
//top and bottom   // left and right

    Here give the docs a read as there are more shorthand of writing it. (You can do the same for margins as well)

    • We are going to remove all the margin and max-width: 320px; from the .summary as it limits the responsiveness of the .summary instead of this we are going to add the padding to the .summary in general and that way you won't have to add the padding in the media query like this:
    .summary {
    padding: 45px 30px 0px 33px;
    remove the ones below
    /* max-width: 320px; */
    /* margin-left: 20px; */        
    /* margin-right: 20px; */
    /* margin-top: 20px;  */
    • See how I have used the shorthand for the paddings? writing it this way saves writing the individual padding in 3-4 separate lines. After adding the padding here you can remove the paddings from the media-query and the .summary will look good on any device.
    • In the .topdrop div you can actually also remove the margins on .title and .notifications and make use of the gap property offered when flex/grid is used and since the topdrop div is already flexed you can just add the gap property to it and as the name says it adds a gap between the items you can do it like this:
      .topdrop{
    background-color: var(--Lightroyalblue);
    display: flex;
    justify-content: center;
    align-items: center;
     flex-direction: column;
     gap: 20px;        // This here
}
    • After adding gap you can remove all the margin bottoms and tops from the child elements of .topdrop! less code yay!

    Now coming onto the Html part:

    • Instead of using div as a button, use the actual <button> like this:
    <button class="btn">
         Continue
</button>

    Now regarding the semantics:

    • Only use one h1 heading per page which means you can make the summary text a h2 heading instead. Why? because generally the h1 represents the main theme of your page to the search engines and if there are two then it will be confusing.
    • Instead of using a div for the whole container, try using a more semantic tag like <main> which tells the search engines and assistive tech what the main content of the page is. You just gotta remove the div and add the main like this:
    <main class="container"
  //rest of the stuff
</main>

    For responsiveness:

    • Try using rem/em units for font-size rather than px units because px are absolute units and they stay the same while rem or em are relative units and they scale well with the layout. I have used px in this feedback so that it doesn't seem something new and harder to understand and intentionally saved this part for the last so that you can learn it at your own pace.Here you can read a lot more about it in detail.

    and lastly, good job on completing the challenge!!

    Good luck on your future endeavors and happy coding!!🙌đŸģ🙌đŸģ

  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hello, @zetmosoma10!

    • You can make an image a white image by just using a CSS property called filter. So firstly add the logo in the footer and then add a class name to it (I'll name it .footer_logo for this example) and then add this:
    .footer_logo {
         filter: grayscale(1) brightness(20);
}
    • What the above code snippet does is that using the filter property firstly we use grayscale to convert the image to a gray image then using brightness we increase the brightness until it's white.

    Few more suggestions regarding some CSS:

    • As you can see from the screenshot and the live site the hero image stretches out it's because it has height: 100% to it so it's trying to cover all of the space inside the parent container. You can use a more general approach by using a bit of CSS for the global img tag like this:
    img {
     max-width:100%
     height: auto
}
    • This way the image will only take the height it requires and not try to stretch to cover it's parent.
    • After adding this your footer_icons will stretch because they are flexed items and they will try to take the whole space left inside the flexed container,so to fix it just add align-items: baseline to the .footer__text-icon

    Apart from these few fixes, nice solution and nice animations! Nicely done!!

    Keep up the hard work and happy coding!🙌đŸģ

    Marked as helpful
  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hello, @AlexDDevv~

    • The reason why the favicon doesn't work is because you forgot to put a / before the assets in the href xD
    • To fix it just add the / before the assets like this:
    href="./assets/images/favicon-32x32.png"

    Just a quick fix for the images stretching out in mobile view, remove the explicit height from the .section-img div:

    main .section-img {
    height: 300px;         //remove this we don't need it
}
    • Instead you can just add a global style for all the images like this:
    img {
    max-width: 100%;
    height: auto;
    display: block;
}

    This way the image won't stretch and you won't need to explicitly set heights on the divs because while setting heights is okay in this case the images start to stretch to fit the height specified.

    Apart from this small fix, everything looks good! I don't think the navlist would be an issue since there's a transition on it we get that glitched-out thingy when we stimulate the screen sizes in devtools. It should look fine for mobile devices.

    Keep up the hard work and happy coding!🙌đŸģ

  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hello, @Hyoaku!

    Nice solution! Just some fixes regarding CSS:

    • Try using a CSS reset in your projects like this one to remove all the default styles that the browser applies.
    • Currently due to no CSS reset the browser adds a little bit of margin to the body and hence you can see that there's this scrollbar on the page.
    • Use min-height:100vh on the body instead of height:100vh because using height:100vh would cause the content to overflow and might not be fully visible. On the other hand, min-height: 100vh ensures that card will always be at least the height of the viewport, but it can expand if the content inside requires more space this prevents content from being cut off or inaccessible.
    • Instead of giving the p tags width you can just give the <main> tag width: 17rem and remove the width: fit-content from it.
    • I see you have used rem units in most of the properties but not font sizes so try to use rem to set font sizes as well so that they scale well if it's a scalable layout. (this card doesn't scale but its good practice to use rem for font sizes)

    Apart from these few things good job on the challenge with Vue.js! 🙌đŸģ (I also want to try Vue someday haha)

    Keep up the hard work and happy coding!😊

    Marked as helpful
  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hello, @sarahtazyan!

    • Firstly to get that background bluish color like in the design it can be achieved using background-color property on the body like this:
    body{ 
    background-color: hsl(225, 100%, 94%);
}
    • For the box shadow on the button I tried some values in the devtools and this is what I found to be closer to design:
        box-shadow: 0 4px 13px rgb(64 64 242 / 50%);

    Some suggestions to improve the code:

    • Instead of using absolute position to center the card you can use flex properties on the body instead like this:
    body {
     min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
     //rest of the styles
}
    • This will center the card in the middle of the page and you can remove:
    .box-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    from the .box-container.

    Keep up the hard work and good luck!

    Marked as helpful
  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hello, @elkaabahanane

    As you can see from the screenshot the .parent-container is not centered on the page. You can center it on the page by using flex on the body like this:

    body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
    • We use min-height:100vh on the body because flexbox needs height to work upon and this will make sure the content is always in the center and doesn't cut off even if seen from landscape mode on devices or else if we don't specify it the component wouldn't center itself vertically.

    Some suggestions regarding best practices:

    • Instead of using div for .parent-container to represent the whole content on the page try using a tag like <main> which is more semantic and tells the search engines and assistive technologies that the content inside it is the main content of the page like this:
    <main class="parent-container"> 
   //rest of the content
</main>
    • Instead of using px for font size which is an absolute unit try using rem which is a relative unit and scales well with layouts. Give this a read as it will help you to understand a lot better!

    and lastly, give yourself a pat on the back on completing the challenge! Good job!!

    Keep up the hard work and happy coding!😊

    Marked as helpful
  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hello, @AslamtoIbrahim!

    Instead of using the background image with the linear gradient, you can just uncomment the img tag in your html.

    After this add an empty div inside the sec2 div and give it a class name overlay or anything you like then add the following CSS:

    .overlay  {
    background: hsl(277, 64%, 61%);
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    mix-blend-mode: multiply;
}
    • After adding the overlay, add position: relative to the .sec2 div.
    • This will make an overlay and add that purple touch to the image.

    Since we uncommented the image and now are using the image one for desktop and one for mobile we can make use of the picture element to make it switch at max-width:768px like this:

    <picture>
<source srcset="images/image-header-mobile.jpg" media="(max-width: 768px)" >
<img src="images/image-header-desktop.jpg" alt="" >
</picture>
    • Here inside the <picture> element we use source to set the image we want to change at a specific screen size.
    • srcset attribute is used to set the URL path whereas media is used as a media query so as to when the image should change (in your case I'm using max-width since you have used desktop first workflow)
    • the img tag is usually used to set up the initial image and work as a normal img tag.
    • So after using this initially your image will be the desktop one but as soon the width hits 780px the image will switch from desktop to mobile (the media query we specify in source according to that)

    You can also remove all the CSS from the .sec2 div which are background related and now won't be needed.

    Good luck!

    Marked as helpful
  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hello, @NotYoel!

    One quick suggestion to remove uneccesarry code:

    • You can remove height: 500px; from the .main-container as the content inside the container is large enough, it will cause the container to expand to accommodate the content's natural height.

    Some more in general suggestions:

    • Instead of using px for font size which is an absolute unit try using rem which is a relative unit and scales well with layouts. (In your case font-size:19px would turn roughly into font-size: 1.1875rem). Give this a read if you want to learn more about it.
    • Instead of using div for .main-container to represent the whole content on the page try using a more semantic tag like <main> which tells the search engines and assistive technologies that the content inside it is the main content of the page.

    Apart from these 3 things, the solution is spot on! Nice flexbox work!

    Keep up the hard work and happy coding!đŸĨ‚

    Marked as helpful
  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hello, @Ralpmike!

    To answer your question, You can make an overlay which will be an empty div and when the .box div is hovered we can change it opacity to 0.5.

    Here's how you can do it:

    • First make an empty div inside the .box div which contains the nft image and say give it a class of overlay like this:
    <div class="box relative>
     <img> 
    <div class="overlay"> </div>
    <img>
</div>
    • Then after that we are going to make it absolute and make it cover the whole of it's parent div (which is .box) using the CSS like this:
    .overlay{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    opacity: 0
    background-color: cyan; 
    transition: .3s ease-in-out;
}
    • We set its opacity to 0 until the .box gets hovered over.
    • After adding the CSS we are going to target the .box div and use the :hover pseudo-class on it and then target .overlay and set its opacity to 0.5 like this:
    .box:hover .overlay {
  opacity: 0.5;
}
    • In the code snippet above for the .overlay CSS I have added transition property too so that the hover is smooth!

    After doing all the above steps you will get a blue color on top of the image when hovered :D

    Good luck

    Marked as helpful
  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hello, @AbieroAlvin!

    Since you are using TailwindCSS the one way you can apply background images with gradients is to actually add them to the config file inside backgroundImage like this:

     backgroundImage: {
        "pattern-mobile-gradient":
          'url("../src/images/bg-pattern-intro-mobile.svg"), linear-gradient(to bottom, hsl(13, 100%, 72%) , hsl(353, 100%, 62%))',
        "pattern-desktop-gradient":
          'url("../src/images/bg-pattern-intro-desktop.svg"), linear-gradient(to right, hsl(13, 100%, 72%) , hsl(353, 100%, 62%))',
        "pattern-circles-gradient":
          'url("../src/images/bg-pattern-circles.svg"), linear-gradient(to bottom, hsl(237, 17%, 21%) , hsl(237, 23%, 32%))',
      },
    • It's basically using a combination of image and gradient and then using it as a background (bg-[your name for the custom background set in config])
    • Though after using this you might want to manage the sizes, position of the gradient and image separately in your CSS file instead using , in the properties.

    I think you can manage sizes and position using tailwind CSS too but I think it would lead to quite unreadble code in the jsx files hence I said to use CSS file to manage those.

    Here is the link to my solution. I have also used tailwindcss so you can see how I have done it.

    Good luck and happy coding!🙌đŸģ

    Marked as helpful
  • Boots đŸ˜ēâ€ĸ1,610
    @adityaphasu

    Hi @semperprimum!

    First of all nice solution! Identical to the design!

    Passing props down from Grid to Card would've been a hassle so I think managing the state for this challenge using the ContextAPI is good! and yours look good to me.

    I just have a few suggestions regarding those ternary ladders inside the Card component. While it does work it, it kind of makes it complex and less readable. One way you can do it efficiently is by using some helper functions and adding the logic for it there. Here's how I would do it:

    • For the Icons instead of the ladder you can do something like an object which has keys and values as the Icon components like this:
    const icons = {
    Work: <IconWork />,
    Play: <IconPlay />,
    Study: <IconStudy />,
    Exercise: <IconExercise />,
    Social: <IconSocial />,
    Self Care: <IconSelfCare />
  };

    and then in the return you can just do this:

    <Banner className={`bg-accent-${item.title.toLowerCase().split(' ').join('-')}`}>
        {icons[item.title]}
 </Banner>

    this way those 13 lines of code will just be 1! Since the JSON file has titles that are capitalized that's why in the icons object you must have to use capitalized words as keys so that they match and the icons get rendered. It will work like this -> The title from JSON matches the key from the icons object and the corresponding icon associated with the key will render out. This way you won't have to check for the titles using the ternary operator.

    • For the time ladders you can make a helper function like timeFrames which takes in the type state as a param from context and then return current and previous. (basically extracting that type ternary ladder from the time and last p element in the card element since you can see they are repeated) like this:
     const timeframes = (type) => {
    const current = item.timeframes[type].current;
    const previous = item.timeframes[type].previous;
    return { current, previous };
  };

    then destructure the object returned by the function while using type from the context:

    const { current, previous } = timeframes(type);
    • Now current and previous will hold the values for whatever type is there. So now you can use the current like this:
     <Time className="fs-600 fw-regular">
            {current} hrs
 </Time>

    and for the previous hours you can use it like this:

    <p className="fw-semi-bold text-primary-200">
{type === 'daily' ? 'Yesterday' : type === 'weekly' ? 'Last Week' : 'Last Month'} - {previous} hrs
</p>
    • You can probably cut down the text ternary ladder too but at this point I feel like this is enough hahahha!
    • If you wanna still do it then you can do it the same way as we did for icons that is to make an object and then give key value pairs like daily: 'Yesterday' and so on and then the paragraph element can be rewritten like this:
    <p className="fw-semi-bold text-primary-200">
 {nameofobject[type]} - {previous} hrs
</p>

    I don't know if my explanation is okay because I'm very bad at giving names to functions but hoping you at least get the idea of what I'm trying to say haha

    Keep up the hard work!

    Marked as helpful