All comments

• 

  Guillermo Eguizabal•150

  @cgeguizabalSubmitted 14 days ago

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

  Please I need help this is the second time that happened to me, the background images are not visible on the GitHub page but I have written the URL correctly(I think...). Please help I don't know how to fix it. it's this one basically. Neither of them work.

  background-image: url(/assets/img/bg-pattern-top.svg), url(/assets/img/bg-pattern-bottom.svg);

  background-image: url(assets/img/bg-pattern-top.svg), url(assets/img/bg-pattern-bottom.svg);

  

  ProfileCard-TenthChallenge-FlexBox-CSS

  1

  40
  

  P

  markus•2,250

  @markuslewinPosted 13 days ago

  If the path is relative to the root, you have to include the Profile-Card part as well. If the path is relative to the current directory, it's relative to the directory of the CSS file.

  Both of these should work:

  body {
    background-image: url(/Profile-Card/assets/img/bg-pattern-top.svg);
    background-image: url(../img/bg-pattern-top.svg);
  }
  

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Sergiy•1,070

  @MrSeagerSubmitted 23 days ago

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

  I don't quite get how spring works

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

  const transitions = useTransition(adv, { 
    from: { opacity: 0, transform: 'translateY(-220px)' }, 
    enter: { opacity: 1, transform: 'translateY(0)' }, 
    leave: { opacity: 0, transform: 'translateY(220px)' }, 
    config: { tension: 220, friction: 24 }, 
    exitBeforeEnter: true, 
  });
  

  animation on leave should go down with this transform: 'translateY(220px)' but it's just ignored

  

  React, Spring, Bootstrap, TypeScript

  1

  40
  

  P

  markus•2,250

  @markuslewinPosted 22 days ago

  Hi!

  The translateY(0) of enter needs a unit:

  const transitions = useTransition(adv, {
    from: { opacity: 0, transform: "translateY(-220px)" },
    enter: { opacity: 1, transform: "translateY(0px)" },
    leave: { opacity: 0, transform: "translateY(220px)" },
    config: { tension: 220, friction: 24 },
    exitBeforeEnter: true,
  });
  

  It seems like you can use x and y to avoid these types of interpolation quirks:

  const transitions = useTransition(adv, {
    from: { opacity: 0, y: -220 },
    enter: { opacity: 1, y: 0 },
    leave: { opacity: 0, y: 220 },
    config: { tension: 220, friction: 24 },
    exitBeforeEnter: true,
  });
  

  https://github.com/pmndrs/react-spring/issues/2143

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  Josh Javier•830

  @joshjavierSubmitted 23 days ago

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

  My biggest learning for this project would be using Storybook to design the components in isolation. It helped me put more thought into building components: when to make one, how to handle data fetching, etc. I also learned about the distinction between presentational and container components, which seems to be the favored design pattern for Storybook, and some tradeoffs that come with choosing such a pattern.

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

  I'm having a weird error in StrictMode: when removing an item from the cart, adding it immediately after would cause the same item to get added in the cart twice. This causes a warning that two children have the same key.

  I spent some time debugging this issue but I can't seem to find the cause. Fortunately, this error doesn't show up in production, but any insights are most welcome!

  

  Product list with cart using React+TS, Framer Motion, and Storybook

  2

  51
  

  P

  markus•2,250

  @markuslewinPosted 22 days ago

  Hey!

  The updater function of set* calls has to be pure, but the updater functions of the increment and decrement functions of AddToCart indirectly have side effects via callback, since the callback modifies the cart. I think the solution in this case is to call the callback outside of the updater:

  const increment = () => {
    const value = quantity + 1;
    setQuantity(value);
    if (callback) callback(value);
  };
  

  Link to the docs: My initializer or updater function runs twice.

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Isaias•80

  @Isa696Submitted 26 days ago

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

  Using better html semantic, and making less unnecesary classes.

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

  making separates divs for responsive. and fonts sizes and weights still gives me some problems

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

  The height its still goes out of windows, even when using 100dvh on body as min-height. so if you can comment how to fix it it ll help me a lot :D

  

  Responsive using flexbox media querys and clamp

  1

  30
  

  P

  markus•2,250

  @markuslewinPosted 25 days ago

  Hi!

  The margin of the header collapses with the margin of the body. In this case, the result is as if you'd have set the margin on the body instead, pushing it outside of the viewport.

  Using padding for the top space should work better!

  Marked as helpful

  1
