Quentin

Latest comments

• 

  P

  Julien Gilbert•500

  @juliengDevSubmitted about 1 month ago

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

  • Dual Measurement Systems:
    • Metric (cm, kg)
    • Imperial (ft/in, st/lbs)
  • Dynamic Calculations:
    • Instant BMI computation
    • Weight classification
    • Healthy weight range
  • Interactive Elements:
    • Unit toggle
    • Real-time updates
    • Validation feedback
  • Responsive Layout:
    • Mobile-first design
    • Optimal viewing on all devices

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

  This is my first time implementing a design using the latest version of Tailwind. I’ve learned a lot about the library by exploring almost all the possibilities it offers for this type of interface—from media queries to flexbox and complex grid layouts.

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

  All constructive criticism is welcome.

  

  BMI_Calculator_Typescript_Tailwind

  #typescript#vite#tailwind-css

  1

  10
  

  P

  Quentin•330

  @QuentinPettonPosted about 1 month ago

  Hello ! Very nice job here :) Your Readme is really clean and complete & you deploy your project with direct link to try the BMI calculator

  0
• 

  Jewel•110

  @programmerjewelSubmitted about 2 months ago

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

  Proud of using only vanilla css and javascript for completing this project.

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

  Oh gosh! When I first decided to take on this project, it seemed pretty simple in my mind. However, as I started working on it, it turned into a much more challenging experience than I anticipated. Designing input fields and customizing the input:radio and input:checkbox elements proved to be particularly difficult for me. Unfortunately, I struggled to follow the exact CSS styling, as it felt overly complicated. On the other hand, the JavaScript part seemed relatively easier for me, though I still need to make some improvements in terms of optimization and reducing repetitive code.

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

  Anything related to improve my css skill on styling input fields and optimize javascript.

  

  Mortgage Repayment Calculator

  #accessibility

  1

  00
  

  P

  Quentin•330

  @QuentinPettonPosted about 1 month ago

  Hello ! I noticed your form is missing a <form> tag to properly group the input fields. This one handle form submission properly. You can use it like:

  <form id="mortgage-form">
          <div class="input-group">
              <label for="mortgage-amount">Mortgage Amount</label>
              <input type="number" id="mortgage-amount" placeholder="$" required>
          </div>
  
          <div class="input-group">
              <label for="mortgage-term">Mortgage Term</label>
              <input type="number" id="mortgage-term" placeholder="Years" required>
          </div>
  ....
  

  Marked as helpful

  0
• 

  Luis Aviles•290

  @lavil014Submitted about 2 months ago

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

  I am proud of the approach using Vanilla Js

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

  The form validation was challenging.

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

  I need feedback on my form validation.

  

  Responsive design with Boostrap

  #bootstrap#accessibility

  1

  10
  

  P

  Quentin•330

  @QuentinPettonPosted about 1 month ago

  Hey! I noticed that all your <label> elements use for="exampleInputName", which doesn’t match any input id.

  Each label should have a unique for attribute corresponding to the correct input id. For example:

  <label for="firstName">First Name</label>
  <input type="text" id="firstName">
  

  Using "required" in your input is a good option too

  0
• 

  MEHNOOR SHAHBAZ•700

  @Mahnoor366880Submitted about 2 months ago

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

  I’m most proud of implementing a fully responsive mortgage calculator using Tailwind CSS and JavaScript. I also improved form validation by providing real-time feedback and ensuring accessibility compliance.

  Next time, I would optimize my JavaScript code by making it more modular. I’d also explore adding a framework like React or Next.js to improve scalability and performance.

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

  Challenges & Solutions ❌ Challenge: Ensuring the mortgage repayment calculator was fully responsive across all screen sizes. ✅ Solution: I used CSS Grid and Flexbox along with a mobile-first approach to make the layout adapt smoothly across devices.

  ❌ Challenge: Implementing real-time form validation and error handling. ✅ Solution: I used JavaScript to check user input and displayed error messages dynamically to improve user experience.

  ❌ Challenge: Handling edge cases (e.g., negative values or empty inputs). ✅ Solution: I added extra validation checks to prevent invalid inputs and used parseFloat() to ensure only valid numbers were processed.

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

  Did I follow best practices to make my project accessible to all users? Is my validation logic effective, or are there better ways to handle errors?

  

  Responsive Mortgage Repayment Calculator using HTML CSS and JAVA

  #accessibility#pure-css#vanilla-extract

  1

  11
  

  P

  Quentin•330

  @QuentinPettonPosted about 1 month ago

  Hey! Instead of using innerHTML to replace the entire results section, a better approach would be to use CSS to hide/show elements dynamically.

  For example, you can add a .hidden class (display: none;) to initially hide the results and remove it when the form is submitted. This improves performance, keeps event listeners intact, and makes the code more maintainable.

  I saw you use var type, now you can use let or const for your variable

  Marked as helpful

  0
