<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>JS Calc</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Clockulator</h1>
<div>
<p class='screen' id='screen'></p>
</div>
<div class='wrapper'>
<button class='zero circle' id='zero'>0</button>
</div>
<div class='wrapper'>
<button class='twelve circle' id='twelve'>12</button>
</div>
<div class='wrapper'>
<button class='six circle' id='six'>6</button>
</div>
<div class='wrapper'>
<button class='three circle' id='three'>3</button>
</div>
<div class='wrapper'>
<button class='nine circle' id='nine'>9</button>
</div>
<div class='wrapper'>
<button class='one circle' id='one'>1</button>
</div>
<div class='wrapper'>
<button class='two circle' id='two'>2</button>
</div>
<div class='wrapper'>
<button class='eleven circle' id='eleven'>11</button>
</div>
<div class='wrapper'>
<button class='ten circle' id='ten'>10</button>
</div>
<div class='wrapper'>
<button class='four circle' id='four'>4</button>
</div>
<div class='wrapper'>
<button class='five circle' id='five'>5</button>
</div>
<div class='wrapper'>
<button class='seven circle' id='seven'>7</button>
</div>
<div class='wrapper'>
<button class='eight circle' id='eight'>8</button>
</div>
<div class='wrapper'>
<button class='equal circle' id='equal'>=</button>
</div>
<div class='wrapper'>
<button class='plus circle' id='plus'>+</button>
</div>
<div class='wrapper'>
<button class='minus circle' id='minus'>-</button>
</div>
<div class='wrapper'>
<button class='multiply circle' id='multiply'>x</button>
</div>
<div class='wrapper'>
<button class='divide circle' id='divide'>/</button>
</div>
<div class='wrapper'>
<button class='clear circle' id='clear'>C</button>
</div>
<footer>Designed by Felix Savchenkov</footer>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/f1e2l3i4x5/js-calc-MEqMvo */
h1 {
text-align: center;
}
body {
background-color: lightblue;
}
.screen {
padding: 30px;
margin: 50px;
margin-bottom: 15px;
background: white;
border-radius: 5px;
border-style: solid;
border-width: 2px;
border-color: grey;
color: black;
font-size: 2em;
line-height: 0;
}
.circle {
width: 45px;
height: 45px;
background: black;
border-radius: 22.5px;
border-style: solid;
border-width: 2px;
border-color: grey;
color: white;
}
.button {
position: absolute;
}
.wrapper {
text-align: center;
}
.zero {
margin-top: 20%;
}
.twelve {
position: relative;
top: -135px;
background: #515151 !important;
}
.six {
position: relative;
background: #515151 !important;
}
.three {
position: relative;
left: 100px;
top: -137px;
}
.nine {
position: relative;
right: 100px;
top: -183px;
}
.one {
position: relative;
right: -46px;
top: -305px;
}
.two {
position: relative;
right: -83px;
top: -317px;
background: #515151 !important;
}
.eleven {
position: relative;
right: 46px;
top: -395px;
}
.ten {
position: relative;
right: 83px;
top: -408px;
background: #515151 !important;
}
.four {
position: relative;
right: -83px;
top: -368px;
background: #515151 !important;
}
.five {
position: relative;
right: -46px;
top: -380px;
}
.seven {
position: relative;
right: 46px;
top: -425px;
}
.eight {
position: relative;
right: 83px;
top: -503px;
background: #515151 !important;
}
.equal {
position: relative;
right: 0px;
top: -546.5px;
background: #f47321 !important;
}
.plus {
position: relative;
right: -41.5px;
top: -663px;
background: #367c2b !important;
}
.minus {
position: relative;
right: 41.5px;
top: -708px;
background: #e41b23 !important;
}
.multiply {
position: relative;
right: -43px;
top: -708px;
background: #004c91 !important;
}
.divide {
position: relative;
right: 43px;
top: -753px;
background: #ffc220 !important;
}
.clear {
position: relative;
right: 0px;
top: -864px;
background: white !important;
color: black !important;
}
.dot-1 {
position: relative;
right: -90px;
top: -955px;
background: white !important;
color: black !important;
}
.dot-2 {
position: relative;
right: 89px;
top: -1000px;
background: white !important;
color: black !important;
}
.dot-3 {
position: relative;
right: -90px;
top: -870px;
background: white !important;
color: black !important;
}
.dot-4 {
position: relative;
right: 90px;
top: -915px;
background: white !important;
color: black !important;
}
/*Downloaded from https://www.codeseek.co/f1e2l3i4x5/js-calc-MEqMvo */
$(document).ready(function() {
var num = [];
var storage = [];
//output to console
function con (arr) {
console.log(arr);
}
//to show accum result of the input
function show (rh) {
$("#screen").text(rh.join(""));
}
//to input complex number
function inputNum (arr, mem) {
$("#one").on("click", function(){
arr.push("1");
show(arr);
});
$("#two").on("click", function(){
arr.push("2");
show(arr);
});
$("#three").on("click", function(){
arr.push("3");
show(arr);
});
$("#four").on("click", function(){
arr.push("4");
show(arr);
});
$("#five").on("click", function(){
arr.push("5");
show(arr);
});
$("#six").on("click", function(){
arr.push("6");
show(arr);
});
$("#seven").on("click", function(){
arr.push("7");
show(arr);
});
$("#eight").on("click", function(){
arr.push("8");
show(arr);
});
$("#nine").on("click", function(){
arr.push("9");
show(arr);
});
$("#ten").on("click", function(){
arr.push("10");
show(arr);
});
$("#eleven").on("click", function(){
arr.push("11");
show(arr);
});
$("#twelve").on("click", function(){
arr.push("12");
show(arr);
});
$("#zero").on("click", function(){
arr.push("0");
show(arr);
});
$("#plus").on("click", function(){
mem.push(arr.join("").slice(0));
mem.push("+");
arr = [];
show(arr);
});
$("#minus").on("click", function(){
mem.push(arr.join("").slice(0));
mem.push("-");
arr = [];
show(arr);
});
$("#multiply").on("click", function(){
mem.push(arr.join("").slice(0));
mem.push("*");
arr = [];
show(arr);
});
$("#divide").on("click", function(){
mem.push(arr.join("").slice(0));
mem.push("/");
arr = [];
show(arr);
});
$("#equal").on("click", function(){
mem.push(arr.join("").slice(0));
arr = [];
show(arr);
show2(mem);
});
$("#clear").on("click", function(){
mem = [];
arr = [];
show(arr);
});
}
inputNum(num, storage);
function show2(mem) {
con(mem);
var move = parseInt(mem[0]);
for (var i=1;i<mem.length;i=i+2) {
if (mem[i]=="+") {
move = move + parseInt(mem[i+1]);
}
if (mem[i]=="-") {
move = move - parseInt(mem[i+1]);
}
if (mem[i]=="*") {
move = move * parseInt(mem[i+1]);
}
if (mem[i]=="/") {
move = move / parseInt(mem[i+1]);
}
}
$("#screen").text(move);
con(move);
}
});