JavaScript Simple Calculator Program Demo
123 + 456 =
579
Prism.js Okaidia Theme Example
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Simple Calculator Program Demo</title>
<style>
/*Calculator Body*/
.calc-body {
width: 275px;
margin: auto;
min-height: 400px;
box-shadow: 0 8px 50px -7px black;
background: #3A4655;
}
/*Calculator Display Screen*/
.calc-screen {
padding: 1rem;
}
#calc-operation {
font-size: 1.3rem;
text-align: right;
color: #727B86;
padding-bottom: .5rem;
}
#calc-typed {
font-size: 2rem;
text-align: right;
color: #fff;
}
/*Calculator Buttons*/
.calc-button-row{
display: table;
}
.calc-button-row button {
display: table-cell;
width: 25%;
background: #425062;
color: #fff;
height: 65px;
font-size: 1.3rem;
border: none;
border-color:#3C4857;
border-width: 1px 1px 0px 0;
border-style: solid;
}
.calc-button-row button.ac {
color: #ff7665;
}
.calc-button-row button.opt {
color: #ffbc56;
}
/*The border has been managed in every fourth button so that the design will not distract.*/
.calc-button-row button:nth-child(4n){
border-right: none;
}
.calc-button-row button:active {
position: relative;
top: 1px;
}
.calc-button-row button:hover {
background: #3e4b5c;
}
</style>
</head>
<body>
<?php if(!isset($_GET['iframe'])){?>
<!-- Header -->
<header class="container-fluid bg-light">
<nav class="row">
<div class="col col-md-auto" style="height:90px;">
<div class="h-100 d-flex justify-content-center align-items-center">
</div>
</div>
<div class="col d-none d-lg-block" style="height:90px;"><div id="ezoic-pub-ad-placeholder-126"></div></div>
</nav>
</header>
<?php } ?>
<!-- Top bar -->
<div class="container-fluid shadow-sm border-bottom mb-4">
<div class="row aligh-items-center">
<div class="col">
<nav class="navbar navbar-light">
<a class="btn btn-sm btn-light me-2" href="javascript-simple-calculator-program-demo.zip" title="Download Demo Files"><svg class="svg-icon" viewBox="0 0 24 24">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg></a>
</nav>
</div>
</div>
</div>
<!-- Main -->
<div class="container" style="max-width:800px">
<?php if(!isset($_GET['iframe'])){?>
<div class="text-center mb-5">
<h1 class="fw-bolder mb-0">JavaScript Simple Calculator Program Demo</h1>
<p><a href="https://freelancerap.blogspot.com/" target="_blank">By Atharv Parit</a></p>
</div>
<?php } ?>
<!-- Calculator Body -->
<div class="calc-body">
<!-- Calculator Display Screen -->
<div class="calc-screen">
<div id="calc-operation">123 + 456 = </div>
<div id="calc-typed">579</div>
</div>
<!-- Calculator Buttons -->
<div class="calc-button-row">
<button class="ac">AC</button>
<button class="opt">+/−</button>
<button class="opt">%</button>
<button class="opt">÷</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="opt">×</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="opt">−</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="opt">+</button>
<button>0</button>
<button>.</button>
<button>⌫</button>
<button class="opt">=</button>
</div>
</div>
</div>
</body>
</html>
0 Comments:
Post a Comment