@amirhaziziSubmitted over 1 year ago
any feedback are welcome :)
Shane Chaffe
@ChaffexdAll comments
- @ChaffexdPosted over 1 year ago
Hey!
Really good attempt at the project, it's very clean. Good use of Tailwind here to style it as well.
It's a well made out project, the only thing I have feedback on is the shopping cart. When you have a total it's just a number, you don't have a $ for the total amount in the shopping cart as one normally would!
Considering adding this to ensure the user knows this is the total to provide a good user experience!
Other than that, well done!
Marked as helpful3 - @swagthehoomanSubmitted over 1 year ago
What I found difficult for my approach was to style the radio buttons for theme type input. Please suggest a better way to do this through react.
@ChaffexdPosted over 1 year agoThis is a really good attempt at the project!
I like the layout and clean transition between themes. I think the only suggestion I have is to make the theme settings have a hover effect, by that I mean cursor: pointer; so the user knows the interact with it.
Other than that I think this is a well-executed project!
Marked as helpful0 - @MarjanZivkovicSubmitted over 1 year ago
Had lots of fun building this small project. Feedback appreciated
@ChaffexdPosted over 1 year agoThis is a well though out attempt at the project!
One piece of feedback I have is when you rotate through the quotes, the container size changes. Have you thought about maintaining a single container size so it doesn't change?
Also, it might be a cool idea to consider using Axios to perform your GET request to learn more technologies!
Nice job!
Marked as helpful0 - @momin-riyadhSubmitted over 1 year ago
Can I use Grid in Flexbox components?
@ChaffexdPosted over 1 year agoHey Momin,
To answer your question about using grid in flex or vice-versa, yes you absolutely can. They work extremely well with each other actually!
I strongly recommend you taking a look at https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes so you can help bring your projects to life.
Good job!
Marked as helpful1 - @WiaterKaSubmitted over 1 year ago
Hello there!
Ufff... managed to deliver first project focused mainly on JS. Struggled with calculation logic but eventually I found solution :D
Any suggestions on improvement of the project are welcome.
Have a nice day and happy coding!
@ChaffexdPosted over 1 year agoHey Kamil,
Firstly, well done on delivering your first JS focussed project!
Great start! Dealing with forms is a tough topic when it comes to JS, at least I think so.
I have some pointers you might want to improve on:
- NaN when the form is blank isn't a good user experience, you should validate there is input before submission like the design suggests, you should throw an error when the input is blank
- I was also able to submit the form when I accidently put a typo in and got the result: -17950 years 3 months 26 days My input was: 10 / 012/ 19972 which is of course incorrect.
This is what makes this task so difficult because there are so many areas to cover! Other than that, well done!
Marked as helpful1 - @ArmsAndArrowsSubmitted over 1 year ago
It seemed easier before I started.
How to implement dropdown menu in one piece of code? It seems like buttons within are totally separated from accordion titles in desktop menu and totally together in mobile version. I'd like to keep DRY principles but this case kicked me off. Anyway this challenge is great.
@ChaffexdPosted over 1 year agoThis is a really good implementation of the design! You copied it pretty much 1 for 1. Well done!
- One thing that initially confused me was that the nav bar menu items can't be dropped if you click the arrow, as a user that is what I am used to so it made sense for me to click there but it didn't work. Have you considered including that img as part of your p? Or maybe wrapping it all in a button <button><img /></button> for example so you have both pieces of markup available for the drop down?
Other than that, no feedback!
Marked as helpful0 - @kevinburleSubmitted over 1 year ago
Hello everyone,
I wanted to make this product page as dynamic as possible so I added some features to the challenge:
1.Display one or more products dynamically 2.Modify the products data by the data.js file 3.Calculate the height of the cart dynamically according to the number of items 4.Open the cart after adding a product 5.Close the cart after a certain time after adding a product 6.Application works the same way with one or more products
to make it simple, the data of the products and the number of displayed products can be modified from the data.js file without changing the functionality.
Let me know your opinion!
@ChaffexdPosted over 1 year agoHi,
This is a slick project! I really like it!
I have one piece of feedback that initially made me as a user happy, when I added the first shoe to the cart I saw the basket update and drop down, that was pretty neat. But when I done this for another shoe, I didn't see it. I.e. if you scroll down, you no longer see it - I think it would be super useful for the user to see either the navbar cart icon increment or that drop down window present when you scroll so the user can track their cart when they add. I think that makes for a positive user experience rather than scrolling back to the top to check again.
Other than that, kudos! Amazing use of vanilla JS!
Marked as helpful1 - @AnouerMokraneSubmitted over 1 year ago
Hello, this is my solution for age calculator app. any feedback, please?
@ChaffexdPosted over 1 year agoHey!
This is a great take on the project! I love the instant feedback that you are providing from errors.
Have you considered preventing a user from submitting? Having NaN isn't the best user experience as not many people would actually understand what that means.
Other than that, it's pretty much spot on! Ah!
I found another bug, I entered my birthday and it told me that I am: 26 years 2 months 89 days
It should be: 26 years 2 months 25 days
Might be worth checking your algo for age input!
Marked as helpful1 - @simonem-fSubmitted over 1 year ago
My first React App 🙂 Feel free to give me any feedback or tip!
@ChaffexdPosted over 1 year agoHey Sam!
Great project, really good use of a class component - I like the approach.
I have thing you need to change and that's the month counter, I understand why you have the +1 but it actually gives you the incorrect results. "mapMonthDays(date.getMonth() + 1" with the new Date() object, getMonth provides January as 0, so when you do the calculation it is actually adding a month to your age! I know I'm old but I'm not that old just yet haha.
Marked as helpful0 - @Geo-M69Submitted over 1 year ago@ChaffexdPosted over 1 year ago
Hey Geo,
Solid attempt! I think there is room for improvement when it comes to validating the forms as well as the styling. Be sure to check out the designs that are given to you in the assets and images files as well as the readME docs, they will keep you on the right track!
Currently when a user hits submit, the year is only invalid but all 3 are actually. Think about adding the error to those fields too!
0 - @FrostemanNeogardSubmitted over 1 year ago@ChaffexdPosted over 1 year ago
Hey Liam!
This is a good solution! I like the hover affect you have on the die, it's a great way to let users know that it is interactable.
One thing I would recommend to make this slightly better would be to increase the height of the main container so it doesn't change sizes on every quote. Also another challenge to make this even better would be, did you think about using setInterval within useEffect to allow the quotes to randomly generate every 5 seconds for example? Would be a pretty good option if you wanted to add another layer of complexity to the app.
Marked as helpful1 - @KirthGersenCloneSubmitted over 1 year ago
When I put the site on netlify I saw that there was still a border around the read more button.
This was my first real test with grid, and I enjoyed it. There was one thing I could not accomplish, and that was to put the logo on the mobile version. It kept sliding left and right, when I opened or closed the menu. The code for the latter I found on W3Schools (very simple but it got the job done).
@ChaffexdPosted over 1 year agoNicely done! I have a couple points of feedback to help the project be even better than it already is!
- Consider adding some margin to the top so the logo and whole header isn't touching the tool bar of the browser
- With the above point, it would make more sense to give you the ability to scroll a little bit
- Add a cursor: pointer; for the button so it seems like you can interact with it (you done this in the nav bar)
- Amazing use of grid!
Look forward to seeing more work :)
Marked as helpful0
