<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title> JS + CSS Calculator</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="calculator">
<div class="calculator__top">
<h1>Calcul</h1>
<input type="text" class="calculator__top--display" value="" disabled/>
</div>
<div class="calculator__middle">
<div class="calculator__middle--top"></div>
<div class="calculator__middle--junction"></div>
<div class="calculator__middle--bottom"></div>
</div>
<div class="calculator__bottom">
<button type="button" class="calculator__bottom--item"><div class="cursor"></div></button>
<button type="button" class="calculator__bottom--item"><div class="cursor"></div></button>
<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="this">THIS</button>
<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="is">IS</button>
<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="like">LIKE</button>
<button type="button" class="calculator__bottom--item item-grey-big" data-action="arrow" value=";-)">→</button>
<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="an">AN</button>
<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="old">OLD</button>
<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="calc">CALC</button>
<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="ula">ULA</button>
<button type="button" class="calculator__bottom--item item-grey-small" data-action="punchline" value="tor">TOR</button>
<button type="button" class="calculator__bottom--item item-grey-big" data-action="squareRoot" value="">√</button>
<button type="button" class="calculator__bottom--item item-black" value="7">7</button>
<button type="button" class="calculator__bottom--item item-black" value="8">8</button>
<button type="button" class="calculator__bottom--item item-black" value="9">9</button>
<button type="button" class="calculator__bottom--item item-blue" data-action="smile" value="b">B</button>
<button type="button" class="calculator__bottom--item item-blue" data-action="smile" value="f">F</button>
<button type="button" class="calculator__bottom--item item-grey-big" data-action="smile" value="?">?</button>
<button type="button" class="calculator__bottom--item item-black" value="4">4</button>
<button type="button" class="calculator__bottom--item item-black" value="5">5</button>
<button type="button" class="calculator__bottom--item item-black" value="6">6</button>
<button type="button" class="calculator__bottom--item item-grey-big" data-action="operator" value="*">×</button>
<button type="button" class="calculator__bottom--item item-grey-big" data-action="operator" value="">/</button>
<button type="button" class="calculator__bottom--item item-grey-big" data-action="color" value="color">☀︎</button>
<button type="button" class="calculator__bottom--item item-black" value="1">1</button>
<button type="button" class="calculator__bottom--item item-black" value="2">2</button>
<button type="button" class="calculator__bottom--item item-black" value="3">3</button>
<button type="button" class="calculator__bottom--item item-grey-big" data-action="operator" value="+">+</button>
<button type="button" class="calculator__bottom--item item-grey-big" data-action="operator" value="-">-</button>
<button type="button" class="calculator__bottom--item item-red" data-action="clear" value="0">AC</button>
<button type="button" class="calculator__bottom--item item-black" value="0">0</button>
<button type="button" class="calculator__bottom--item item-black" value="0">00</button>
<button type="button" class="calculator__bottom--item item-black" data-action="decimal" value=".">.</button>
<button type="button" class="calculator__bottom--item item-grey-big" data-action="operator" value="=">=</button>
</div>
</div>
<script src="js/script.js"></script>
<div style="text-align:center;margin:1px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：Chrome、FireFox、360、搜狗、Opera、傲游. 不支持Windows版Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>
