Signin

/ @kheersagar / Creating a responsive calculator with HTML, CSS, and JavaScript

3 Oct 2024
Next: Creating a responsive image slider with HTML, CSS, and JavaScript

Creating a responsive calculator with HTML, CSS, and JavaScript

Calculators are an essential tool that everyone needs in their daily life. In today's digital era, it is effortless to create a calculator using HTML, CSS, and JavaScript. In this blog post, we will learn how to create a responsive calculator using these three languages.

Before we start, let's have a quick overview of what HTML, CSS, and JavaScript are and their roles in creating a responsive calculator.

HTML stands for HyperText Markup Language, and it is used for creating the structure of a web page. CSS stands for Cascading Style Sheets, and it is used for styling the web page. JavaScript is a scripting language that is used for creating interactive web pages.

Now let's dive into creating a responsive calculator step by step.

Setting up the HTML Structure

To start with, we need to set up the HTML structure. We will create a form element and add input fields for displaying the results and taking the user input. Here is the HTML code:

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive Calculator</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <form>
      <input type="text" id="result" disabled>
      <br>
      <input type="button" value="1" onclick="addToInput('1')">
      <input type="button" value="2" onclick="addToInput('2')">
      <input type="button" value="3" onclick="addToInput('3')">
      <input type="button" value="+" onclick="addToInput('+')">
      <br>
      <input type="button" value="4" onclick="addToInput('4')">
      <input type="button" value="5" onclick="addToInput('5')">
      <input type="button" value="6" onclick="addToInput('6')">
      <input type="button" value="-" onclick="addToInput('-')">
      <br>
      <input type="button" value="7" onclick="addToInput('7')">
      <input type="button" value="8" onclick="addToInput('8')">
      <input type="button" value="9" onclick="addToInput('9')">
      <input type="button" value="*" onclick="addToInput('*')">
      <br>
      <input type="button" value="0" onclick="addToInput('0')">
      <input type="button" value="." onclick="addToInput('.')">
      <input type="button" value="C" onclick="clearInput()">
      <input type="button" value="/" onclick="addToInput('/')">
      <br>
      <input type="button" value="=" onclick="calculateResult()">
    </form>
    <script src="script.js"></script>
  </body>
</html>

In this code, we have created a form element and added input fields for displaying the result and taking user input. We have also added buttons for different mathematical operations.

Adding CSS Styling

Now that we have created the HTML structure, we need to add CSS styling to make it look good. Here is the CSS code:

input[type="button"] {
  background-color: #f1f1f1;
  border: none;
  color: black;
  width: 50px;
  height: 50px;
  font-size: 20px;
  margin: 5px;
  cursor: pointer;
  transition: all 0.2s;
}

input[type="button"]:hover {
  background-color: #ddd;
}

#result {
  width: 200px;
  height: 50px;
  font-size: 30px;
  text-align: right;
  margin: 10px;
  padding: 5px;
  border-radius: 5px;
  border: none;
  background-color: #f1f1f1;
}

In this code, we have added styling to the input buttons and the result field. We have set the background color, font size, width, and height of the buttons. We have also added hover effect to the buttons to give them a smooth transition when hovering over them. For the result field, we have set the width, height, font size, margin, and padding to make it look good. We have also set the border-radius to give it a rounded corner and the text-align property to align the text to the right.

Writing JavaScript Functions

Now that we have set up the HTML structure and added CSS styling, we need to write JavaScript functions to perform the calculator's mathematical operations. Here is the JavaScript code:

let input = "";

function addToInput(value) {
  input += value;
  document.getElementById("result").value = input;
}

function clearInput() {
  input = "";
  document.getElementById("result").value = input;
}

function calculateResult() {
  let result = eval(input);
  document.getElementById("result").value = result;
  input = "";
}

In this code, we have created three functions. The first function addToInput is called when the user clicks on any of the input buttons. This function takes the value of the clicked button and adds it to the input variable. The input variable stores the user's input.

The second function clearInput is called when the user clicks on the "C" button. This function clears the input variable and sets the result field to an empty string.

