Skip to content
OverviewSolutions
20
Comments
34
P
Karthik suryadevara
@karthik2265

All comments

  • Khent Alba•440
    @Lemon1903Submitted over 1 year ago

    Good day Frontend Mentor Community! Here is my solution to the Todo App challenge.

    I have made this app many times which made it easier to accomplish the logic of this app. This time, I used context for state management and custom hooks for dark mode and local storage. For the color, I used custom properties and configured tailwind to match the design. Then I added reordering and animation feature using framer-motion for this challenge.

    Added features:

    • added animation to todo items when being added or removed
    • added drag effect when reordering items
    • animation for empty message base on the number of todo items

    Happy to hear any feedback or advice to you all! Have a nice day!

    Todo-App build with React, Tailwind CSS, and Framer-Motion

    1
    Karthik suryadevara•825
    @karthik2265Posted over 1 year ago

    Hey khent,

    The app works well. The code also seems well organised and structured, good use of custom hooks and context for state management. Framer motion seems to be doing a good job for animations.

    For some reason the light and dark mode functionality doesn't seem to be working in brave browser.

    1
  • Joanna Skrzypczak•530
    @joaskrSubmitted almost 2 years ago

    #The challenge is still in progress and will be improved

    I added the solution to FE mentor to check the accessibility report. It's definitely not done yet and will be improved.

    There are still some errors in responsiveness and I plan to do a lot of code refactor because it's very messy. SCSS code also needs some fixing - I started with desktop-first approach and in the middle of development switched to mobile-first approach and that resulted in code duplicates and in big mess.

    So to sum it up - I know that it's broken but I'll fix it some day :)

    Rest Api Countries App - React, SCSS, Framer-Motion, Axios

    1
    Karthik suryadevara•825
    @karthik2265Posted almost 2 years ago

    Hey joana,

    The solution looks good and the responsiveness also works well.

    few good things I noticed in the code.

    • The components and the folder structure looks organized, well done.
    • Framer motion works very smoothly, good choice
    • Good use of context for theme
    • Since the data is filtered on the backend it's a great idea to use debounce.
    Marked as helpful
    0
  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarSubmitted almost 2 years ago

    Hi there 👋, I’m Melvin and this is my solution for this challenge. 🚀

    Help:

    • Any resource or suggestion on how to create or improve the accessibility of a switcher theme component is welcome; although this is the code for my component, I will be grateful for any suggestions.

    I added:

    • 🌔 Light and Dark mode
    • 🔧 Using localStorage to save theme preferences

    Built With:

    • React-JS
    • TailwindCSS
    • Yarn - Vite - Prettier

    Any suggestions on how I can improve and reduce unnecessary code are appreciated!

    Thank you. 😊✌️

    Intro section with dropdown navigation (React + Tailwind + Dark mode)

    11
    Karthik suryadevara•825
    @karthik2265Posted almost 2 years ago

    Hey melvin,

    The solution looks good and the responsiveness is also pretty good.

    a few things to note,

    In the ThemeSwitcher Component

     <input
        type="checkbox"
        className="m-t absolute top-0 left-0 z-10 h-full w-full cursor-pointer appearance-none"
        checked={darkMode}
        role="switch"
        aria-checked={darkMode}
        onChange={() => setDarkMode(!darkMode)}
      />

    when calling the setDarkMode you should prefer to do it using a function since the state update depends on previous state.

     <input
        type="checkbox"
        className="m-t absolute top-0 left-0 z-10 h-full w-full cursor-pointer appearance-none"
        checked={darkMode}
        role="switch"
        aria-checked={darkMode}
        onChange={() => setDarkMode((prev) =>  !prev)}
      />

    this should be preferred because sate updates happen asynchronously, check out this resources for more details

    using a function in setState medium article

    stack overflow question about function in setState

    The effect you are running for theme switching, this might affect perfomance as the app gets bigger

    useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  }, [darkMode]);

    another way to do this would be to store the theme preference in an app wide state like Context API or redux store and use it in the components.

    Overall good solution, well done 👏

    Marked as helpful
    1
  • Karthik suryadevara•825
    @karthik2265Posted almost 2 years ago

    hey Guilherme,

    well done the website looks good and very responsive 👏

    One thing I noticed is when I hover on an article title or on an item in header the color changes hinting that it's a link and it would be much clear if the cursor is a pointer.

    example:

    header .menu a:hover {
  color: hsl(35deg, 77%, 62%);
  cursor: pointer;
}

    congratulations on completing the challenge, good work.

    Thank You

    Marked as helpful
    1
  • Karthik suryadevara•825
    @karthik2265Posted almost 2 years ago

    Hey staticish,

    looks good, well done

    putting the border and adding a bonus button on the Title component was a good idea.

    some things to improve:

    • sizing of the text and images, just making them a little bigger would make it look a lot better
    • the bonus button and the play again button does not show any feedback to the user when hovered or clicked, you can add some by changing the cursor to pointer on hover and scaling the button to 0.9 when active.
    • try to put less logic in the html part, this would make the code more readable ,example:
    {state.userOption === null ? (
        <>
          {state.bonus ? (
            <Pentagon getId={getId} />
          ) : (
            <Triangle getId={getId} />
          )}) : (
        <GamePlay
          usersOption={state.userOption}
          houseOption={state.houseOption}
          results={state.results}
          playAgain={() => {
            dispatch({ type: "reset" });
          }}
        />
      )}
