html css js
intermediate

Simple Calculator

This Simple Calculator App challenge will test your HTML, CSS and JS skills.

Brief

Your challenge is to build this Simple Calculator App and should meet following requirements:

  • The design should at least look like presented in the preview.
  • The app should be viewable in mobile and desktop screens.
  • Able to perform calculation given in the app.
  • Button hover states should feel like interactive elements.

You can use any tools you like to complete the challenge.

The design of the challenge is kept minimal. You can build your optimized version.

NOTE: It is highly recommended to first go through the challenge by yourself before checking the solution.

Prerequisites

You should have the basic knowledge of HTML, CSS and JS to complete this challenge.

Starter Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Coding Challenges | Calculator UI</title>

    <!-- Write your CSS below or feel free to create separate stylesheet -->
    <style>

      /* your css here */

    </style>
  </head>
  <body>

   <!-- your code here -->

  </body>
</html>

See Solution

Check the solution code here