Skip to content
OverviewSolutions
4
Comments
15
maicond
@maicondguerian

All comments

  • maicond•230
    @maicondguerianPosted 12 months ago

    O layout ficou identico Daniel! Parabéns! Só faltou uma verificação pra ver se algum rating esta selecionado antes de ir para a página de agradecimentos.Uma bloco de if else simples resolve isso aí. Abraço.

    1
  • marcelo0101•10
    @marcelo0101Submitted 12 months ago

    Although a simple project, if anyone can help I would like to know if using the Flexbox property in this project was the best choice.

    QR code component

    1
    maicond•230
    @maicondguerianPosted 12 months ago

    Hey, how's it going? Pretty nice work!

    You almost got it right, but forgot some things:

    .container {
    display: flex;
    flex-direction: column;
    align-items: center; 
    height: 100vh; /* to set your view height at 100vh of the screen */
    justify-content: center; /* to set your content horizontally in the middle of the screen */
} 
.qrcode {
    background: hsl(0, 0%, 100%);
    /* margin-top: 40px; // remove this line */
    /* padding-top: 20px; // remove this line */
    /* padding-left: 20px; // remove this line */
    /* padding-right: 20px; // remove this line */
    /* padding-bottom: 40px; // remove this line */
    padding: 20px 20px 40px; /* you can avoid the verbosity by declaring all sides padding by passing the properties in PADDING: the first argument is about top, second: right, third: bottom, fourth: left */
    border-radius: 20px;
    width: 250px;
}
    Marked as helpful
    0
  • maicond•230
    @maicondguerianPosted 12 months ago

    "Hey Faizal, before I provide my feedback, are you Brazilian? By the way, you did a pretty good job on this project with Tailwind and React. The final outcome was quite close to the challenge's requirements. However, from my understanding, React is about creating small, reusable components by breaking down the responsibilities into smaller, more organized components., that when togheter, make your application.

    To make it even better, here are a few things you can improve:

    • Create a context to pass props through it. Prop drilling isn't always recommended, and using context will certainly make your code easier to maintain and understand.

    • Create more components for various parts of your application, such as Header, Cart, ProductGallery, Description, or BuytSide.

    • I noticed you used an alert to display a success message when a product is added to the cart. There's a library called React-toastify designed for this purpose; it would be cooler to use it instead of an alert.

    • When you add a product to the cart, the counter should reset to zero, creating a more immersive experience.

    • Currently, you are replacing the quantity of the product with the new quantity, rather than adding the old quantity to the new one.

    • The last thing is that you are reusing the modal component for mobile resolution. While this is a nice solution, you can make it a modal with a display:block instead and remove the overlay to make it blend in with the rest of the content. But once again, I liked your solution!"

    Marked as helpful
    0
  • maicond•230
    @maicondguerianPosted over 1 year ago

    Redondidnho hein? notou diferença na utulização do vite na criação e instalações de depencias no projeto? rs

    0
  • maicond•230
    @maicondguerianPosted over 1 year ago

    Opa! bacana, seu projeto faltou apenas a parte da r4sponsividade no projeto para dispositivos motives e resoluções abaixo de desktop no mais o resultado ficou bom parabéns!

    Marked as helpful
    1
  • maicond•230
    @maicondguerianPosted over 1 year ago

    Eai Henrique beleza? show seu projetinho em ts hein? proxima coisa que quero aprender js tipado, tu usou cra para fazer esse projetinho né? já conhece o vite? next-js? Usa coisa que você deveria ter feito é deixar a o imagem mobile e o componente/container do form com width 100% ficaria mais agradavel visualmente, de resto ta show parabens aí!

    Marked as helpful
    0
  • Jafar•30
    @jsa2023Submitted over 1 year ago

    I really enjoyed this one. It was quite challenging. Any advice on the form submission, is the way I implemented it good, or is there a better way?

    Newsletter Sign Up!

    1
    maicond•230
    @maicondguerianPosted over 1 year ago

    Hey! Well done on the solution! I like your job with form validation. I did something similar on my own. One thing you could do to improve is to show an error message if the input is empty instead of disabling the button. As you are showing a dynamic error only if the email matches the regex, you could also display a valid email message. Additionally, the responsiveness is not quite good; it seems like you only made it for iPhone devices, and it's not responsive for other resolutions. Take a look at my solution to get an idea of how to do it!

    1
  • maicond•230
    @maicondguerianPosted over 1 year ago

    Eaí vinicius Beleza? parabéns pelo desafio ficou bem bacana! o layout ficou muito parecido com a proposta do desafio! Só tens que ver a responsividade que ficou bugada, ambas paginas e imagens estão sendo exibidas quando se vai diminuindo a resolução, tenta dar uma olhada nisso abraço!

    Marked as helpful
    0
  • Carolina Rangel•10
    @carolrangel98Submitted over 1 year ago

    Hello, Frontend Mentor community! Here's my approach to the challenge's final solution. Accepting any suggestions, tips and observations.

    QR Code Component Hub

    4
    maicond•230
    @maicondguerianPosted over 1 year ago

    Oi Carol tudo bem? Bom não sei se é brasileira então vou escrever em inglês mesmo rs You did a quite good job, those warnings are caused for some detais and lack good practices of semantic HTML but it can be easilly fixed by using more landmarks on you HTML, as section,main to evolve your components and the images must be a alt tag alt="" to help the acessiblity of the user, you also can improve your code by using the resolution proposed by the challenge, and align your itens in the center of the screem to get a more close result. See ya!

    Marked as helpful
    2
  • maicond•230
    @maicondguerianPosted over 1 year ago

    Hello there! you did a very good joob! One thing you could improve is disable the buttom submit when no ratings are sellected, or just put some logical that wont let it subimmit without click on any rating. Anyway nice Work!

    1
  • David•70
    @davidko5Submitted over 1 year ago

    Hello there,

    that's my second solution on this portal. I wanted to try new technologies such as Vite, Sass and Vue.js with Composition API.

    I am mostly satisfied with the project, but I will be very grateful for your remarks and comments. The first thing I am not sure about is code quality, readability and maintainability. Secondly, I spent 3-4 days on this solution, and I am curious if it isn't too long for this kind of task?

    E-commerce product page built using Vite, Sass and Vue.js

    1
    maicond•230
    @maicondguerianPosted over 1 year ago

    Hello David! Very nice and cleam project! I recently also start use Vite as a tool. You project is very smooth and similar to the challenge one the resolutions are quite close, one thing you could improve is the transition/animation on the cart and all hover elements to make it more smooth and soft, but you did a very good job! About the time you took do make in my opition its pretty acceptable as more you code more skills you get and can make it faster, anyway nice job!

    Marked as helpful
    1
  • maicond•230
    @maicondguerianPosted over 1 year ago

    Você fez um trabalho muito bom Camila parabens, só tome cuidado com os warning's sobre HTML semantico que nem eu entendi direito haha! Bons estudos.

    0