Code of ios calculator
//*Html*//**//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="calculator">
<div class="nothing"></div>
<div class="result"><span>0</span></div>
<div class="keypad">
<button class="keys key1 clear" >AC</button>
<button class="keys key1 operator1">+/-</button>
<button class="keys key1 operator1" value="%">%</button>
<button class="keys key2 operator" value="÷">÷</button>
<button class="keys number" value="7" >7</button>
<button class="keys number" value="8">8</button>
<button class="keys number" value="9">9</button>
<button class="keys key2 operator" value="×">×</button>
<button class="keys number" value="4">4</button>
<button class="keys number" value="5">5</button>
<button class="keys number" value="6">6</button>
<button class="keys key2 operator" value="-">-</button>
<button class="keys number" value="1">1</button>
<button class="keys number" value="2">2</button>
<button class="keys number" value="3">3</button>
<button class="keys key2 operator" value="+">+</button>
<button class="keys zero number" value="0">0</button>
<button class="keys point" >.</button>
<button class="key2 equal">=</button>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
//*css*//
body{
height:fit-content;
width: fit-content;
background-image:url(iPhone_Lineup.jpg);
background-repeat: no-repeat;
background-attachment:scroll ;
background-size:auto;
background-position:center;
margin-left: auto;
margin-right: auto;
padding-top: 0;
}
.nothing{
height: 160px;
}
.calculator {
background-color: black;
border-radius: 75px;
padding: 3%;
width: 414px;
height: 896px;
}
.result{
height: 100px;
padding-bottom: 10px;
color: white;
font-size: 80px;
font-family: Arial, Helvetica, sans-serif;
text-align: right;
}
.keypad{
display: grid;
grid-template-rows: repeat(5, 1fr);
grid-template-columns: repeat(4, 1fr);
grid-gap:20px;
}
button{
border-radius: 100%;
width: 90%;
height: 80px;
border: none;
font-size: 40px;
align-items: center;
align-self: center;
cursor: pointer;
}
.result{
text-align: right;
}
.clear{
background-color: #9F9F9F;
}
.operator1{
background-color: #9F9F9F;
}
.key1:hover{
background-color: #fffefe ;
}
.operator, .equal{
color: white;
background-color: #F49B00;
}
.key2:hover{
background-color: #f7d292;
}
.number,.point{
color: white;
background-color: #676666;
}
.number:hover, .point:hover{
animation-duration: 1s;
background-color: #a6a6a6 ;
}
.zero{
grid-column: span 2;
width: 190px;
border-radius: 100px;
}
hr{
height: 3px;
width: 50%;
position: 50%;
color: white;
background-color: white;
border-radius: 50px;
}
Comments
Post a Comment