About Me

Design Beautiful Calculator By Using HTML,CSS And JavaScript

wasiii October 26, 2019

Design Beautiful Calculator By Using HTML,CSS And JavaScript :

HTML:
______________________________________________________

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>Calculator</title>
</head>
<body>
<div class="main-container">
<div class="mobile-container">
<div class="btn-0"></div>
<div class="btn-1 btn-2"></div>
<div class="btn-1 btn-3"></div>
<div class="camera"><div class="speaker"></div><div class="main-cam"></div></div>
<div class="calc">
<div class="dots-container" id="dots" >
<div class="dots"></div>
<div class="dots"></div>
<div class="dots"></div>
<div class="color-change" id="change" style="display:none">
<button class="col-0" id="dark">Dark</button>
<button class="col-1">Classic<button>
</div>
<div class="values">
<h3 id="value2"></h3>
</div>
<div class="values1">
<h3 id="value1">0</h3>
</div>
<div class="line"></div
<div >
<div class="buttons-container">
<button class="btn-top" id="totalClear" value="">AC</button>
<button class="btn-top" id="oneClear" value="">C</button>
<button class="btn-top" id="remainder" value="%">%</button>
<button class="btn-top" id="division" value="/">/</button>
</div>
<div class="buttons-container second">
<button class="btn-top2 numbers" id="seven" value="7">7</button>
<button class="btn-top2 numbers" id="eight" value="8">8</button>
<button class="btn-top2 numbers" id="nine" value="9">9</button>
<button class="btn-top" id="multiply" value="*">X</button>
</div>
<div class="buttons-container second">
<button class="btn-top2 numbers" id="four" value="4">4</button>
<button class="btn-top2 numbers" id="five" value="5">5</button>
<button class="btn-top2 numbers" id="six" value="6">6</button>
<button class="btn-top numbers" id="minus" value="-">-</button>
</div>
<div class="buttons-container second">
<button class="btn-top2 numbers" id="one" value="1">1</button>
<button class="btn-top2 numbers" id="two" value="2">2</button>
<button class="btn-top2 numbers" id="three" value="3">3</button>
<button class="btn-top" id="plus" value="+">+</button>
</div>
<div class="buttons-container second">
<button class="btn-top2" id="zero" value="0">0</button>
<button class="btn-top2" id="point" value=".">.</button>
<button class="btn-top2" id="equal" value="=">=</button>
</div>
<h2 class="dev">Developed by Wasim</h2>
</div>
</div>
</div>
</div>
</div>
<script>
var total="";
var minus=document.getElementById('minus');
var zero=document.getElementById('zero');
var one=document.getElementById('one');
var two=document.getElementById('two');
var three=document.getElementById('three');
var four=document.getElementById('four');
var five=document.getElementById('five');
var six=document.getElementById('six');
var seven=document.getElementById('seven');
var eight=document.getElementById('eight');
var nine=document.getElementById('nine');
var value1=document.getElementById('value1');
var value2=document.getElementById('value2');
var point=document.getElementById('point');
var plus=document.getElementById('plus');
var oneClear=document.getElementById('oneClear');
var equal=document.getElementById('equal');
var totalClear=document.getElementById('totalClear');
var multiply=document.getElementById('multiply');
var remainder=document.getElementById('remainder');
var division=document.getElementById('division');
var change=document.getElementById('change');
var dar=document.getElementsByClassName('col-0');
var dots=document.getElementById('dots');
var dark=document.getElementById('dark');
one.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
two.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
three.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
four.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
five.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
six.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
seven.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
eight.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
nine.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
zero.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
point.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
plus.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
minus.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
oneClear.onclick=function(){
total=total.substring(0,total.length-1);
value1.innerHTML=total;
}
equal.onclick=function(){
var ans=eval(total);
value1.innerHTML=ans;
value2.innerHTML=total;
}
totalClear.onclick=function(){
total=""
value1.innerHTML=0;
value2.innerHTML="";
}
multiply.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
remainder.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
division.onclick=function(){
total+=this.value;
value1.innerHTML=total;
}
       
</script>
</body>
</html>

CSS:
______________________________________________________

body{
margin:0px;
padding:0px;
background-color:#C08F29;


}
.main-container{
height:100%;
width:100%;
}
.mobile-container{
margin:10px auto;
background-color:white;
width:320px;
height:540px;
border-style:solid;
border-width:20px;
border-color:#0A0A0A;
border-radius:45px;
box-shadow: 2px 5px 20px 5px #000000b3;
}
.btn-1{
position:absolute;
margin-top:10px;
margin-left:-23px;
height:28px;
width:4px;
background-color:black;
}
.btn-0{
position:absolute;
margin-top:75px;
margin-left:-23px;
height:28px;
width:4px;
background-color:black;
}
.btn-2{
top:150px;
height:34px;
}
.btn-3{
top:196px;
height:34px;
}
.calc{
width:100%;
height:500px;
background-color:green;
border-style:none;
border-radius:24px;
background-color:#F4CC23;
margin-top:-6px;
}
.camera{
margin-top:-10px;
position:absolute;
margin-left:68px;
border-style:none;
border-bottom-left-radius:24px;
border-bottom-right-radius:24px;
height:23px;
width:185px;
background-color:black;
}
.speaker{
position:absolute;
height:6px;
width:66px;
margin-top:6px;
margin-left:55px;
border-radius:12px;
background-color:#4E4E4E;
background-color:#4E4E4E;
}
.main-cam{
height:9px;
width:9px;
background-color:#4E4E4E;
border-radius:50px;
margin-left:129px;
margin-top:5px;
}
.dots{
height:6px;
width:6px;
border-radius:6px;
background-color:black;
margin-bottom:4px;
}
.dots-container{
position:absolute;
margin-top:20px;
margin-left:40px;
cursor:pointer;
}
.color-change{
margin-top:-5px;
position:absolute;
padding:0px 10px 0px 10px;
background-color:white;
font-style:italic;
border-radius:10px;
}
.col-1{
font-size:13px;
font-family:lato;
margin-top:-15px;
}
.col-0{
font-size:13px;
font-family:lato;
}
.values{
position:absolute;
left:110px;
margin-top:-20px;
font-family:courier;
font-size:20px;
font-weight:100;
}
.values1{
position:absolute;
margin-top:0px;
left:0px;
text-align:right;
font-family:courier;
font-size:30px;
font-weight:100;
width:100%;
float:left;
}
.line{
position:absolute;
margin-top:90px;
width:270px;
height:1px;
margin-left:-13px;
background-color:black;
}
.buttons-container{

position:relative;
top:120px;
margin-left:-8px;
}
.btn-top{
height:50px;
width:50px;
border-radius:30px;
border-style:solid;
margin-left:8px;
font-family:lato;
font-weight:500;
background-color:;
border-color:#F5AB20;
border-width:1px;
background-color:#F5AB20;
color:white;
font-size:16px;
outline:none;
cursor:pointer;
}
.second{
margin-top:12px;
}
.btn-top2{
height:50px;
width:50px;
border-radius:30px;
border-style:solid;
margin-left:8px;
font-family:lato;
font-weight:500;
background-color:;
border-color:black;
border-width:1px;
background-color:#F4CC23;
color:white;
font-size:16px;
outline:none;
cursor:pointer;
}
#equal{
width:110px;
background-color:black;
}
.dev{
position:absolute;
top:480px;
left:43px;
font-family:lato;
font-size:15px;
font-weight:500;
}
_______________________________________________________________________________

Tags:

Post a Comment

0 Comments