The third function calculateResult is called when the user clicks on the "=" button. This function evaluates the input variable using the eval function and stores the result in the result variable. It then sets the result field to the value of the result variable and clears the input variable.

Testing the Calculator

Now that we have written the HTML, CSS, and JavaScript code, it's time to test the calculator. Open the HTML file in your web browser and click on the buttons to test the calculator's functionality.

Making the Calculator Responsive

Finally, we need to make the calculator responsive so that it works on different devices with different screen sizes. To make the calculator responsive, we can use CSS media queries to adjust the font size and button width according to the screen size. Here is the updated CSS code:

@media (max-width: 600px) {
  input[type="button"] {
    width: 30px;
    height: 30px;
    font-size: 14px;
    margin: 2px;
  }
  
  #result {
    width: 150px;
    height: 30px;
    font-size: 20px;
    margin: 5px;
  }
}

In this code, we have used a media query to adjust the button size and font size when the screen size is less than 600px. This will ensure that the calculator works well on small devices like mobile phones.

Here is a combined and live example of a calculator created using HTML, CSS & JavaScript

<!doctype html>
<html>
  <head>
    <title>Responsive Calculator</title>
    <style>
      input[type="button"] {
        background-color: #f1f1f1;
        border: none;
        color: black;
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin: 5px;
        cursor: pointer;
        transition: all 0.2s;
      }

      input[type="button"]:hover {
        background-color: #ddd;
      }

      #result {
        width: 200px;
        height: 50px;
        font-size: 30px;
        text-align: right;
        margin: 10px;
        padding: 5px;
        border-radius: 5px;
        border: none;
        background-color: #f1f1f1;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="text" id="result" disabled />
      <br />
      <input type="button" value="1" onclick="addToInput('1')" />
      <input type="button" value="2" onclick="addToInput('2')" />
      <input type="button" value="3" onclick="addToInput('3')" />
      <input type="button" value="+" onclick="addToInput('+')" />
      <br />
      <input type="button" value="4" onclick="addToInput('4')" />
      <input type="button" value="5" onclick="addToInput('5')" />
      <input type="button" value="6" onclick="addToInput('6')" />
      <input type="button" value="-" onclick="addToInput('-')" />
      <br />
      <input type="button" value="7" onclick="addToInput('7')" />
      <input type="button" value="8" onclick="addToInput('8')" />
      <input type="button" value="9" onclick="addToInput('9')" />
      <input type="button" value="*" onclick="addToInput('*')" />
      <br />
      <input type="button" value="0" onclick="addToInput('0')" />
      <input type="button" value="." onclick="addToInput('.')" />
      <input type="button" value="C" onclick="clearInput()" />
      <input type="button" value="/" onclick="addToInput('/')" />
      <br />
      <input type="button" value="=" onclick="calculateResult()" />
    </form>
    <script>
      let input = "";

      function addToInput(value) {
        input += value;
        document.getElementById("result").value = input;
      }

      function clearInput() {
        input = "";
        document.getElementById("result").value = input;
      }

      function calculateResult() {
        let result = eval(input);
        document.getElementById("result").value = result;
        input = "";
      }
    </script>
  </body>
</html>
Live Preview

Conclusion

In this blog post, we have learned how to create a responsive calculator using HTML, CSS, and JavaScript. We have set up the HTML structure, added CSS styling to make it look good, and written JavaScript functions to perform the calculator's mathematical operations. We have also made the calculator responsive using CSS media queries. You can customize the calculator's functionality and styling to meet your specific needs. With this project, you have learned the basics of web development and have built a useful tool that you can use to perform mathematical calculations. Happy coding!

Next: Creating a responsive image slider with HTML, CSS, and JavaScript

You may also like

Using media queries to make a website responsive with HTML and CSS

This article covers responsive web design with media queries in HTML...

Continue reading

Creating a Responsive Timeline with HTML, CSS, and JavaScript

Create a responsive timeline with HTML, CSS, and JavaScript: display...

Continue reading

Building a responsive accordion with HTML, CSS, and JavaScript

In this tutorial, we will learn how to build a responsive accordion ...

Continue reading