Frontend Mentor | Rafael Sequeira Sandoval's profile

@EduardoPoot-devSubmitted 9 months ago

The app integrate LocalStorage for save the notes and save the color theme, getting the theme for default of the navigator, for applicate the dark mode or light mode

Todo App - React

1

Rafael Sequeira Sandoval•270

@RafaelSS427Posted 9 months ago

Hi Eduardo. I had a look at your project and I have a few observations.

When I am in the completed option and I add a new todo it is added to the list giving the feeling that it is already completed.
It is very strange to use the onBlur event to add a todo, I recommend using the onSubmit event or onKeyPress (for the enter key) for this.

Marked as helpful

0

Better5afe•850

@better5afeSubmitted about 1 year ago

Hi there!

This project took me a little bit longer than I expected, the autumn weather definitely does not help with my coding motivation :D

To summarize, the users are able to:

Add and remove items from the cart.
Update quantity of the cart items.
View the cart's content.
Open a modal gallery carousel by clicking on the large product image and interact with it.
Switch the large product image by clicking on the small thumbnail image.
Interact with mobile gallery by tapping the arrow buttons or swiping right or left.
View the optimal layout for the site depending on their device's screen size.
See hover states for all interactive elements on the page.

In addition to this:

The cart is stored within local storage, so it's fetched from there as soon as the page reloads.
Users can swipe between slides on mobile devices - I used React Swipeable library to implement this feature.

As always, I'll be grateful for any feedback.

Thanks & Happy Coding! 🎃

Tailwind + TypeScript + React.js | E-commerce Product Page

3

Rafael Sequeira Sandoval•270

@RafaelSS427Posted about 1 year ago

Hi Better5afe, I really enjoyed your work! I would like to share with you 2 possible improvements you could implement.

It would be great to pause the animation of your image carousel when the user's cursor is over it.
Every time the user changes image, you could reset the time it takes for the carousel to go to the next image, this will avoid abrupt jumps between images.

As you can see these are improvements related to the user experience. I hope my observations are helpful! :D

0

Catherine Muya•10

@KatemuyaSubmitted about 1 year ago

Hello everyone,

After a while, I am making my way back to coding and thought I should start with this project. I am open to any constructive comments, suggestions or feedback. Thank you :)

QR code Component

1

Rafael Sequeira Sandoval•270

@RafaelSS427Posted about 1 year ago

Hi Catherine, I was looking at your solution. Styles are fine but I see you have problems with the size container, I suggest leaving the width on "auto" and centering it with the flex or grid property. For example:

<div class="container">  [use flex or grid] 
  <div class"card-container">  [width: "auto"] 
   <img />
   ...
  </div>
</div>

The width size will adapt to the defined size of your image. You can practice with the flex property in this web site: FLEXBOX FROGGY

Marked as helpful

0

Alessandra Oliveira•710

@itsale-oSubmitted about 1 year ago

Hello 👋

This is my solution to the age calculator app challenge. I built it all by myself, I'm still a newbie with JavaScript, my app is totally working but there are a lot of if and else if on my code, so I'm pretty sure there is a better way to do it, but honestly I don't know how.

Feedbacks are welcome

Age Calculator App Solution

1

Rafael Sequeira Sandoval•270

@RafaelSS427Posted about 1 year ago

Hi Alessandra, you did a great job! These are my observations about your code.

For the declaration of variables it is recommended to use "const" or "let". "var" is rarely used nowadays.
The date validations are not entirely correct, for example, the entry for 02-31-2000 should be wrong. I recommended the use of date object for this. For example, you can use the date object to validate if the day is correct and thus avoid complex validations with conditional operators.

    const userDate = new Date(`${month}-${day}-${year}`)

    if (userDate.getDate() !== Number(day)) {
      throw Error('Must be a valid day')
    }

When we enter an invalid date to a date object, it will add the days to the next month as a result, so if we do something like this "new Date("02-31-2023")" we would have this as the answer: "2023-03-03T06:00:00:00.000Z".

I recommend leaving the max-width with the value "auto". This way it is centered on all devices.

body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* max-width: 1450px; It's not necessary */
    background-color: hsl(0, 0%, 94%);
    font-size: 2rem;
}

Marked as helpful

1

Andrew Eubanks•140

@dangero1990Submitted about 1 year ago

I built this project this way because I wanted to try out some of React's more complex hooks rather than just using state for everything. Please comment with any critiques you may see. I'm looking to learn and get better :)

Age Calculator

1

Rafael Sequeira Sandoval•270

@RafaelSS427Posted about 1 year ago

Hi Andrew, you did a great job! I found points in your code that you can improve.

I recommend using the useEffect hook instead of using a conditional operator in your FormInput component. For example instead of this:

  if (clear) {
    inputRef.current.value = null;
  }

Use this:

useEffect(() => {
        if (clear) {
            inputRef.current.value = null;
        }
    }, [clear, inputRef])

The date validations do not work as they should. I recommend performing the validations with the Date object.
You can improve the readability of your code by creating a custom hook for each context of your application and then using it. For example:

import { useContext } from 'react'
import { UserContext } from '../App'

export const useUserContext = () => {
    const state = useContext(UserContext);

    return {
        ...state
    }
}