<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="calccss.css">
<script src="calcjs.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.cdnfonts.com/css/calculator" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<!-- https://www.fontspace.com/pixeloid-font-f69232 -->
<link rel="stylesheet" href="https://www.fontspace.com/pixeloid-font-f69232">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
</head>
<body onload="clickbtn()">
<h1>Basic Calculator</h1>
<div class="calcBody">
<div id="topBody">
<div id="screen" value="a"></div>
<span id="brand"> <p style="font-family: 'Pacifico', cursive;">Shaji</p>
</span>
<div id="result"> Result:
</div>
</div>
<div id="bottomBody">
<div id="number">
<div class="calcno" id="7" onclick="store('7')">7</div>
<div class="calcno" id="8" onclick="store('8')">8</div>
<div class="calcno" id="9" onclick="store('9')">9</div>
<div class="calcno" onclick="store('+')" id="plus">
+
</div>
<div class="calcno" id="4" onclick="store('4')">4</div>
<div class="calcno" id="5" onclick="store('5')">5</div>
<div class="calcno" id="6" onclick="store('6')">6</div>
<div class="calcno" onclick="store('-')" id="minus">-
</div>
<div class="calcno" id="1" onclick="store('1')">1</div>
<div class="calcno" id="2" onclick="store('2')">2</div>
<div class="calcno" id="3" onclick="store('3')">3</div>
<div class="calcno" id="product" onclick="store('x')">
*
</div>
<div class="calcno" id="0" onclick="store('0')">0</div>
<div class="calcno" id="00" onclick="store('00')">00</div>
<div class="calcno" id="dot" onclick="store('.')">.</div>
<div class="calcno" id="division" onclick="store('/')">
/</div>
<div class="calcno" id="clr" onclick="store('c')">clr</div>
<div class="calcno" id="percentage" onclick="store('%')">%</div>
<!-- <div class="calcno" id="do">.</div> -->
<div class="calcno" id="enter" onclick="calc('e')">Enter</div>
</div>
</div>
</div>
</div>
<h1 style="font-size: 20px; float:right; margin-right:10%; margin-top:-10%;
text-shadow: 10px 20px 3px rgb(3, 3, 3); color:rgb(224, 224, 224);">made by Shaji</h1>
</body>
</html>@font-face {
font-family: cal;
src: url("icons/pixeloid-font/PixeloidSans-JR6qo.ttf");
}
body{
/* overflow: hidden; */
font-family: 'Pacifico', cursive;
/* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
margin: 0px;
padding: 0px;
color:grey;
background-color: black;
background-image: linear-gradient(59deg,rgb(7, 11, 7) ,rgb(0, 0, 0),rgb(58, 58, 58));
/* background-image: url(/icons/abstract1.jpg); */
background-repeat: no-repeat;
/* backdrop-filter: blur(20px); */
/* background-blend-mode:lighten; */
/* filter:brightness(1); */
background-position: center;
background-size: cover;
width: 100%;
height: 110vh;
}
h1{
text-align: center;
font-family: 'Pacifico', cursive;
font-size: 40px;
color:rgb(123, 119, 63);
font-weight: 900;
/* text-shadow: 2px 4px white; */
text-shadow: 10px 15px 3px rgb(0, 0, 0);
}
.calcBody{
transform: scale(0.8);
padding: 10px;
background-color: #000000;
color:rgb(128, 128, 128);
background-image: linear-gradient(45deg,rgb(0, 0, 0),rgb(16, 15, 15),rgb(42, 41, 41),rgb(60, 60, 60));
backdrop-filter: blur(10px);
width:300px;
margin: auto;
margin-top: -50px;
border-radius: 20px;
border-top:5px solid rgb(91, 90, 90);
border-right:4px solid rgb(100, 102, 100);
box-shadow: 10px 2px 50px rgb(0, 0, 0)
,0px -2px 4px 3px rgb(42, 42, 42),
inset 20px -10px 10px rgb(0, 0, 0),
inset 20px 15px 10px rgb(69, 69, 69),
/* top and R */
inset -20px 10px 10px rgb(62, 62, 62),
inset -20px 1px 10px rgb(143, 144, 142)
;
}
#number{
display: grid;
padding: 10px;
cursor: pointer;
grid-template-columns: auto auto auto auto;
}
.calcno{
width: 20px;
height: 20px;
font-family: 'Pacifico', cursive;
font-size: 20px;
text-align: center;
align-content: center;
padding: 20px;
margin:5px;
text-align: center;
/* background-color: #3b969f; */
/* background-image: linear-gradient( #24646a, #b9e5e9); */
border-radius: 5%;
/* border: 1px solid rgb(7, 7, 7); */
border-top: 2px solid rgb(71, 70, 70);
border-right: 2px solid rgb(28, 28, 28);
background-image: linear-gradient(45deg,rgb(35, 35, 35),rgb(23, 23, 23),black);
box-shadow: 3px -2px 5px rgb(8, 8, 8),
inset -2px 2px 3px rgb(0, 0, 0),
2px -1px 4px rgb(0, 0, 0) ,
inset -5px 2px 4px rgb(26, 26, 26),
-8px 8px 10px rgb(0, 0, 0);
}
.calcno:hover{
border-top:0px solid rgb(6, 6, 6);
border-right: 0px solid rgb(0, 0, 0);
box-shadow: 2px 2px 0px rgb(0, 0, 0),
inset 5px 5px 10px rgb(0, 0, 0),
2px -1px 4px rgb(0, 0, 0) ,
inset -1px 2px 4px rgb(0, 0, 0),
3px 3px 4px rgb(3, 3, 3);
color:rgb(96, 96, 96);
font-size: small;
text-align: center;
}
#plus,#minus,#product,#division{
margin-left: -12%;
border-radius: 50%;
/* background-color: #C92C6D; */
background-image: linear-gradient( #020101, #4e4d4d);
border: 0.5px solid rgb(58, 57, 57);
box-shadow: 2px -2px 4px rgb(0, 0, 0),
inset -2px -2px 3px rgb(30, 30, 30),
2px 3px 4px rgb(11, 11, 11) ,
inset -2px 3px 4px rgb(107, 106, 106);
}
#plus:hover,:focus{
background-image: linear-gradient( #020101, #3b3a3a);
border: 0px solid rgb(123, 122, 122);
box-shadow: 1px -1px 2px rgb(126, 126, 126),
inset -2px -2px 3px rgb(0, 0, 0),
inset 5px 3px 4px rgb(10, 10, 10) ,
inset -2px 3px 4px rgb(9, 8, 8);
font-size: small;
}
#minus:hover,:focus{
background-image: linear-gradient( #020101, #3b3a3a);
border: 0px solid rgb(123, 122, 122);
box-shadow: 1px -1px 2px rgb(126, 126, 126),
inset -2px -2px 3px rgb(0, 0, 0),
inset 5px 3px 4px rgb(10, 10, 10) ,
inset -2px 3px 4px rgb(9, 8, 8);
font-size: small;
}
#product:hover,:focus{
background-image: linear-gradient( #020101, #3b3a3a);
border: 0px solid rgb(123, 122, 122);
box-shadow: 1px -1px 2px rgb(126, 126, 126),
inset -2px -2px 3px rgb(0, 0, 0),
inset 5px 3px 4px rgb(10, 10, 10) ,
inset -2px 3px 4px rgb(9, 8, 8);
font-size: small;
}
#division:hover,:focus{
background-image: linear-gradient( #020101, #3b3a3a);
background-image: linear-gradient( #020101, #3b3a3a);
border: 0px solid rgb(123, 122, 122);
box-shadow: 1px -1px 2px rgb(126, 126, 126),
inset -2px -2px 3px rgb(0, 0, 0),
inset 5px 3px 4px rgb(10, 10, 10) ,
inset -2px 3px 4px rgb(9, 8, 8);
font-size: small;
}
#enter{
width:100%;
grid-column: 3;
color: rgb(152, 145, 145);
border-top: 3px solid rgb(57, 56, 56);
border-right: 2px solid rgb(28, 28, 28);
background-image: linear-gradient(45deg,rgb(35, 35, 35),rgb(23, 23, 23),black);
box-shadow: 3px -2px 5px rgb(8, 8, 8),
inset -2px 2px 3px rgb(0, 0, 0),
2px -1px 4px rgb(0, 0, 0) ,
inset -5px 2px 4px rgb(26, 26, 26),
-8px 8px 10px rgb(0, 0, 0);
font-size: small;
}
#enter:hover{
border-top: 0px solid rgb(57, 56, 56);
border-right: 0px;
5px 5px 10px rgb(0, 0, 0),
2px -1px 4px rgb(0, 0, 0) ,
inset -1px 2px 4px rgb(0, 0, 0),
3px 3px 4px rgb(3, 3, 3);
}
img{
height: 20px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#screen{
padding: 10px;
height: 40px;
margin: 10px;
font-size: xx-large;
text-align:right;
text-shadow: 4px 3px 3px rgb(23, 23, 23);
filter:sepia(1) opacity(2);
font-family: 'cal',sans-serif;
background-color :brown;
background-blend-mode:soft-light;
border-radius: 5px;
color: rgb(4, 23, 3);
box-shadow: inset -10px 8px 7px black;
border-bottom:2px solid #020101;
border-left:2px solid #020101;
background-image: url("icons/screen.jpeg");
background-size:550px;
background-position: center;
}
#brand{
font-size:1rem;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
position: relative;
left:30px;
top:35px;
color:rgb(81, 79, 79);
}
#result{
background-color: rgb(124, 124, 124);
text-shadow: 2px 2px 3px rgb(27, 27, 27);
box-shadow: inset -3px 4px 3px rgb(0, 0, 0);
border-left: 1px groove black;
border-bottom: 0.2px groove black;
margin-top: 50px;
overflow: hidden;
font-family: 'cal',sans-serif;
padding: 10px;
background-image: url("icons/screen.jpeg");
background-size: 500px;
color: rgb(4, 23, 3);
filter:sepia(0.9) opacity(1) brightness(0.5) ;
background-blend-mode:soft-light;
font-family: 'cal',sans-serif;
margin: 10px;
font-size:20px;
width: 40%;
margin-left:50%;
border-radius: 15px;
}
@media only screen and (max-width: 500px) {
.calcBody{
transform: scale(0.5);
}
h1{
transform: scale(0.5);
}
}function calc(a){
// var x;
// var y;
// var res;
// if (a!='+'){
// x=a;
// }
if (a=='e'){
var res = store().replace(new RegExp("[a-wA-W]","gm"),"");
}
// store()=null;
store("");
if(res.includes("+")){
// for sum
const sumarr = res.split("+");
// alert(sumarr);
let sum=parseInt(0);
for (let i in sumarr){
// let x=parseInt(i);
// alert(i);
sum=sum+parseInt(sumarr[i]);
}
document.getElementById("result").innerHTML+=`${sum}`;
}
else if(res.includes("-")){
// for minus
const diffarr = res.split("-");
let diff=diffarr[0];
for (let i in diffarr){
if (i>0){
diff-=parseInt(diffarr[i]);
}
}
document.getElementById("result").innerHTML+=diff;
}
else if(res.includes("x")){
//for multiplication
const mularr = res.split("x");
let mul=1;
for (let i in mularr){
mul*=parseInt(mularr[i]);
}
document.getElementById("result").innerHTML+=mul;
}
// for division
else if (res.includes("/")){
const divarr = res.split("/");
let div=1;
for (let i in divarr){
div/=parseInt(divarr[i]);
}
document.getElementById("result").innerHTML+=div;
}
else{
alert("wrong input");
document.getElementById("result").innerHTML="Result: Wrong input";
}
}
// var a=null;
document.getElementById("screen").value="";
function store(arg2){
if (arg2!=""){
document.getElementById("screen").value+=arg2;
}else{
document.getElementById("screen").value="";
}
// a=a+arg2;
if (arg2!="" && arg2!=undefined ){
document.getElementById("screen").innerHTML+=arg2;
}
if(arg2=='c'){
document.getElementById("result").innerHTML="Result:";
document.getElementById("screen").innerHTML="";
return (null);
}
// alert(a);
return (document.getElementById("screen").value);
}
function clickbtn(){
document.addEventListener('keyup', (event) => {
var name = event.key;
var code = event.code;
document.getElementById(name).style.backgroundColor="green";
setTimeout(10);
document.getElementById(name).style.backgroundColor="aqua";
// Alert the key name and key code on keydown
// alert(name);1
}, false);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.