Hello how are you You have brought a Stylish Working Calculator using HTML CSS & JavaScript for you today, which is absolutely free, this code has been provided by Hi.Coders. Which uploads many other codes for free. If you want, you can order some custom build codes or websites by contacting them. Contact Us
This calculator app/website is very well designed. Which is also easy to do. And you can do it for yourself or you can help the visitor to do it by including it in your tools website. And AdSense can either earn money from any other ADS network
You can do this like a tools website. This means that you can earn money by creating multiple tools websites. Here you will find codes of many tools which will be free and some will be paid. Mostly you will get to see free tools, then you can create a tools website and earn money.
If you want to make multiple tools website then you may have to do a lot of hard work because the HTML codes you will get here will not match with your themes, then you may have to change the class id of all, if the same class id will remain then your There may be a design change or some other design show.
Stylish Working Calculator using HTML CSS & JavaScript Source Code
This calculator is divided into 3 files, which reside in every tool code or in every website which is HTML, CSS, and javascript, here you will get to see all these files and you can put them on your website either in a separate one. You can make a page from it and put it in it.
First of all, you will need an HTML file, which you will find its code below, if you are creating a new page, then create a file by its name and in the last .HTML extension should come like index.html similarly calc.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calculator</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<section id="main">
<div id="calculator">
<div id="display"> <span class="result"></span> <span class="type">0</span> </div>
<div class="cal-pad">
<div class="row-con">
<div class="itemAC dark" title="Clear All">AC</div>
<div class="item-del dark" title="Del">⊲</div>
<div class="item/ dark num">/</div>
<div class="itemX dark num">*</div>
<div class="item7 num">7</div>
<div class="item8 num">8</div>
<div class="item9 num">9</div>
<div class="item- dark num">-</div>
<div class="item4 num">4</div>
<div class="item5 num">5</div>
<div class="item6 num">6</div>
<div class="item+ dark num">+</div>
<div class="item1 num">1</div>
<div class="item2 num">2</div>
<div class="item3 num">3</div>
<div class="item0 num">00</div>
<div class="item0 num">0</div>
<div class="item-dot num">.</div>
<div class="item-eq">=</div>
</div>
</div>
</div>
</section>
<script src="./main.js"></script>
</body>
</html>Second file you have to create for styling which will be css file then you have to create a new file named style.css and paste the following code in that file
@import "https://fonts.googleapis.com/css?family=Share+Tech+Mono";
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
body {
margin: 0;
font-family: "Share Tech Mono", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
background-color: #413f42;
}
a {
text-decoration: none;
color: rgb(66, 107, 255);
}
#main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
#calculator {
width: 23rem;
background-color: #2b2b2b;
box-shadow: 0 0 24px 10px rgba(0, 0, 0, 0.3);
}
#display {
width: 100%;
min-height: 6rem;
overflow-wrap: break-word;
font-family: "poppins";
background-color: rgb(24 24 24);
text-align: right;
color: #ffffff;
display: flex;
flex-direction: column;
padding: 0.4rem;
box-sizing: border-box;
position: relative;
}
.row-con {
display: grid;
height: 100%;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
}
.row-con>div {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(24, 24, 24);
color: #fff;
font-weight: bold;
border: 0.5px solid #333;
cursor: pointer;
font-size: 1.4rem;
}
.row-con>div:hover {
background-color: #444444;
border: 0.5px solid rgb(109, 109, 109);
}
.row-con>div:active {
transform: scale(0.9);
}
.cal-pad {
height: 25rem;
}
.item-eq {
background-color: #f5672c !important;
font-size: 1.8rem;
font-weight: bolder;
grid-area: 4/4/6/4;
}
.item-eq:hover {
background-color: #f57945 !important;
}
.dark {
background-color: rgb(37, 37, 37) !important;
}
.dark:hover {
background-color: rgb(58, 58, 58) !important;
}
.dark {
font-family: digital;
}
span.type {
font-size: 3rem;
position: absolute;
right: 5px;
top: 30px;
transition: all 0.2s;
}
.active {
top: 0px !important;
}
span.result {
font-size: 1.4rem;
display: block;
}
.itemAC {
background-color: rgb(172, 58, 58) !important;
font-family: "Share Tech Mono" !important;
font-weight: normal !important;
}
.itemAC:hover {
background-color: rgb(134, 65, 65) !important;
}
@media (max-width: 400px) {
#calculator {
width: 20rem;
}
.cal-pad {
height: 22rem;
}
}
@media (max-width: 300px) {
#calculator {
width: 15rem;
}
.cal-pad {
height: 18rem;
}
}After creating these two files, Stylish Working Calculator tools will be ready, you will need JavaScript to make them work, then you should create another file named main.js, remember that there should be no change in the name because this file is in index.html. will be included
const nums = document.querySelectorAll(".num");
const typed = document.querySelector(".type");
const result = document.querySelector(".result");
let val = "0";
nums.forEach((num) => {
num.addEventListener("click", (e) => {
typed.classList.remove("active");
let char = e.target.innerText;
if (val === "0" && !char.match(/[*+/.-]/gi)) {
val = char;
} else {
val += char;
}
if (val.match(/[0-9]+[+-\/*][+-\/*]+/gi)) {
const operator = val[val.length - 1];
val = val.substring(0, val.length - 2) + operator;
}
typed.innerText = val.replace(/\*/g, "×").replace(/\//g, "÷");
if (!val.match(/[0-9]+[+-\/*]$/gi)) {
try {
result.innerText = eval(val);
} catch (error) {
invalidExpression();
}
}
});
});
document.querySelector(".itemAC").addEventListener("click", () => {
typed.classList.remove("active");
typed.innerText = "0";
result.innerText = "";
val = "0";
});
document.querySelector(".item-del").addEventListener("click", () => {
typed.classList.remove("active");
val = val.substring(0, val.length - 1);
if (val) {
typed.innerText = val;
if (!val.match(/[0-9]+[+-\/*]$/gi)) {
try {
result.innerText = eval(val);
} catch (error) {
invalidExpression();
}
} else {
result.innerText = "";
}
} else {
typed.innerText = "0";
result.innerText = "";
}
});
document.querySelector(".item-eq").addEventListener("click", () => {
try {
val = eval(val).toString();
typed.classList.add("active");
typed.innerText = val;
result.innerText = "";
} catch (error) {
invalidExpression();
}
});
function invalidExpression() {
typed.innerText = "0";
result.innerText = "Invalid Expression";
val = "0";
}Creating all these files will make your Stylish Working Calculator tools ready. Now you can do it if you are facing any problems. You can download the tools code by copy-pasting the code or else from the download button given below.