toshirokubota

Latest comments

• 

  P

  RF13•550

  @rf1303

  Submitted 6 days ago

  What are you most proud of, and what would you do differently next time?

  I am proud to have completed a functional and visually appealing project that allows users to calculate BMI in both metric and imperial systems. I implemented accurate conversions between feet/inches and stones/pounds, and also included custom messages for the user to understand their result and healthy weight range.

  What I would do differently next time is to organize the JavaScript code better from the beginning, using reusable functions and separating logic from presentation. I would also spend more time planning and testing the accessibility of the HTML from the beginning, as catching problems like missing landmarks or missing aria labels at the end can lead to redoing parts of the structure. I would also automate some of the flow with more consistent validations and keyboard tests.

  What challenges did you encounter, and how did you overcome them?

  The biggest challenges were the grid and the changes to the bmi limits and the changes to imperial and metric, finding and testing what looked best, and finding the way to calculate the bmi.

  What specific areas of your project would you like help with?

  It would be in the HTML accessibility part and in the Javascript code structure and if the css code looks good.

  

  HTML CSS SCSS Javascript Mobile firts bem

  #accessibility#bem#sass/scss

  1

  20
  

  P

  toshirokubota•1,290

  @toshirokubota

  Posted 3 days ago

  Hi, congratulations on completing the project. I agree with you that I, too, tend to treat accessibility a second thought. It takes a lot of commitment to make it through. I have looked at your code, and I have noticed that you are not associating <label> with <input> via 'for' attribute. That will prevent an aid (screen reader) to properly announce the label when the input receives a focus. In the imperial measurement option, there is only one visible label for two inputs. I had to provide a hidden (sr-only) one to accommodate the missing label to aid the screen reader. I am not an expert on the accessibility, but I think these are some improvements you can make in your project. I also noticed that BMI summary ('Your BMI suggests you're...') is not reflecting the calculated BMI. Even the value is way low/high, it still says that you are healthy. You want to change that. Finally, I suggest that you try to place background and SVG curved patterns in the project as suggested by the design. I found that doing so can be very tricky but does provide a much more visually professional appearance. Good job and good luck!!

  0

  Marked as helpful
• 

  Ghozy•280

  @Ghozy165

  Submitted 12 days ago

  What are you most proud of, and what would you do differently next time?

  the most thing i proud is that i can complete this project and complete this project using react and react hook

  What challenges did you encounter, and how did you overcome them?

  Using React Hooks to store values, I encountered many errors. I searched for resources on the internet to learn how to use Hooks, but eventually, I just asked an AI how to use react hook step by step. After that, I stopped getting errors."

  What specific areas of your project would you like help with?

  There are still many parts that are lacking. If anyone wants to comment, thank you.

  

  E-commerce product page

  #react

  1

  20
  

  P

  toshirokubota•1,290

  @toshirokubota

  Posted 7 days ago

  Congratulations! Your design looks very nice. You paid attention to details and painstakingly reproduced some subtle designs, like the underscore on the route in <nav>, outline on the selected thumbnail, etc. I have noticed a few behavioral issues you may want to look into. First, when I open the lightbox and shrink the window to the tablet size, the foreground merged into the background behind the lightbox screen. I think you are disabling the lightbox feature for small screen sizes, and in real life, the user would not continuously shrink the screen. But it looks strange and I think a small state change will be able to fix it. Second, somehow, the loading of images was slow. It could be something fixable but I am not sure how. Third, when the "checkout" button is clicked, nothing happens. I know that we are not implementing real checkout, but at least you can close the modal and clear the cart. Well, these are something I noticed while playing with your app. Again, great job and happy coding!

  0
• 

  dzerdzul•230

  @dzerdzul

  Submitted 14 days ago

  

  Responsive news homepage using html, css and js

  #accessibility#sass/scss#bem

  1

  10
  

  P

  toshirokubota•1,290

  @toshirokubota

  Posted 11 days ago

  Hi, your project looks great. I have a couple of feedbacks. In your script at the bottom, you have forEach statement that iterates over 'a' on 'navigation'. Then inside there is a duplicate forEach. I think that was unintentional? I would also increase the inline margin of the main for the tablet version. It looks pretty tight in the range of the screen sizes. Again, great job and happy coding!

  0

  Marked as helpful
• 

  P

  Anamay•400

  @anamaydev

  Submitted 17 days ago

  What are you most proud of, and what would you do differently next time?

  I'm proud of how quickly I finished and how easy layouting was with Tailwind CSS.

  What challenges did you encounter, and how did you overcome them?

  One challenge I faced was adapting to the new Tailwind CSS configuration, which has shifted from JavaScript-based (tailwind.config.js) to a CSS-first approach in version 4. This made it a bit tricky to define custom variables for things like colors and spacing, especially since many tutorials and resources were still based on older versions of Tailwind. To overcome this, I spent time researching and eventually found a well-explained, up-to-date tutorial that clarified the new approach. That helped me successfully implement the custom styles I needed.

  What specific areas of your project would you like help with?

  I'm open to any feedback, but I'd especially appreciate suggestions on improving accessibility, code structure, or best practices.

  

  Contact form with success message modal using React JS and Motion

  #react#framer-motion

  1

  10
  

  P

  toshirokubota•1,290

  @toshirokubota

  Posted 12 days ago

  Great job! Happy coding!

  0
• 

  12mohamedh•100

  @12mohamedh

  Submitted 4 months ago

  

  FAQ accordion

  1

  00
  

  P

  toshirokubota•1,290

  @toshirokubota

  Posted 14 days ago

  Hi. The project looks good. The start-up animation is slick. One suggestion is to add key board navigation. To do so, you can use a checkbox button for each FAQ and use its :checked pseudo selector to open/close the FAQ (implemented as <label>) and swap the icon. You can do all without any scripting. Good luck!

  0
• 

  kirlosbasta•250

  @kirlosbasta

  Submitted 19 days ago

  

  Interactive rating component with react and tailwindcss

  #react#tailwind-css

  1

  10
  

  P

  toshirokubota•1,290

  @toshirokubota

  Posted 15 days ago

  Congratulations. The project looks very good. I have a couple of suggestions. I think it is sensible to provide some user feedback (like an error message) when the user hit submit without selecting the rating. If you look closely at the design, the circular shape and the header's font size changes with the size of the view. I would use clamp() to adjust the CSS properties based on the screen size. Happy coding!

  0

  Marked as helpful