• 

  TechWithShiv001•50

  @TechWithShiv001Submitted 28 days ago

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

  I'm proud that I have completed the desktop design using Tailwind CSS. It took me 2-3 days just to complete this project not that this project is very difficult and all but, due to procrastination since this was the first time I was using tailwind and got stuck in most of the steps especially when it comes to making it responsive. I have only created the desktop design since it was difficult for me to use responsive feature using tailwind.

  The thing I would do differently next time would be using tailwind for responsive site. I'll try to look into some responsive projects out there which uses tailwind css to learn responsiveness using tailwind

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

  I got some challenges which are:

  • How to use custom tailwind-css : In this I just searched it and got the solution to declare the variable tailwind.config.js if you're using any framework or you can directly use it in HTML by enclosing it in script tag.

  Well, there were many how's while creating this project due to my first time using tailwind, but it was merely CSS based like how I should write color: red in tailwind and stuff like these.

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

  I'm seeking help in making the project responsive using tailwind CSS.

  I know how to use media query but there are a lot of problem on responsiveness I faced in tailwind. I have used lg-flex-row on div which contain both the left and right cards in order to make them show like mobile design, but it doesn't have any effect, and I have tried a couple of more things.

  If you guys could help that would be really wonderful and if you have any links or other things which could help that would also be great.

  Waiting for your valuable feedback and suggestions.

  Thanks!!!

  

  Desktop Landing Page using Tailwind CSS, HTML, CSS, Google Fonts......

  1

  30
  

  P

  markus•2,250

  @markuslewinPosted 28 days ago

  Hi!

  The initial value of flex-direction is row, but you want it to be column for small screens, and row for larger screens:

  <div class="flex flex-col lg:flex-row ...">
    <div class="card1 ..."></div>
    <div class="card2 ..."></div>
  </div>
  

  With Tailwind, you generally want to take a mobile-first approach. Start by stacking blocks according to the mobile design, and use grid or flex to position them according to the desktop design. For example, grid lg:grid-cols-2 creates a 1-column layout on mobile, which then turns into a 2-column layout on desktop.

  0
