Simple Calculator Using Html Css Javascript Code

Simple Calculator Using Html Css Javascript Code

6 min read Jun 18, 2024
Simple Calculator Using Html Css Javascript Code

Simple Calculator Using HTML, CSS, and JavaScript

This article will guide you through creating a simple calculator using HTML, CSS, and JavaScript. This project is perfect for beginners learning web development and understanding fundamental programming concepts.

HTML Structure (index.html)

First, we need to create the basic structure of our calculator using HTML.




    
    
    Simple Calculator
    


    

In this HTML code:

  • We create a calculator div to hold the entire calculator layout.
  • Inside, we have a display div for showing the input and result.
  • The buttons div contains all the calculator buttons, including numbers, operators, and special buttons like "C" for clear and "=" for calculation.
  • Each button has an onclick attribute that calls a JavaScript function when clicked.

CSS Styling (style.css)

Now, let's style our calculator using CSS.

.calculator {
    width: 300px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f5f5f5;
}

.display {
    height: 50px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    font-size: 20px;
    text-align: right;
    margin-bottom: 10px;
}

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

button {
    height: 40px;
    border: none;
    border-radius: 5px;
    background-color: #eee;
    font-size: 18px;
    cursor: pointer;
}

button:hover {
    background-color: #ddd;
}

.operator {
    background-color: #f0f0f0;
}

.clear {
    background-color: #f08080;
}

This CSS code provides basic styling for the calculator:

  • Sets the dimensions and appearance of the calculator container.
  • Styles the display area.
  • Uses a grid layout to arrange buttons in a 4x4 grid.
  • Styles the buttons, adding different colors for operators and the clear button.

JavaScript Logic (script.js)

Finally, let's add the JavaScript code to handle the calculator's functionality.

let display = document.querySelector('.display');
let currentInput = '';

function appendNumber(number) {
    currentInput += number;
    display.textContent = currentInput;
}

function appendOperator(operator) {
    currentInput += operator;
    display.textContent = currentInput;
}

function calculate() {
    try {
        let result = eval(currentInput);
        display.textContent = result;
        currentInput = result.toString(); 
    } catch (error) {
        display.textContent = 'Error';
    }
}

function clearDisplay() {
    currentInput = '';
    display.textContent = '';
}

This JavaScript code:

  • Selects the display element.
  • Uses currentInput to store the user's input.
  • Defines functions:
    • appendNumber: Appends numbers to the input.
    • appendOperator: Appends operators to the input.
    • calculate: Evaluates the expression and displays the result.
    • clearDisplay: Clears the display and resets the input.

Now, you have a functional simple calculator that allows users to perform basic arithmetic operations.

Improvements and Further Development

You can extend this basic calculator by adding:

  • More advanced operations: Include features like square root, percentage, memory functions, etc.
  • Error handling: Improve error handling to provide more informative messages to users.
  • Styling: Create a more visually appealing design using CSS.
  • Responsive design: Make the calculator work seamlessly across different screen sizes.

This project provides a strong foundation for learning web development. By experimenting with different features and functionalities, you can gain a deeper understanding of HTML, CSS, and JavaScript.