// you could wrap this  in a function call or make it a component and use it
    • try using scoped css with css modules
    1
  • Karthik suryadevara•825
    @karthik2265Posted about 2 years ago

    Hey 🙋‍♂️, Cosmo

    looks awesome well done. The responsiveness is also very good.

    Some things I would prefer to change,

    The jsx would be much cleaner if we split up the TableInfo component like for example

    <> <li><span>IP Address:</span><span>{info.ip || "---"}</span></li> <li><span>Location:</span><span>{info.location.region || "---"}</span></li> <li><span>Timezone:</span><span>UTC {info.location.timezone || "---"}</span></li> <li><span>ISP:</span><span>{info.isp || "---"}</span></li> this part can be made a separate component and we can call it Info component, and

    <ErrorMessage> <svg fill="#ff4848" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M23 7.444v9.112L16.556 23H7.444L1 16.556V7.444L7.444 1h9.112L23 7.444ZM15.728 3H8.272L3 8.272v7.456L8.272 21h7.456L21 15.728V8.272L15.728 3ZM12 17.998a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm-.997-12h2v8h-2v-8Z" /></svg> {error || "Oops something is wrong"} </ErrorMessage>

    this part can be made a separate component and we can call it ErrorInfo component.

    Doing this in my opinion will make the jsx more readable and less clutterred.

    Overall the app is great.

    How did you build the loader.svg ? looks cool

    Thank You

    Marked as helpful
    1
  • Raj Kiran Chaudhary•100
    @rk-codeflowSubmitted over 2 years ago

    My questions: Can you please elaborate better way of providing separate styles to separate components? My styled component is a mess. How can I manage my styled-components so that I follow the DRY principle?

    3-Column-React-Card-Component

    1
    Karthik suryadevara•825
    @karthik2265Posted over 2 years ago

    Hey raj kiran well done,

    The app looks great.

    few things to note,

    1. The card components have border radius for wrong edges in the mobile.
    2. The responsiveness can be improved at a certain screen size like 730px the app shows 2 cards side by side and one card below and at some point the 3rd card becomes bigger in height compared to the other two cards. these can be fixed by using flexbox for positioning of cards based on screen size using media queries.

    Thank you

    Marked as helpful
    1
  • Karthik suryadevara•825
    @karthik2265Posted over 2 years ago

    Hey Leobardo

    well done, the app works great.

    one thing you can I have noticed is that , there is vertical scroolbar on mobile , this should not actually appear because you are setting height of body to 100vh, but it does because of the internal working of mobile browsers the height becomes more than 100vh , note that this happens only in mobile browsers.

    To solve this problem here is quick solution using javascript

    const body = document.getElementById('body');

    body.style.height = window.innerHeight + 'px';

    using this the height of the body is 100vh in all browsers including mobiles as well. check this stackoverflow question for more info: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser

    0
  • Karthik suryadevara•825
    @karthik2265Posted over 2 years ago

    Hey debjit, well done

    The app looks nice.

    To modify the URL of an image, you can use JavaScript to do it. There is a method called window.matchMedia(query) which takes a media query like '(max-width: 600px)' as a string and returns object which contains information, the most important key in the object is matches which is a boolean value specifying if the query is satisfied or not.

    Check this out: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

    Thank You

    Marked as helpful
    0
  • samuel jacobs•330
    @Samuel-jacobsSubmitted over 2 years ago

    Hello, fellow devs. I decided I'd spent too much time on this project so I opted to submit it first. There's a feature I'm yet to add. It's the notification on the cart icon when an item is added. I have a few ideas about handling it already but suggestions would be appreciated. Also, any feedback at all would be appreciated. happy coding. Cheers.

    E-commerce product page with vanilla Javascript

    1
    Karthik suryadevara•825
    @karthik2265Posted over 2 years ago

    Hey samuel 🙋‍♂️

    Looks great, the responsiveness is good.

    The HTML and JS are well-structured.

    One thing I have noticed is that the images are not preserving their ratio when the size of the screen changes. An option to preserve aspect ratio is to use the image as background image for a div and adjust it to the middle. Take a loot at this for info: https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio

    And another little issue is that the items in the header are not aligned, they are off by a little. Adding this should solve the issue. .topnav { align-items: center; }

    Overall well done.

    About the feature you are yet to add, I guess you might have already thought of this, you can add a click event listener for the add to cart button and do some styling to show notification on the cart, like setting the display of number element which shows the no of items in the cart to "block" and then after a few seconds (using setTimeout) turn it back to its original display "none", like a blink like thing. You can try animations for this as well using CSS.

    Thank You 😀

    Marked as helpful
    1
  • Karthik suryadevara•825
    @karthik2265Posted over 2 years ago

    Nice work,

    looks great on mobile 📱. The feedback to the user showing 'loading...' is a great idea. It's important to show user whats happening in the app.

    somethings you can improve are add a little padding to the title 'More than just shorter links' in desktop, in mobile it looks fine. if the link pasted by the user is very long, it breaks the link component and it does not show copy button.

    Thank You

    0
  • Clement Idemudo•90
    @Clemcy9Submitted over 2 years ago

    Thank God I'm finally done after a week of coding and debugging. I still have some problems I'll like to share with this lovely community for help: #1. how to add windows listener to react components #2. How to code a responsive modal in react.

    thank you in advance for your comments.

    shopping cart using React js and styled components

    2
    Karthik suryadevara•825
    @karthik2265Posted over 2 years ago

    looks good

    The lightbox looks great, you should definitely put more effort into css. If you want to take your css to next level try scrimba.com, they have awesome free courses.

    I found this repo to be very helpful as a resource (react), take a look https://github.com/academind/react-complete-guide-code

    Overall, well done 👏

    Aim for improvement, not perfection.

    Thank you

    1