BigsonDev Logo
A revamped version of this project is available in my new application.

Calculator App

css
js
Build an application to cover math operations with dark/light modes.
Designed by
Milena Ulman
Difficulty
Adobe XD design is free. You can use this design for your portfolio/website without any limitations. Additionally, you can share the completed project wherever you want.
Note: All new designs will be coming through BigDevSoon with Figma. This one is considered a legacy design but will always be here.

Read me first

The goal of this project is to build a Calculator App similar to the design above.
Technologies & tools will be proposed down below but feel free to use different ones if you're more familiar with them. Have fun along the way.
Project requirements
  • The application looks similar to the design and is available for users through a link.
  • The calculator should be initialized with 0.
  • Previous operations should show above the output value (break line on long ones).
  • AC stands for "All Clear", it should clear previous operations, incoming operations as well as the output value and bring back Calculator to the initial state with 0.
  • C stands for "Clear", it should only delete the last entry.
  • Users should be able to input numbers and execute all the available operations (change signs, calculate percentage value, divide, multiply, subtract and add).
  • Users should be able to get the correct result by pressing the "=" operator and add a decimal by pressing "," (maximum one decimal in the number should be present).
  • The calculator shouldn't allow a number to begin with multiple zeros.
  • Watch out for other gotchas, e.g. multiple operations (always execute "number operation number", don't evaluate more than a single pair of numbers), round long decimals, don't allow "=" on empty input, don't let to divide by 0. You'll probably find more gotchas while coding 🙈.
Additional requirements
  • Users should be able to toggle between dark and light modes.
  • When something "wrong" happens, display a nice error message to the user. (e.g. when the user tries to divide by 0).
  • Add hover effects, animations, transitions. Experiment with it.
  • Add unit tests to your code, using e.g. jest.

How to start

In most cases, CodeSandbox will be the best place for starting out rapidly.
You could also use an IDE, VSCode for example, and create e.g. a GitHub repository with custom deployment. More about it in the "Build & Deploy" section.
First steps
  • Be Agile! Plan your work upfront either with Scrum or Kanban by creating e.g. Trello board for this project.
  • Open the design by clicking the button under the above image.
  • Get familiar with design, it contains all the assets (except icons sometimes - use e.g. fontawesome), CSS properties you'll need to use.
  • After deciding on either CodeSandbox or GitHub repo, set your project with initial files, directory structure (your own preference).
  • Nothing will stop you now. Don't forget to share a link once you completed the project!

Technologies & Tools

Core concepts

Stuck, can't progress?

Take a break, think about all the pieces you need to build for this project.
You can try out the BigDevSoon platform to maximize your learning effectiveness.

Build & Deploy

If you decided on CodeSandbox, there should be a "Share" button that you can use as a link for your completed project.
Otherwise, for simple, static projects (HTML, CSS, JavaScript) you can try GitHub Pages. For more complex deployments (React, etc.), Netlify or Vercel should be good. If the project has a little bit of Backend, try Heroku for it.

Share your solution

It would be amazing if you can tweet @BigsonDev with the link to the completed project and/or GitHub repo. All the mentees would love to see what you've built (and me too).
spread the word
Do you think this project is cool? Share it with someone! 👀