• 

  Kim Fransson•260

  @kim-franssonSubmitted about 2 months ago

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

  Fairly happy with the planning, would probably do even more detailed planning if I aim to tackle an harder challenge next time.

  I'm proud over the animation for the "navigation links" using motion. Went into a rabbit hole trying to add an enter and exit animation for the lines, but did not get that to work with the layout animation between the links.

  I'm also proud about the nextjs setup, fun to use the generating StaticParams for the static json data. Generating dynamic favicons for every page.

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

  First challenge was with the planet image, looking at figma the images are in different sizes (depending on planet size). First I thought to maybe include height/width in the data model for every viewport, but that feelt a little of cheating.

  So the other approach (the one I took) was to have a list of all sizes for mobile as base. Then depending on the viewport width I would multiply the base size with a ratio which I based on mercury. I just assumed that every planet would kind of have the same ratio.

  Another bug I saw in the end was the tab order got messed, should be:

  Links -> Source Link -> Toggle Group

  But because I'm using grid template areas (and re-using the toggle group component in mobile, the tab order became:

  Links -> Toggle Group -> Source Link

  Would probably create a variant instead, and render between two components with different variants for mobile and tablet/desktop. So that the html is in the correct order.

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

  Not really looking for particular feedback. But would be fun to hear how other solved e.g the different sizes of the Planet images or If there are any rule of thumbs implementing layouts and keeping the tab order correct.

  

  Responsive Planet page using Next.js + React Aria Components

  #framer-motion#next#react#typescript

  2

  20
  

  P

  Quentin•330

  @QuentinPettonPosted about 1 month ago

  Oh, i see your point! To me, this is more a matter of interpreting the designer’s intent in the Figma mockup. It comes down to whether we aim for pixel perfection or take a more flexible approach. I leaned towards a UI-focused solution because i find it more user-friendly to have a consistent layout regardless of which planet the user is viewing. Both solutions are ok :)

  1
• 

  Kim Fransson•260

  @kim-franssonSubmitted about 2 months ago

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

  Fairly happy with the planning, would probably do even more detailed planning if I aim to tackle an harder challenge next time.

  I'm proud over the animation for the "navigation links" using motion. Went into a rabbit hole trying to add an enter and exit animation for the lines, but did not get that to work with the layout animation between the links.

  I'm also proud about the nextjs setup, fun to use the generating StaticParams for the static json data. Generating dynamic favicons for every page.

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

  First challenge was with the planet image, looking at figma the images are in different sizes (depending on planet size). First I thought to maybe include height/width in the data model for every viewport, but that feelt a little of cheating.

  So the other approach (the one I took) was to have a list of all sizes for mobile as base. Then depending on the viewport width I would multiply the base size with a ratio which I based on mercury. I just assumed that every planet would kind of have the same ratio.

  Another bug I saw in the end was the tab order got messed, should be:

  Links -> Source Link -> Toggle Group

  But because I'm using grid template areas (and re-using the toggle group component in mobile, the tab order became:

  Links -> Toggle Group -> Source Link

  Would probably create a variant instead, and render between two components with different variants for mobile and tablet/desktop. So that the html is in the correct order.

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

  Not really looking for particular feedback. But would be fun to hear how other solved e.g the different sizes of the Planet images or If there are any rule of thumbs implementing layouts and keeping the tab order correct.

  

  Responsive Planet page using Next.js + React Aria Components

  #framer-motion#next#react#typescript

  2

  20
  

  P

  Quentin•330

  @QuentinPettonPosted about 2 months ago

  Hello and nice job ! To fix your different sizes of Planet images, using Grid is a solution for your problem.

  It allow you to change your display on different device too

  0