Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

18th Task: Calculator App🧮🤓 Give it a try👈🏻✅✅😁

Rodrigo•480
@RodrigoHLC
A solution to the Calculator app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I'd been looking forward to working on this project for days, and I'm very happy with how quickly I completed the markup and CSS. The screen responsiveness works GREAT🙌🏻🙌🏻 Even the Javascript didn't take a huge amount of time. I think I completed about 90% of the thing in a workday. The other 10% was me leaving no stone unturned, planning for every possible scenario when writing input (e.g.: making sure it's not possible to write two operands together like "++", "/*", making sure you can't write something like "00000" or "0.03.2.0") and some things that were a little more difficult to fully figure out; as anyone who's programmed a calculator will tell you (this is my second time), the function for the Period tends to be the most annoying, head-scratching one🥴

Extra mile

  • Played a little with the box shadows on the buttons to make them look a little more - 3D and make them look like they're being pressed down.
  • Added a custom scrollbar to the calculator's screen in case the input gets too long.
  • Used eventListeners to make sure you can also use it with your keyboard, though this is a fairly standard "idea".
  • I did not use prefers-color-scheme but I did use localStorage to make sure the user's preferred color scheme is saved.

Issues I wasted a lot of time in the end trying to get the buttons to work on mobile, but I couldn't for-the-life-of-me get it to work, at least not on my Moto G7 Play (since I had to delete and re-deploy on Github everytime I made changes, I only tried to make the Number buttons responsive on mobile, but I couldn't do it). Any advice here will be highly appreciated. I tried using touchstart, touchend, onclick, and even changing the element for the calculator's screen from a <textarea> to an <input> element, but to no avail😤😤

Here's a relevant snippet of my code. numbers is a node list of <button> elements. Clicking works, tapping doesn't:

// EACH BUTTON HAS A value ATTRIBUTE SET TO ITS NUMBER
numbers.forEach(num => num.addEventListener("click",()=>{
    numberFunc(num.value)
}))

numbers.forEach(num => num.addEventListener("touchstart",(e)=>{
    e.preventDefault();
    numberFunc(num.value)
}))
Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Curtis Simpson•550
    @crsimpson5
    Posted over 1 year ago

    Hey Rodrigo,

    Great job on this! I love the 3d buttons, and it works great on my phone.

    Regarding mobile development: if you use VSCode and Live Server, you can connect to the server on your phone to see changes immediately. Here's a simple how-to: https://medium.com/@pavankapoor31/how-to-use-vs-code-live-server-local-host-on-mobile-phone-8b38a62117d2

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub