Skip to content
OverviewSolutions
28
Comments
4
matias
@strikes7

All comments

  • edpau•440
    @edpauSubmitted 9 months ago

    Hi All

    From the point of view of accessibility, it is a good practice to hide the input and use button tag for the number circle?

    thank you

    Interactive rating component

    1
    matias•400
    @strikes7Posted 9 months ago

    hi, for this excercide is better to use <input type=radio> with a label due to the need to select only one value, and remove from the view the radiobuttons with css because you can interact with the inputs using the label, the html would look something like:

    <label for="first-value">1</label> <input type="radio" id="first-value" name="my-radio" value="1"> <label for="second-value">2</label> <input type="radio" id="second-value" name="my-radio" value="2">

    note that to use <input type=radio> in html the name need to be the same for all the inputs.

    Marked as helpful
    0
  • Davide•330
    @deedeedevSubmitted 9 months ago

    I'm stuck on these two things:

    1. How do I stretch the background image to full width but not full height like in the design? This is the jsx for the page that contains the FAQAccordion component (full code here):
    <main
  className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-faqLightPink"
  style={{
      backgroundImage: `url(${backgroundImage.src})`,
      backgroundRepeat: "no-repeat",
      backgroundSize: "auto",
  }}
>
  <FAQAccordion />
</main>
    1. Using Tailwind how do I make nice transitions when the answers open and close? I tried adding transition-all duration-300 to the <p> elements that contain the answers but it doesn't work:
    <p className={`mt-6 text-faqGrayishPurple transition-all duration-300 ${activeIndex === idx ? "block" : "hidden"}`}>
  {answer}
</p>

    Edit: I managed to fix both problems. The transitions one was tricky: I ended up animating the max-height property from 0 to element.scrollHeight, instead of trying to transition from "display: none" to "display: block".

    FAQ Accordion using Next.js and Tailwind

    1
    matias•400
    @strikes7Posted 9 months ago

    hi, for the the background problem, you can solve it with background-size: 100% auto, the first value is for the width and the second for the height, the problem lies in that you are using the mobile background image in the desktop version of the page. also you can use other values for the height like rem, %, px to match more closely the design.

    Marked as helpful
    0
  • matias•400
    @strikes7Posted 9 months ago

    the page looks nice. A little advice, it's not necesary put the input inside the label element when you use the for attribute of the label and the div is not necesary because the label element can have text. , so the code would look like :

    <label for="my-input">Text</label> <input id="my-input">

    instead of:

    <label for="my-input"> <input id="my-input"> <div>Text</div> </label>

    it looks cleaner and it's easier to style due to having less elements,. i personaly in a case like the one in the challenge just remove the input from the flow with position: absolute due to it's checked state can be manipulated with the label.

    0
  • matias•400
    @strikes7Posted 10 months ago

    the image doesn't load due to the first "/" in the src in the <img> element, that slash transforms the url from relative ( can work from any place because the server starts looking for the image from the index.html folder ) to absolute ( the server starts looking for the file from the root of the web server ).

    0