• 

  Abdel Arocha•110

  @arocha2Submitted about 1 month ago

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

  I'm proud of the time it took me to do it, it's getting less and less.

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

  I would like to have help why when you make the component change, the image changes, it has a kind of error and it renders the star icon before rendering the image, which is what it is and I don't know why.

  

  raiting frontend

  1

  21
  

  P

  markus•2,250

  @markuslewinPosted about 1 month ago

  Hi!

  It's due to how React chooses to update the document.

  function Rating() {
    return view ? (
      <section>
        <div>
          <img src={starIcon} />
        </div>
      </section>
    ) : (
      <section>
        <div>
          <img src={imgThank} />
        </div>
      </section>
    );
  }
  

  Since both code paths render the <img /> at the same position, React chooses to only update the src of the <img />, instead of removing the old image and adding a new image. When only the src is updated, browsers can choose to hold the old image while waiting for the new image to load.

  You can force React to create a new element by using the key prop. When the value of the key prop changes, the old element is removed, and a new element is created:

  <img key="star" src={starIcon} />
  <img key="thank" src={imgThank} />
  

  This is explained in the docs here:

  • Same component at the same position preserves state
  • Resetting state with a key

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  ErazorWhite•80

  @ErazorWhiteSubmitted about 1 month ago

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

  Pay special attention to prefixes and suffixes in text input fields. You can easily customize their presence and/or position with react props

  Thanks to the NumericFormat input mask, which works in conjunction with rhf + yup validation, you can always make sure that the user enters only the data you expect to receive.

  For styling, emphasis is placed on pseudo-classes and pseudo-elements, which makes the code reusable and leaves it independent of the components of the upper hierarchy. Tools such as css attr() and styled-props are also used.

  This time I used TS instead of JS.

  A complex result is achieved, but the realization remains as simple as possible.

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

  The most difficult thing was to link react-hook-form with input mask NumericFormat and styled-component. I managed to achieve the desired result using Controller from RHF.

  Useful resources in this challenge were:

  • Controller from rhf: url
  • Prop control, key to controller operation: url
  • Documentation on NumericFormat customization pass-throughs: url
  • Throwing props to styled url

  At some point, I made it so complicated that I realized I was inventing my own DSL. Later on, I removed the object of customizing form fields and made everything as simple as possible.

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

  In the beginning, I tried to set up linaria for a long time, but it never worked. babel didn't work well at the build stage. So I gave up this idea and went to runtime CSS in the form of styled-components.

  

  [React, TS, RHF + Yup, Vite, styled] Mortgage Repayment Calculator

  1

  20
  

  P

  markus•2,250

  @markuslewinPosted about 1 month ago

  Looking good! I'm curious about the errors you got while setting up Linaria. It seems to be working for me when I:

  1. Install the packages:

     npm i @linaria/core @linaria/react @wyw-in-js/babel-preset
     npm i -D @wyw-in-js/vite
     

  2. Update the Vite config:

     // vite.config.ts
     import { defineConfig } from "vite";
     import react from "@vitejs/plugin-react";
     import wyw from "@wyw-in-js/vite";
     
     export default defineConfig({
       base: "/mortgage-repayment-calculator/",
       plugins: [react(), wyw()],
     });
     

  Usage:

  import { css } from "@linaria/core";
  
  const myLinariaClass = css`
    background-color: red;
  `;
  
  export const CalculateButton = () => {
    return {/* ... */};
  };
  

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Fernando A. Malfavón•370

  @WlfernandoSubmitted about 2 months ago

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

  I made the select from scratch, it is not perfect but it emulate close the real one (I hope so), it just have some details that I would continue working in new projects or continue in this one. I implemented the transitions over the flags between routes. I feel I did good the theme color with the variables css and detect the os preference color.

  Edited: I added a Debounce class with typescript and I learned a lot implementing the types using constraints and generics!

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

  It was interesting to experiment with react-router avoiding to catch the data fetched from the api and when to revalidate it.

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

  I got problems with some flags to transition correctly. I think it could be related to the special symbols on the names but I didn't see the difference when I activated the anchor to transition. The file is Card.tsx

  

  React, React-Router, vanilla css, typescript REST Countries

  1

  21
  

  P

  markus•2,250

  @markuslewinPosted about 2 months ago

  Cool, I didn't know React Router had support for view transitions!

  I think you need to have to match the location.pathname of the target page, so you want to encode the special symbols as well:

  // const to = `/${official.replace(/\s/g, '%20')}`
  const to = `/${encodeURIComponent(official)}`;
  

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  abedzeidan•340

  @Abed001Submitted 2 months ago

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

  filtering is hard and i need to be more comfortable with it

  

  Job-listings-with-filtering

  1

  30
  

  P

  markus•2,250

  @markuslewinPosted 2 months ago

  The trick is to realize you actually only need state for appliedFilters. The rest of the UI can be derived from data and appliedFilters:

  import jobs from "./data.json";
  
  function App() {
    const [appliedFilters, setAppliedFilters] = useState([]);
  
    const filteredJobs = jobs.filter((job) =>
      filters.every((filter) =>
        [job.role, job.level, ...job.languages, ...job.tools].includes(filter)
      )
    );
  
    return <></>
  }
  

  Now, you only need to add/remove filters, and filteredJobs will be recalculated every time appliedFilters updates!

  0
