HTML
<div class="calc">
<div class="calc-title">
<span class="calc-title-span">
Calculater
</span>
<div class="calc-title-hr"></div>
</div>
<div class="calc-display">
<div class="calc-display-span secondary-display" id="secondary-display">
</div>
<div class="calc-display-span primary-display" id="display">
</div>
<!-- const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display"); -->
</div>
<div class="calc-display-hr"></div>
<div class="calc-btn" id="btn">
<button class="calc-btn-primary" id="seven">7</button>
<button class="calc-btn-primary" id="eight">8</button>
<button class="calc-btn-primary" id="nine">9</button>
<button class="calc-btn-primary btn-bg" id="divide">/</button>
<button class="calc-btn-primary" id="four">4</button>
<button class="calc-btn-primary" id="five">5</button>
<!-- const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display"); -->
<button class="calc-btn-primary" id="six">6</button>
<button class="calc-btn-primary btn-bg" id="multiply">*</button>
<button class="calc-btn-primary" id="one">1</button>
<button class="calc-btn-primary" id="two">2</button>
<button class="calc-btn-primary" id="three">3</button>
<button class="calc-btn-primary btn-bg" id="add">+</button>
<button class="calc-btn-primary btn-bg" id="decimal">.</button>
<button class="calc-btn-primary" id="zero">0</button>
<!-- const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display"); -->
<button class="calc-btn-primary btn-bg-equal" id="equals">=</button>
<button class="calc-btn-primary btn-bg" id="subtract">-</button>
<button class="calc-btn-clear" id="clear">clear</button>
</div>
</div>
CSS
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700,900');
body {
width : 100%;
height : 750px;
display: flex;
flex-direction : column;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
background-color: #ebedef;
padding: 0;
margin: 0;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc {
display: flex;
flex-direction : column;
width: 330px;
height: 600px;
margin : 10px;
background-color: #000000;
background-image: linear-gradient(315deg, #000000 0%, #414141 104%);
border-radius: 20px;
box-shadow : 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc-title {
display: flex;
flex-direction: column;
justify-content: center;
height: 40px;
align-items: center;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc-title-span {
color: #fb7454;
font-size: 15px;
letter-spacing: 1px;
font-weight: 700;
line-height: 20px;
}
.calc-title-hr {
width: 200px;
height: 3px;
background-color: #fb7454;
opacity: 0.8;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc-display {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100px;
color: #fff;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.secondary-display{
font-size:20px;
opacity : 0.8;
overflow-x : hidden;
}
.secondary-display::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.secondary-display::-webkit-scrollbar {
height : 4px;
background-color: #bdbdbd;
opacity: 0.7;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.secondary-display::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #000000;
border: 3px solid #555555;
}
.primary-display::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.primary-display::-webkit-scrollbar {
height : 4px;
background-color: #bdbdbd;
opacity: 0.7;
}
.primary-display::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #000000;
border: 3px solid #555555;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc-display-hr {
width: 250px;
height: 2px;
margin-top: 10px;
align-self: center;
background-color: #bdbdbd;
opacity: 0.4;
}
.calc-btn {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
margin: 20px;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc-btn-primary {
cursor: pointer;
font-family: 'Montserrat', sans-serif;
margin: 10px 5px;
outline: none;
border: none;
background-color: transparent;
color: #fff;
font-size: 30px;
width: 60px;
height: 60px;
border: 2px solid #616161;
border-radius: 100%;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.btn-bg{
background-color:#424242 !important;
opacity : 0.9;
border : none !important;
}
.btn-bg-equal{
background-color:#ff7555 !important;
border : none !important;
}
.calc-btn-primary:focus {
outline:none
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc-btn-primary:active {
transform: scale(0.9);
}
.calc-btn-clear {
margin: 20px 5px;
outline: none;
border: none;
background-color: transparent;
color: #fff;
font-size: 30px;
padding: 10px 90px;
border: 3px solid #ff7555;
border-radius: 10px;
}
/*flex-direction : column;
justify-content: center;
align-items: center;*/
.calc-btn-clear:active {
transform: scale(0.9);
}
button:hover{
background-color:#eaeaea;
}
JAVASCRIPT
console.clear();
const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");
let currentString = '';
let resultString = '';
let evalResult;
let lastOperator = false;
const primaryRender = (value) => {
primaryDisplay.innerText = value;
}
/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
const secondaryRender = (value) => {
secondaryDisplay.innerText = value;
}
secondaryRender('0');
primaryRender('0');
const evaluate = (e) => {
let width = secondaryDisplay.scrollWidth;
if(width > 310){
secondaryDisplay.style.overflowX = 'scroll';
secondaryDisplay.scrollLeft = width;
}
/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
else{
secondaryDisplay.style.overflowX = 'hidden';
}
let value = e.target.innerText;
if (value >= '0' && value <= '9') {
let len = currentString.length;
let lastOp = isOp(currentString[len - 1]);
if (lastOperator) {
currentString = currentString.concat(value);
resultString = "".concat(value);
secondaryRender(currentString);
primaryRender(resultString);
lastOperator = false;
/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
} else {
currentString = currentString.concat(value);
resultString = resultString.concat(value);
secondaryRender(currentString);
primaryRender(resultString);
}
} else if (isOp(value)) {
if (currentString.length == 0 && (value == '/' || value == '*'));
/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
else {
resultString = "";
primaryRender(value);
lastOperator = true;
let len = currentString.length;
let lastOp = isOp(currentString[len - 1]);
if (lastOp) {
currentString = currentString.substr(0, len - 1) + value;
console.log(currentString);
secondaryRender(currentString);
decimal = false;
} else {
currentString = currentString.concat(value);
secondaryRender(currentString);
}
}
/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
} else if (value == '.') {
if (resultString.indexOf('.') < 0) {
if (resultString.length == 0) {
currentString = currentString.concat('0.');
resultString = resultString.concat('0.');
secondaryRender(currentString);
primaryRender(resultString);
}/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
else {
currentString = currentString.concat(value);
resultString = resultString.concat(value);
secondaryRender(currentString);
primaryRender(resultString);
}
}
} else if (value == '=') {
secondaryDisplay.style.overflowX = 'hidden';
if (currentString.length == 0);
else {
let result = eval(currentString);
resultString = '';
currentString = '';
secondaryRender('0');
primaryRender(result);
}/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
} else if (value == 'clear') {
currentString = '';
resultString = '';
secondaryRender('0');
primaryRender('0');
}
let width1 = primaryDisplay.scrollWidth;
if(width1 > 310){
primaryDisplay.style.overflowX = 'scroll';
}
else{
primaryDisplay.style.overflowX = 'hidden';
}
}
/*const btns = document.getElementById("btn");
const primaryDisplay = document.getElementById("display");
const secondaryDisplay = document.getElementById("secondary-display");*/
for (let elem of btns.children) {
elem.addEventListener('click', evaluate);
}
function isOp(value) {
return (/\+|\-|\*|\//).test(value);
}
