Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Tip Calculator App build with REACT | HTML | CSS | JS - MikDra1

MikDra1 5,610

@MikDra1

Desktop design screenshot for the Tip calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I'm starting my journey with React. If someone could tell me what I've done wrong and what can I improve in my code I would really appreciate that 😁😁😁.

Community feedback

@TedJenkler

Posted

Hi @MikDra1,

Nice project! First off, here’s an important tip I wish I had known earlier: avoid using Create React App. It’s not the best bundler out there(arguably the worst). I’d recommend using "npm create vite@latest" instead for better performance and other improvements.

Now, onto your project specifically:

Input Validation:

Your React code could benefit from input validation to ensure users can’t enter letters. You can achieve this using typeof, Number(), or similar methods.

Styling:

Great job on making the site responsive, and the overall style looks good. Consider fine-tuning the colors and adding animations or shadows for a bit of extra polish.

Keyboard Accessibility:

As an extra challenge, try making the calculator fully functional without a mouse. You can implement this with a custom hook and some DOM manipulation—it's a valuable skill to have.

Hope this feedback is helpful!

Best, Teodor

Marked as helpful

0

MikDra1 5,610

@MikDra1

Posted

@TedJenkler

Thanks for response (much appreciated 😉), here is also one more question from me:

What do you mean by 'fully functional calculator without a mouse.' ?

I'd also what to tell you that I've taken a course in which we start with create react app for smaller projects, and as we progress we will start using vite instead of create react app😁

1

@TedJenkler

Posted

@MikDra1 It's just a fun bonus I played around with on my project: https://tipcalc-typescript-scss.netlify.app/

You can use the arrow keys to navigate and use the calculator. It’s not super important, but it’s a good advanced topic involving ref and DOM manipulation, and it’s really useful knowledge.

If I could go back in time, I would learn Vite first and Redux Toolkit, but Create React App works almost the same, except for the deployment. So, no harm really. Just noticed that I actually forgot the dollar sign in my project! I’d recommend using Redux as soon as you start any e-commerce project, but now I’m just rambling, haha.

Anyway, hope this clears things up!

Marked as helpful

0
MikDra1 5,610

@MikDra1

Posted

@TedJenkler

Thanks a lot 😊😉😃😀!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord