Build a Simple HTML Calculator | Frontend Coding Challenge | Vanilla JavaScript | Machine Coding Round
@Yomesh Gupta

HTML/CSS/JavaScriptReactBeginner
605
Do you see value in our efforts?

Devtools Tech is a free platform for Frontend Engineers. It takes a lot of time, effort, and finanical resources to keep the platform running. If you see any value in our work and would like to support us then you can do using the following options.

InternationalDomestic

In this question, you need to build a simple HTML calculator that performs the following basic operations:

  1. Addition
  2. Subtraction
  3. Division
  4. Multiplication
  5. Modulo
  6. Bracket Computation
  7. Clear
  8. Decimal Operations

Demo:


Mockups

HTML Calculator Mockup


Styling Information

Colors

  • Body Background: #fdfdfd
  • Calculator Background: #2f3640
  • Numbers: #718093
  • Operators: #fbc531

Box Shadow

rgba(0, 0, 0, 0.35) 0px 5px 15px;


Points to remember

  1. It is imperative that candidate must write clean, modular, and easy to follow code.
  2. This is a beginner-friendly exercise where the candidate would be judged on code structure, attention to detail, and execution speed. Use the timer provided to measure how fast you completed the exercise.
  3. Take the mockup as frame of reference and use your creative sense to add more functionalities, enhance UI, and make it more feature rich.