Skip to content
OverviewSolutions
6
Comments
53

J.D. Browne

@PeshwariNaanCurrently TIrana, Albania870 points

I spend my whole day, practically every day, experimenting with React, CSS, and JavaScript; dabbling with Python and MERN stack apps. All this in pursuit of building a future in Web Development where I can use my creativity and knowledge to build the next generation of apps.

I’m currently learning...

React, Typescript, Python, and everything to do with full stack applications.

Latest solutions

Latest comments

  • J.D. Browne•870
    @PeshwariNaanPosted about 2 years ago

    Just to give you a heads up - All the product images do not display on the general pages or the individual product pages for your live site. Everything else looks good but this issue shows up right away.

    -Hope you get it fixed

    0
  • J.D. Browne•870
    @PeshwariNaanPosted about 2 years ago

    Hello and good job on completing the challenge.

    Here are a few tips that might help you with your code.

    • Be careful not to skip over heading levels ion your css. This means that you don't want to start with an <h2> if you don't have an <h1> already in your code. Start with the <h1> then move to <h2> and the <h3> etc. So your card title needs to be changed to an h1 to get rid of the error.

    • Make sure to wrap your root div with a <main> tag for accessibility. You can do this in the index.html file like below and it will get rid of your error.

    <main>
<div id="root"></div>
</main>

    • Make sure to include an alt prop on your image wrapper component. The alt should have a description of the image. In your case this would be something like alt="QR code that directs user to frontend mentor site".

    • The styled components can take a little while to get used to but don't give up. It is a very powerful tool. Be careful that you don't have styling that overlaps other styling in different components. Always try to keep things as simple as you can.

    • Start working with em or rem units in your styling rather than px units. This helps people with vision problems to adjust their devices. You can read about it HERE.

    I hope this helps - Happy coding 😁

    Marked as helpful
    0
  • J.D. Browne•870
    @PeshwariNaanPosted about 2 years ago

    Hello Ibrahim and nice job on completing the challenge.

    The link to your code gives a 404 so I can't see it to help with your React code.

    However, I can see that you are getting the landmark warnings above. If you want to get rid of those, you can simply wrap your root div located in your index.html file with a <main> tag like this:

    <main>
      <div id="root"></div>
</main>

    This will clear the errors.

    Hope this helps and happy coding 😁

    0
  • J.D. Browne•870
    @PeshwariNaanPosted about 2 years ago

    Hello. Nice work on completing the challenge.

    Here are a couple tips that might help you with your code:

    • Try not to use useEffect to control things like media queries. It tends to over complicate simple applications and you can run into trouble. The best practice is always keep things as simple as possible. You can see that you run into problems when the screen size gets between 730px and 500px and your buttons get pushed out of your cards. With css media queries its easier to adjust things like the margin/padding between the button and text in the card and you have better control of the styling.

    • As with useEffect, only have useState when necessary. I know you are learning and it's good to explore the different hooks in React, but as you start to develop more complex apps in the future try to minimize stateful components.

    • Wrap your root div in your index.html file with <main> for accessibility and it will clear up your landmark warnings you are seeing.

    I hope this is helpful - Good luck and happy coding 😃

    0
  • J.D. Browne•870
    @PeshwariNaanPosted about 2 years ago

    Hello Rizky, nice work on completing the challenge.

    Here are a couple suggestions that might help make the app a little better.

    • You don't want the user to create an empty todo (no text). Make sure to add a check in the submit handler that looks for an empty field like this:
    if (task === '') return;

    • In the input component, don't give the user the option to mark the todo as completed. If a task is already completed then no one is going to put it in a list of things to do. In my app I used the circle on the side to clear the input field. You can see my solution HERE if you want to check it out.

    • Something is going on when a task is entered and the entire page is reloading which should not happen when using React. Only the components that have changed should re-render. If you are using React dev tools, you should be able to track down the problem. This article is pretty good for learning how to use the DEV-TOOLS

    • The 'clear completed' button will clear all the todos in your app, not just the completed ones. Wherever it is that you are managing your state, you could add a filter function. Maybe something like:

        //Clear out all finished todos
  const clearCompleted = () => {
    const updatedTodoList = state.todoItems.filter((todo) => !todo.isDone);
    return updatedTodoList;
  };

    I hope this is helpful - Happy coding 😁

    Marked as helpful
    1
  • J.D. Browne•870
    @PeshwariNaanPosted about 2 years ago

    Hello Trista, nice work on completing the challenge.

    Here are a couple things that might help:

    • For these todo lists it is always good to let the user store their list in the local storage so they can come back to what they put down. Implementing this is pretty easy. My code is a little different from yours as I am using a reducer in a context to manage the state but you can still see how I did it HERE

    • Something is wrong with the responsiveness in the mobile view. After I add more that 8 todos, the todo list covers up the bottom nav-bar div and you cannot access the filters once this happens making the app useless at this point.

    • (optional)Try adding some DnD to the list. Drag and drop is a really useful thing to learn. It can be a little confusing at first but check my solution to see how I did it. Once you understand it, it's not bad.

    I hope this helps - Happy coding

    Marked as helpful
    0
View more comments