Html Project – Design smart calculator with html css and JS (Java Script) with free source code and YouTube video In this smart Calculator have input output addition subtraction multiply division etc.
Attach CSS File in Html , For Attach CSS file in <head> tag
<link rel=¨stylesheet¨ type=¨text/css¨ href=¨..\[folder_name]\[file_name].css¨>
<link rel=¨stylesheet¨ type=¨text/css¨ href=¨[file_name].css¨>
Attach (JS) Java Script File in html , JS file attache in <body> tag
<script src=”..\[folder_name]\[file_name].js”></script>
<script src=”[file_name].js”></script>
<script src=”[url_of_the_js_library]”></script>
Html File
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id=”calculator”>
<input id=”display” value =”0.0″ type=”text” disabled/>
<button onclick=”allclear()”>C</button>
<button onclick=”back()”><</button>
<button onclick=”add(‘%’)”>%</button>
<button onclick=”add(‘/’)”>÷</button>
<button onclick=”add(‘1’)”>1</button>
<button onclick=”add(‘2’)”>2</button>
<button onclick=”add(‘3’)”>3</button>
<button onclick=”add(‘*’)”>×</button>
<button onclick=”add(‘4’)”>4</button>
<button onclick=”add(‘5’)”>5</button>
<button onclick=”add(‘6’)”>6</button>
<button onclick=”add(‘-‘)”>-</button>
<button onclick=”add(‘7’)”>7</button>
<button onclick=”add(‘8’)”>8</button>
<button onclick=”add(‘9’)”>9</button>
<button onclick=”add(‘+’)”>+</button>
<button id=”theme” onclick=”theme()”> </button>
<button onclick=”add(‘0’)”>0</button>
<button onclick=”add(‘.’)”>.</button>
<button onclick=”calc()”>=</button>
</div>
</body>
</html>
CSS File
body {
margin:0;
}
:root{
–bg:#ececec;
–scolora:#d0d0d0;
–scolorb:#f6f6f6;
–tcolora:#aaa;
–tcolorb:#777;
}
#calculator{
position:absolute;
height:100vh;
width:100vw;
background:var(–bg);
overflow:hidden;
}
#display{
position:absolute;
height:20%;
width:100%;
background:var(–bg);
border-radius:0 0 5vw 5vw;
overflow:scroll;
line-height:30vh;
font-size:10vw;
color:var(–tcolorb);
text-align:right;
font-weight:bold;
border:0;
box-shadow:0 .7vw 1vw var(–scolora);
}
#theme{
background-image:url(“https://i.dlpng.com/static/png/6841170_preview.png”);
background-size:70%;
background-position:50%;
background-repeat:no-repeat;
}
button{
height:12vh;
width:20vw;
position:relative;
top:25vh;
border-radius:1vw;
border:0;
outline:none;
background-color:var(–bg);
box-shadow:.4vw .4vw .6vw var(–scolora), -.4vw -.4vw .6vw var(–scolorb);
font-size:7vw;
font-weight:bold;
color:var(–tcolora);
margin:1.3vh 2vw;
}
button:hover{
box-shadow:inset .5vw .5vw .8vw var(–scolora),inset -.5vw -.5vw .8vw var(–scolorb);
}
#theme{
background-image:url(“https://i.dlpng.com/static/png/6841170_preview.png”);
background-size:80%;
background-position:50%;
background-repeat:no-repeat;
}
JS File
alert(“Open Calculator “);
alert(” Let’s Go… 🙏”);
function add(x){
if(display.value == ‘0.0’){
display.value = “”;
}
display.value += x;
navigator.vibrate(20);
}
function calc(){
try{
display.value = eval(display.value);
navigator.vibrate(20);
}
catch{
display.style.color = “#f00”;
navigator.vibrate([105,50,105,50,105]);
setTimeout(function(){
display.value = ‘0.0’;
display.style.color = “var(–tcolorb)”;
},500);
}
}
var a = 1;
function back(){
navigator.vibrate(20);
display.value = display.value.substring(0,display.value.length-1);
}
function allclear(){
display.value = ‘0.0’;
navigator.vibrate(20);
}
function theme(){
navigator.vibrate(300);
switch(a){
case 0:
document.body.style.setProperty(“–bg”, “#ececec”);
document.body.style.setProperty(“–tcolora”, “#aaa”);
document.body.style.setProperty(“–tcolorb”, “#777”);
document.body.style.setProperty(“–scolora”, “#d0d0d0”);
document.body.style.setProperty(“–scolorb”, “#f6f6f6”);
a = 1;
break;
case 1:
document.body.style.setProperty(“–bg”, “#1B1B1B”);
document.body.style.setProperty(“–tcolora”, “#444”);
document.body.style.setProperty(“–tcolorb”, “#666”);
document.body.style.setProperty(“–scolora”, “#121212”);
document.body.style.setProperty(“–scolorb”, “#242424”);
a = 2;
break;
case 2:
document.body.style.setProperty(“–bg”, “#008080”);
document.body.style.setProperty(“–tcolora”, “#aaa”);
document.body.style.setProperty(“–tcolorb”, “#ccc”);
document.body.style.setProperty(“–scolora”, “#004c4c”);
document.body.style.setProperty(“–scolorb”, “#66b2b2”);
a = 3;
break;
case 3:
document.body.style.setProperty(“–bg”, “#189ad3”);
document.body.style.setProperty(“–tcolora”, “#ccc”);
document.body.style.setProperty(“–tcolorb”, “#eee”);
document.body.style.setProperty(“–scolora”, “#005073”);
document.body.style.setProperty(“–scolorb”, “#71c7ec”);
a = 4;
break;
case 4:
document.body.style.setProperty(“–bg”, “#555”);
document.body.style.setProperty(“–tcolora”, “#aaa”);
document.body.style.setProperty(“–tcolorb”, “#eee”);
document.body.style.setProperty(“–scolora”, “#222”);
document.body.style.setProperty(“–scolorb”, “#777”);
a = 5;
break;
case 5:
document.body.style.setProperty(“–bg”, “#ccac00”);
document.body.style.setProperty(“–tcolora”, “#ddd”);
document.body.style.setProperty(“–tcolorb”, “#fff”);
document.body.style.setProperty(“–scolora”, “#b29600”);
document.body.style.setProperty(“–scolorb”, “#e5c100”);
a = 0;
break;
}
}
Visit my Google Play Store Apps Click on this Link
Visit For Browser 5 G App On google Play Store>>>>>>>>>>
This My Creative App Click on DeepCrazyWorld App>>>>>>>>>>>
To Solve Your Math Calculation Math Solve App >>>>>
Spinner Bottle Game App>>>>>>>>>>>>>>>>>>>>>
This News Nation App News7on>>>>>>>>>>>>>>
Shopping App ZampKart >>>>>>>>>>>>>>>>>>>
Math Equation Solving App>>>>>>>>>>>>>>>>>>>
Event Basis Picture LovingCaring143 App>>>>>>>>>
Here This Blogger Site App to Explore Your Knowledge Download all this Apps By Google Play Store My Blogger Site App Download And Install Paragraph Design News android app Click Here.
Click on Link CrazyCoder>>>>>>>>>>