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

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

YouTube Video

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

Sharing is caring…

Read More

Categories: Create Smart Calculator

Avatar

DeepCrazyWorld

Hey, I'm Deepika a professional blogger, web designer, Android developer and software engineer. I like to gain every type of knowledge that's why i have done many courses in different fields like engineering and technology. I love thrills and travelling to new places and hills.

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x