Stylish Basic Calculator in HTML, CSS & JavaScript with Source Code

Itcodingbaba

Welcome to Itcodingbaba once again, in this article we are gonna learn how to make a basic Calculator using HTML, CSS and JavaScript only, so read till the end and don't miss any code or you may get errors.

The great way to learn code is to create your own projects. If you want to become a best web creator, you must start developing projects asap. You can start by making a basic calculator, digital clock, or stopwatch as a beginner so with the time being you will learn alot, just do not give up.

You can make a basic calculator using HTML, CSS, and JavaScript. The calculator will Calculate some basic maths like calculating percentage, addition, subtraction, multiplication, and division.

Why this script?

It's a basic calculator

Adition subtractions, multiplication, division and more.

Smooth and easy code

Easy to reskin

Friendly code

Responsive design

How to make this code work?

You can create a one main folder that will contain the HTML, CSS and JavaScript files, Just name if whatever you want btw it would be better if you name it calculator. According to Naming convention the HTMl, CSS and JavaScript files are named index.html, Styles.css and script.js.

If you want all the code together like CSS and JavaScript in one HTML.

Then Create an html file named anything, e.g Index.html, open it up and Create a <style> Paste All CSS code here </style> and the style should be above </head>.

Create a <script>Paste JavaScript code here</script> and this script should be above </body>.

HTML Code:

This is the HTMl code for Stylish Basic Calculator, Create an index.html file and paste the following code there:

<!DOCTYPE html>

<html>

<head>

<title>Stylish Basic Calculator - itcodingbaba.blogspot.com</title>

</head>

<body>

</div>

</div>

</body>

</html>

CSS Code:

Here's the CSS code for basic Calculator, Create a styles.css file and paste the following code there:

body {

font-family: 'Open Sans', sans-serif;

background-color: #f2f2f2;

margin: 0;

}

.calculator {

background-color: #fff;

width: 300px;

margin: 50px auto;

border-radius: 5px;

box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);

display: grid;

grid-template-columns: repeat(4, 1fr);

grid-gap: 10px;

padding: 10px;

}

.display {

grid-column: span 4;

background-color: #f2f2f2;

border-radius: 5px;

display: flex;

justify-content: flex-end;

align-items: center;

padding: 10px;

}

.display #result {

font-size: 24px;

font-weight: bold;

}

.button {

background-color: #fff;

border: none;

border-radius: 5px;

padding: 10px;

font-size: 18px;

font-weight: bold;

color: #555;

cursor: pointer;

transition: all 0.2s ease-in-out;

}

.button:hover {

background-color: #eee;

}

.zero {

grid-column: span 2;

}

.clear {

color: #f00;

}

.clear:hover {

background-color: #f00;

color: #fff;

}

button:active {

transform: scale(0.95);

}

JavaScript Code:

At last this is the JavaScript for basic Calculator, Create a Script.js and paste the following code there:

// Select the display element

const display = document.getElementById('result');

// Initialize the calculation variables

let operand1 = '';

let operand2 = '';

let operator = null;

// Add a function to clear the display

function clearDisplay() {

operand1 = '';

operand2 = '';

operator = null;

display.textContent = '0';

}

// Add a function to update the display with the given value

function updateDisplay(value) {

display.textContent = value;

}

// Add a function to add a value to the display

function addToDisplay(value) {

if (operator === null) {

operand1 += value;

updateDisplay(operand1);

} else {

operand2 += value;

updateDisplay(operand2);

}

// itcodingbaba.blogspot.com

function calculate() {

let result = 0;

switch (operator) {

case '+':

result = parseFloat(operand1) + parseFloat(operand2);

break;

case '-':

result = parseFloat(operand1) - parseFloat(operand2);

break;

case '*':

result = parseFloat(operand1) * parseFloat(operand2);

break;

case '/':

result = parseFloat(operand1) / parseFloat(operand2);

break;

default:

return;

}

updateDisplay(result);

operand1 = result;

operand2 = '';

operator = null;

}

// itcodingbaba.blogspot.com

document.querySelectorAll('.button:not(.clear)').forEach(button => {

button.addEventListener('click', () => {

if (operator === null) {

operator = button.textContent;

} else {

calculate();

operator = button.textContent;

}

});

// Add an event listener to the clear button

document.querySelector('.clear').addEventListener('click', () => {

clearDisplay();

});

// Add an event listener to the equal button

document.querySelector('.button:last-of-type').addEventListener('click', () => {

calculate();

});

You have successfully made the basic stylish calculator using Html CSS and JavaScript this is a beginners code of you want to modify and make it more creative you can. Keep visiting our site for more scripts. Thanks and best of luck.

Newer
Older

Stylish Basic Calculator in HTML, CSS & JavaScript with Source Code

🔹About

#buttons=(Accept !) #days=(20)

Contact form

Stylish Basic Calculator in HTML, CSS & JavaScript with Source Code

You may like these posts

#buttons=(Accept !) #days=(20)

Contact form