 |
| Calculator using html css javascript |
In this article, we given a Calculator using html css javascript with source code to add on project or a practice. Try this project in your vs code to check how it works. We created Advanced Calculator using html, css and javascript . Let's go and check the source code.
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Calculator.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Add next file name as - script.js and copy the javascript code as given.
6) Then run the code or check the preview with code preview extension in vs code.
Calculator using html css javascript source code
Here we given a html, css and js source code of Calculator as given -
HTML
In HTML, we created a structure of the calculator with buttons. we added buttons to show a number for calculator and given a classes and functions to add css and javascript to the code for working of Calculator.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator using html css and javascript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<div class="display" id="display">0</div>
<div class="keys">
<button class="operator" onclick="appendToDisplay('.')">.</button>
<button class="operator" onclick="clearDisplay()">C</button>
<button class="operator" onclick="backspace()">←</button>
<button class="operator" onclick="appendToDisplay('/')">/</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button class="operator" onclick="appendToDisplay('*')">x</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button class="operator" onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button class="operator" onclick="appendToDisplay('+')">+</button>
<button onclick="appendToDisplay('0')">0</button>
<button class="equal-sign" onclick="calculate()">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS
In CSS, we given a advanced design to the Calculator. we've added a positions and colors to design it. Also, added a hover effect on buttons to make it more attractive.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
}
.calculator {
background-color: #333;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
transform-style: preserve-3d;
perspective: 1000px;
}
.display {
background-color: #444;
color: white;
font-size: 2em;
padding: 10px;
text-align: right;
border-radius: 5px;
margin-bottom: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.keys {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
transform-style: preserve-3d;
transform: rotateX(25deg);
}
button {
background-color: #666;
border: none;
color: white;
font-size: 1.5em;
padding: 15px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
button:hover {
background-color: #555;
transform: translateY(-3px);
}
button:active {
transform: scale(0.95);
}
.operator {
background-color: #ff9500;
}
.equal-sign {
background-color: #4cd964;
grid-column: span 2;
}
button:focus {
outline: none;
}
.calculator {
position: relative;
overflow: hidden;
}
.keys {
transform-style: preserve-3d;
}
button {
position: relative;
z-index: 1;
}
button:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 5px;
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
button:hover:before {
transform: scaleY(1);
}Javascript
In javascript, we added a functionality to calculate the actual values with accurately. It works as like as simple calculator which you are using on phone.
let displayValue = '0';
function updateDisplay() {
document.getElementById('display').textContent = displayValue;
}
function clearDisplay() {
displayValue = '0';
updateDisplay();
}
function backspace() {
displayValue = displayValue.slice(0, -1);
if (displayValue === '') {
displayValue = '0';
}
updateDisplay();
}
function appendToDisplay(value) {
if (displayValue === '0' && value !== '.') {
displayValue = '';
}
displayValue += value;
updateDisplay();
}
function calculate() {
try {
displayValue = eval(displayValue).toString();
} catch (error) {
displayValue = 'Error';
}
updateDisplay();
}
Output
Check this output of Calculator -
Hope this tutorial will help you to use Calculator using html css javascript with source code.if you have any confusion or query then you can contact us on our coding community.
Checkout more projects on our website and join our coding community on telegram to get more knowledge about coding.
Tags:
projects