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.

<img src="calc.png" alt="smart calc pic"/>

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;
}
}

>> (opens in a new tab)”>Learn More>>>

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 InstallParagraph

Click on Link CrazyCoder>>>>>>>>>>

YouTube Video

https://www.youtube.com/watch?v=-MNC7GbmDBs

Sharing is caring…

Read More…

Please follow and like us:
0
20
fb-share-icon20
One thought on “Create Smart Calculator using HTML CSS and JS – HTML Project”

Leave a Reply

Your email address will not be published. Required fields are marked *