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

Calculator using eval method

Nicolas 250

@nicolas055

Desktop design screenshot for the Calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello guys!

I created this calculator using eval, but after I finished I read that eval has some security issues because it can be used to inject malicious code into a program. That is true? And if so, what other method should I use to get the calculator to work?

Community feedback

P
Chamu 12,970

@ChamuMutezva

Posted

Hi Nicolas

  • your html at the moment does not make your calcualtor accessible. It is very important to use semantic html to improve the accessibility of your project. Click events should not be placed on div elements - a div is a general element with no important meaning for assistive technology. That is to say , the operators and operands should be buttons. The theme switcher should be created using radio buttons
  • you only need to have one css reset stylesheet
  • font sizes are recommended to be in rems or em. Read more here Why font sizes should never be in px
  • this calculator should only accept numbers and the operators. At the moment I can enter a word or as many decimal points as I can, another reason why eval is not good to perform such calculations.
  • There is not enough space at the top and bottom of the calculator. Some of the content is cut off at the top.

Marked as helpful

1

Nicolas 250

@nicolas055

Posted

Hello ChamuMutezva. Thank you for your feedback!!!

I sent another solution to this challenge, this time I tried to follow your tips and redid all the calculator's features.

  • I used the math.js library to parse the result
  • I used the <button> tag to make the keyboard eventListeners.
  • I also fixed the space at the top and bottom of the calculator. Now the content is no longer cut off.
  • Converted all font size values from px to rem.

You helped me a lot. Thank you very much!!!

0

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