kunal90803

Latest comments

• 

  Kuvashnee Naidoo•370

  @KuvashneeNaidooSubmitted 7 months ago

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

  I am glad that I used React as the useState hook helped to manage the state and rendering of the calculations, allowing for efficient updates to the UI. I will perhaps explore using other React hooks such as useRef to directly access DOM elements.

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

  One of the most challenging parts of creating this calculator was ensuring that all elements were styled correctly and responsive to different screen sizes. I made the calculator responsive through a combination of Flexbox for centering, a maximum container width, CSS Grid for button layout and a media query to add a breakpoint in order to adjust a column.

  

  Responsive tip calculator built using React

  #react#bootstrap

  1

  40
  

  kunal90803•460

  @kunal90803Posted 1 day ago

  Great work, @KuvashneeNaidoo

  I really appreciate the structure and clarity of your code, especially the way you include comments to enhance readability. Your approach makes it easy to understand and maintain.

  I did notice a small detail—you've set the type attribute in the input tag as "text". It would be better to use "number" instead. Additionally, to remove the default up and down arrows in the input box, you can add the following CSS:

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
  

  Other than that u done a great job and best of luck of future ahead.

  HAPPY CODING 😊.

  Marked as helpful

  1
• 

  Pai-Kai Lee•250

  @PaiKai-LeeSubmitted 8 days ago

  

  Interactive rating component solution

  #tailwind-css#accessibility

  1

  20
  

  kunal90803•460

  @kunal90803Posted 3 days ago

  Great design, @PaiKai-Lee!

  Your website has a clean and well-structured code, making it easy to understand. However, I noticed that accessibility could be improved. You might want to check it using accessibility testing tools. Here are a few suggestions to enhance it:

  1. Instead of <div class="container">, consider using <section> for better semantic structure.

  2. The <dialog> element should include aria-labelledby="dialog-title" to improve identification for screen readers.

  3. The rating buttons should have aria-label="Rate 1 star" (and so on) to provide better support for visually impaired users.

  4. The star icon should have an appropriate alt text, such as alt="Star icon", to ensure accessibility for screen readers.

  Other than that, your code is well-written and easy to follow. Keep up the great work! Best of luck for the future—happy coding!

  Marked as helpful

  1
• 

  Asia Ashraf•360

  @asia272Submitted 18 days ago

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

  I'm proud of successfully completing this challenge and making the design fully responsive. Next time, I would focus more on improving my CSS skills, especially using Grid and Flexbox more efficiently.

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

  One challenge I faced was making the layout responsive for different screen sizes. I solved it by using CSS Flexbox and media queries.

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

  I would love feedback on how I can improve my CSS structure and make my code cleaner. Also, any tips on better responsiveness techniques would be helpful.

  

  Product Preview Card Component - HTML & CSS

  #accessibility#pure-css

  4

  100
  

  kunal90803•460

  @kunal90803Posted 4 days ago

  Great work, @asia272

  I noticed one small improvement that could enhance your design further. For a more refined typography, consider using 'Fraunces', serif for bold headings and the price (149.99), while keeping 'Montserrat', sans-serif for the description.

  Other than that, you've created a beautiful design. Keep up the great work!

  Happy coding! 😊

  Marked as helpful

  1
• 

  Asia Ashraf•360

  @asia272Submitted 6 days ago

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

  I'm most proud of successfully implementing a fully responsive design with smooth transitions and clean UI. The content switching feature works seamlessly, and I ensured it looks great on all screen sizes.

  Next time, I would like to explore adding more animations and improving the accessibility of the component by including keyboard navigation support.

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

  One challenge I faced was positioning elements correctly for different screen sizes. Initially, the layout would break on smaller screens, so I used CSS flexbox and media queries to adjust the positioning dynamically.

  Another challenge was handling content visibility toggling with JavaScript efficiently. I overcame this by using display: none and display: flex properly in combination with event listeners.

  

  Coding-bootcamp-testimonials-slider

  #pure-css

  2

  80
  

  kunal90803•460

  @kunal90803Posted 5 days ago

  Hello @asia272,

  There are a few more refinements needed for this project:

  1. Adjusting the Image of the Person – Enlarge the image slightly and use z-indexing to position it behind the text for better layering.

  2. Adding a Background – Consider adding a background to enhance the overall visual appeal.

  3. Improving the Slider Functionality – The slider concept is well-executed! For further improvement, ensure that clicking "Next" on the last image loops back to the first image for a better experience.

  Apart from these points, you've done a great job! Keep up the good work.

  Happy Coding Journey Ahead.😊

  Marked as helpful

  1
• 

  Asia Ashraf•360

  @asia272Submitted 7 days ago

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

  ** Problem Faced ** Initially, aligning the testimonial cards correctly was challenging. The layout was not responsive, causing elements to misalign on different screen sizes.

  To solve this issue, I implemented CSS Grid:

  • Used grid-template-areas to structure the layout efficiently.
  • Assigned grid-area values to each card for precise positioning.
  • Applied gap: 1rem; for proper spacing.
  • Used media queries to ensure mobile responsiveness.

  

  Testimonials Grid Section

  2

  110
  

  kunal90803•460

  @kunal90803Posted 7 days ago

  Great work @asia272.. I like the way you utilized grid property for your design. I just noticed few small issues:

  1. On small screen the quotation mark in box-1 vanishes out. Work on that part too and on large screen its taking full space so adjust the size of that according to design.
  2. Increase the size of the person images as it seems much smaller as compared to the name.. just to look better.

  Other than that i like the structure and cleanliness of your code. Best of luck for your journey ahead. ** Keep learning and keep building! **

  Marked as helpful

  1
• 

  Chame "Guigui-chan"•270

  @Guilherme-Porto-SilvaSubmitted 10 days ago

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

  Next time, I am going to try this clamp(); friend. I've been pretty satisfied with the final result of a simple

  @media screen and (min-width: 1440px) {

  *{ font-size: large; }
  

  }

  troughout my previous projects and it has aways got me lazy to check what it is about

  

  Tip calculator using frontend triad

  #pure-css

  1

  00
  

  kunal90803•460

  @kunal90803Posted 8 days ago

  @Guilherme-Porto-Silva.. there are several issues within your code.

  1. Add placeholder '0' in the input section.
  2. The tip amount per person is wrong you have to divide total bill*(tip percentage*0.01) by number of people.
  3. You should also display $0.00 initially just change it when bill and people are greater than zero.
  4. Kindly work on font of the text and the number output.
  5. Increase the height of input as compare to your design.
  6. For small screen size adjust the width and border radius of the components.
  7. Also add error states to your project for improper input.

  Work on these problems and best of luck for future ahead. If it helps u marked it as helpful.

  0