<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator Iphone Style </title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="iphone">
<table class="second-table">
<tr>
<td colspan="4" class="total"><span id="iphoneTotal"></span></td>
</tr>
<tr>
<td><button onclick="resetIphone()" class="aaa">AC</button></td>
<td><button onclick="menfi()" class="aaa">+/-</button></td>
<td><button onclick="faiz()" class="aaa">%</button></td>
<td><button onclick="bolme()" class="iphone-operation">/</button></td>
</tr>
<tr>
<td><button onclick="sec(7)">7</button></td>
<td><button onclick="sec(8)">8</button></td>
<td><button onclick="sec(9)">9</button></td>
<td><button onclick="vurma()" class="iphone-operation">X</button></td>
</tr>
<tr>
<td><button onclick="sec(4)">4</button></td>
<td><button onclick="sec(5)">5</button></td>
<td><button onclick="sec(6)">6</button></td>
<td><button onclick="cixma()" class="iphone-operation">-</button></td>
</tr>
<tr>
<td><button onclick="sec(1)">1</button></td>
<td><button onclick="sec(2)">2</button></td>
<td><button onclick="sec(3)">3</button></td>
<td><button onclick="toplama()" class="iphone-operation">+</button></td>
</tr>
<tr>
<td colspan="2"><button onclick="sec(0)" class="zero">0</button></td>
<td><button onclick="noqte()">,</button></td>
<td><button onclick="neticeIphone()" class="iphone-operation">=</button></td>
</tr>
</table>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #d3d4cf;
}
.second-table{
width: 500px;
height: 700px;
background-color: #000;
color: #fff;
font-size: 28px;
text-align: center;
font-weight: 600;
font-family: Arial, Helvetica, sans-serif;
transform: scale(0.7);
box-shadow: 0px 10px 10px -5px black;
}
.second-table{
padding: 20px;
}
.second-table tr td{
width: 100px;
height: 100px;
}
.second-table .total{
background-color: #000;
border-radius: 0;
text-align: right;
padding-right: 20px;
}
.zero{
width: 200px;
height: 90px;
border-radius: 50px;
}
button{
border-radius: 100%;
width: 95px;
height: 95px;
background-color: #333333;
border: 0;
color: #fff;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
outline: none;
}
button:hover{
background-color: #5b5a5a;
cursor: pointer;
}
.aaa{
background-color: #a5a5a5;
color: #000;
}
.aaa:hover{
background-color: #efe7e7;
}
.iphone-operation{
background-color: #fe9e09;
}
.iphone-operation:hover{
background-color: #ffc366;;
}
.second-table .total{
font-size: 34px;
}
// Süleymalı Fuad
// Iphone Calculator
function sec(nomre) {
reqem = document.getElementById("iphoneTotal").innerHTML;
reqem = reqem + nomre;
document.getElementById("iphoneTotal").innerHTML = reqem;
}
function menfi() {
reqem = document.getElementById("iphoneTotal").innerHTML;
reqem = "-" + reqem;
document.getElementById("iphoneTotal").innerHTML = reqem;
}
function faiz() {
reqem = document.getElementById("iphoneTotal").innerHTML;
reqem = reqem * 1 / 100;
document.getElementById("iphoneTotal").innerHTML = reqem;
}
function noqte() {
reqem = document.getElementById("iphoneTotal").innerHTML
reqem = reqem + "."
document.getElementById("iphoneTotal").innerHTML = reqem;
}
function resetIphone() {
reset = document.getElementById("iphoneTotal").innerHTML
reset = "";
document.getElementById("iphoneTotal").innerHTML = reset;
}
function azaltReqemi() {
reqem = document.getElementById("iphoneTotal").innerHTML
document.getElementById("iphoneTotal").innerHTML = reqem.substring(0, reqem.length - 1);
} function vurma() {
reqem = document.getElementById("iphoneTotal").innerHTML
reqem = reqem + "*"
document.getElementById("iphoneTotal").innerHTML = reqem;
}
function bolme() {
reqem = document.getElementById("iphoneTotal").innerHTML
reqem = reqem + "/"
document.getElementById("iphoneTotal").innerHTML = reqem;
}
function cixma() {
reqem = document.getElementById("iphoneTotal").innerHTML
reqem = reqem + "-"
document.getElementById("iphoneTotal").innerHTML = reqem;
}
function toplama() {
reqem = document.getElementById("iphoneTotal").innerHTML
reqem = reqem + "+"
document.getElementById("iphoneTotal").innerHTML = reqem;
}
function yoxlama() {
if (isNaN(eval(neticemiz)) !== false) {
alert("Səhflik var")
}
}
function neticeIphone() {
neticemiz = document.getElementById("iphoneTotal").innerHTML
yoxlama();
document.getElementById("iphoneTotal").innerHTML = eval(neticemiz)
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.