create a calculator using html css js

Hey, I am Ajink, and today in this blog, we’re going to create a simple yet functional calculator using HTML, CSS, and JavaScript. This calculator will perform basic arithmetic operations, providing a user-friendly interface for mathematical calculations.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Simple Calculator</title>
</head>
<body>
  <div class="calculator-container">
    <input type="text" id="display" readonly>
    <div class="buttons">
      <button onclick="clearDisplay()">C</button>
      <button onclick="appendToDisplay('7')">7</button>
      <button onclick="appendToDisplay('8')">8</button>
      <button onclick="appendToDisplay('9')">9</button>
      <button onclick="appendToDisplay('/')">/</button>
      <button onclick="appendToDisplay('4')">4</button>
      <button onclick="appendToDisplay('5')">5</button>
      <button onclick="appendToDisplay('6')">6</button>
      <button onclick="appendToDisplay('*')">*</button>
      <button onclick="appendToDisplay('1')">1</button>
      <button onclick="appendToDisplay('2')">2</button>
      <button onclick="appendToDisplay('3')">3</button>
      <button onclick="appendToDisplay('-')">-</button>
      <button onclick="appendToDisplay('0')">0</button>
      <button onclick="appendToDisplay('.')">.</button>
      <button onclick="calculateResult()">=</button>
      <button onclick="appendToDisplay('+')">+</button>
    </div>
  </div>
  <script src="app.js"></script>
</body>
</html>

HTML Code Explanation:

  • The HTML structure includes an input field for displaying the calculator’s input and result, and a set of buttons for digits, operators, and actions.

CSS Code:

body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.calculator-container {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

#display {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 20px;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

button {
  padding: 10px;
  font-size: 18px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #3498db;
  color: #fff;
}

CSS Code Explanation:

  • The CSS provides styling for the calculator container, display input field, and buttons.

JavaScript Code:

let display = document.getElementById('display');

function appendToDisplay(value) {
  display.value += value;
}

function clearDisplay() {
  display.value = '';
}

function calculateResult() {
  try {
    display.value = eval(display.value);
  } catch (error) {
    display.value = 'Error';
  }
}

JavaScript Code Explanation:

  • The JavaScript code defines functions for appending values to the display, clearing the display, and calculating the result using the eval function.
  • Error handling is included to display “Error” in case of invalid calculations.

Conclusion:

In this blog, we successfully built a simple calculator using HTML, CSS, and JavaScript. Users can perform basic arithmetic operations with a user-friendly interface. Don’t forget to subscribe to my YouTube channel at youtube.com/@ajink21 for more exciting tutorials.

Thanks for reading, and if you have any doubts, feel free to comment!

Related Articles

Responses

Your email address will not be published. Required fields are marked *