• 

  MikDra1•6,980

  @MikDra1Submitted 2 months ago

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

  💻 Hello, Frontend Mentor Community,

  This is my solution for the IP Address Tracker.

  • Scored 95,5% on Google Pagespeed Insights! 🚀
  • Solution with 100% W3C validation accuracy 🌟
  • Custom-built CSS animations for a smooth user experience 💫
  • You can check both: IP Adress and Domain 🖥
  • Custom validation 🛫
  • Custom loading state when fetching data from an API 🌴

  🛠️ Built with:

  1. HTML ✨
  2. CSS 🎨
  3. JavaScript 🧾
  4. React ⚛️
  5. Vite.js 💡

  • Fully responsive design crafted with a mobile-first approach 📲

  • Enjoyed every moment coding this! 😎

  • Feedback is always welcome—let’s grow together! 🌱

  • Completed 10 out of 13 Intermediate Challenges so far—keeping up the momentum! 🔥

  • 👨‍💻 Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.

  • As I am starting my journey with React I'm really looking forward to hearing your thoughts and suggestions! 💡

  • I would be grateful if someone could tell me how to add a keyevent on "Enter" to push the prompt to API. When I wanted to do this I've got so many requests that API crashed. I am really curious how to do this so if you know please let me know 😀

  

  IP Address Tracker built with HTML | CSS | REACT - MikDra1

  1

  72
  

  P

  markus•2,250

  @markuslewinPosted 2 months ago

  Hi!

  Wrapping the inputs in a form is a good approach, because it can be progressively enhanced when you're using a server-side framework (like Next and Remix):

  <form
    className={styles.form}
    onSubmit={(e) => {
      e.preventDefault();
      handleFetch();
    }}
  >
    <input
      type="text"
      value={ipInput}
      onChange={(e) => setIpInput(e.target.value)}
      placeholder="Search for any IP address or domain"
    />
    <button type="submit">
      <img src="./images/icon-arrow.svg" alt="Submit" />
    </button>
  </form>
  

  You could also listen for key presses on the input:

  <input
    type="text"
    value={ipInput}
    onChange={(e) => setIpInput(e.target.value)}
    onKeyDown={(e) => {
      if (e.key === "Enter") {
        handleFetch();
      }
    }}
    placeholder="Search for any IP address or domain"
  />
  

  Marked as helpful

  0

  This comment has received 4 repliesShow
• 

  abdullahmd2•90

  @abdullahmd2Submitted 2 months ago

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

  Facing some issue when adding the Tailwind CSS breakpoint classes (sm, md, lg, etc.) for making responsive layout. I don't know why the classes are not working and was not able to make a responsive layout. But when I used plain CSS media queries for responsive layout it was working fine (you can find the media queries in output.css file in my code, it is commented for now).

  If you can help please provide a solution. I have added a comment in the code. I am using Tailwind CLI. Also I was unable to horizontally center the Divider Pattern SVG, need help in that also.

  

  Advice Generator App using Vanilla JavaScript and Tailwind CSS

  1

  30
  

  P

  markus•2,250

  @markuslewinPosted 2 months ago

  Hi!

  The setup looks good to me. Did you run the Tailwind command and commit the output file after you updated the HTML? output.css seems to be out of sync with index.html in the GitHub repo.

  I ran npx tailwindcss -i ./styles.css -o ./output.css --watch and everything just worked; mx-auto centered the image, and the breakpoints in the comment worked aswell!

  0

  This comment has received 1 replyShow
• 

  Tina Wang•140

  @tina801005Submitted 2 months ago

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

  Why is my responsive layout failing? I've redone it many times and still have problems. I'm definitely doing something wrong, but I can't find the problem.

  

  Profile card solution

  1

  30
  

  P

  markus•2,250

  @markuslewinPosted 2 months ago

  Hey!

  By default, the grid column that contains the card is of size auto. That means it won't shrink below the width of the card's minimum size. The image container inside the card has a width: 21rem, and so the column will never shrink below that. You probably want the image to grow/shrink with the size of the card, so remove the width: 21rem from .cardTop.

  Two approaches for centering the card in a grid layout:

  /* Define the size of the column and center that column */
  body {
    display: grid;
    grid-template-columns: minmax(auto, 33rem);
    place-content: center;
  }
  

  or

  /* Define the size of the item inside the column and center that item */
  body {
    display: grid;
    place-items: center;
  }
  
  .container {
    max-width: 33rem;
    width: 100%;
  }
  

  Marked as helpful

  1