Created
November 9, 2019 06:45
-
-
Save irfiacre/3bacb35554dfa76f8137b37dad43d776 to your computer and use it in GitHub Desktop.
xvxvRj
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <h1>Calculator using Html, Css ,and Javascript</h1> | |
| <div class="parent-calculator"> | |
| <div class="screen"> | |
| <div class="row"> | |
| <div class="column" id="display-val"> 0 </div> | |
| </div> | |
| </div> | |
| <div class="keys"> | |
| <div class="row"> | |
| <div class="button button-operation column" id="plus">+</div> | |
| <div class="button button-operation column" id="minus">-</div> | |
| <div class="button button-operation column" id="multi">x</div> | |
| <div class="button button-operation column" id="divide">÷</div> | |
| </div> | |
| <div class="row"> | |
| <div class="button button-numb column" id="one">1</div> | |
| <div class="button button-numb column" id="two">2</div> | |
| <div class="button button-numb column" id="three">3</div> | |
| <div class="button column" id="decimal">.</div> | |
| </div> | |
| <div class="row"> | |
| <div class="button button-numb column" id="four">4</div> | |
| <div class="button button-numb column" id="five">5</div> | |
| <div class="button button-numb column" id="six">6</div> | |
| <div class="button button-numb column" id="zero">0</div> | |
| </div> | |
| <div class="row"> | |
| <div class="button button-numb column" id="seven">7</div> | |
| <div class="button button-numb column" id="eight">8</div> | |
| <div class="button button-numb column" id="nine">9</div> | |
| <div class="button column" id="clear"></div> | |
| </div> | |
| <div class="row"> | |
| <div class="button button-operation column" id="equal">=</div> | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let NumbButtons= document.getElementsByClassName('button-numb'); | |
| let OperatorButtons=document.getElementsByClassName('button-operation'); | |
| let decimalButton = document.getElementById('decimal'); | |
| let clearButton = document.getElementById('clear'); | |
| clearButton.innerText='AC'; | |
| let displayValElement =document.getElementById('display-val'); | |
| let displayVal='0'; | |
| let pendingVal; | |
| let evalStringArray=[]; | |
| let evaluation; | |
| const updateDisplayVal= (clickObj) => { | |
| clearButton.innerText='CE'; | |
| let buttonText = clickObj.target.innerText; | |
| if (evaluation != undefined){ | |
| displayVal = ""; | |
| evaluation = undefined; | |
| } | |
| if(displayVal === '0') | |
| displayVal = ''; | |
| displayVal += buttonText; | |
| displayValElement.innerText = displayVal; | |
| } | |
| clearButton.onclick = ()=>{ | |
| clearButton.innerText='AC'; | |
| displayVal ='0'; | |
| pendingVal = undefined; | |
| evalStringArray = []; | |
| displayValElement.innerHTML = displayVal; | |
| } | |
| decimalButton.onclick = () =>{ | |
| if(!displayVal.includes('.')) | |
| displayVal +='.'; | |
| displayValElement.innerText = displayVal; | |
| } | |
| const Adding= () =>{ | |
| pendingVal= displayVal; | |
| displayVal= '0'; | |
| evalStringArray.push(pendingVal); | |
| evalStringArray.push('+'); | |
| if(OperatorButtons){ | |
| if (displayVal==='0') { | |
| displayValElement.innerText= pendingVal; | |
| } | |
| } | |
| } | |
| const minus= () =>{ | |
| pendingVal= displayVal; | |
| displayVal= '0'; | |
| evalStringArray.push(pendingVal); | |
| evalStringArray.push('-'); | |
| } | |
| const multiply= () =>{ | |
| pendingVal= displayVal; | |
| displayVal= '0'; | |
| evalStringArray.push(pendingVal); | |
| evalStringArray.push('*'); | |
| } | |
| const division= () =>{ | |
| pendingVal= displayVal; | |
| displayVal= '0'; | |
| evalStringArray.push(pendingVal); | |
| evalStringArray.push('/'); | |
| } | |
| const equality = () =>{ | |
| evalStringArray.push(displayVal); | |
| evaluation = eval(evalStringArray.join(' ')); | |
| displayVal = evaluation + ''; | |
| displayValElement.innerText = displayVal; | |
| evalStringArray = []; | |
| } | |
| const performoperation = (clickObj) =>{ | |
| let operator= clickObj.target.innerText; | |
| switch(operator){ | |
| case '+': | |
| Adding(); | |
| break; | |
| case '-': | |
| minus(); | |
| break; | |
| case 'x': | |
| multiply(); | |
| break; | |
| case '÷': | |
| division(); | |
| break; | |
| case '=': | |
| equality(); | |
| default: | |
| break; | |
| } | |
| } | |
| for (let i = 0; i < NumbButtons.length ; i++) { | |
| NumbButtons[i].addEventListener('click', updateDisplayVal , false); | |
| } | |
| for (let i=0;i < OperatorButtons.length;i++) { | |
| OperatorButtons[i].addEventListener('click',performoperation,false); | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| font-family: Calibri; | |
| -moz-user-select: none; /* Firefox */ | |
| -ms-user-select: none; /* Internet Explorer */ | |
| -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */ | |
| -webkit-user-select: none; /* Chrome, Safari, and Opera */ | |
| -webkit-touch-callout: none; /* Disable Android and iOS callouts*/ | |
| user-select: none; /* Non-prefixed version, currently | |
| supported by Chrome and Opera */ | |
| /* reference: https://www.webfx.com/blog/web-design/disable-text-selection/ | |
| an https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting*/ | |
| } | |
| h1{ | |
| text-align: center; | |
| margin-top: 10px; | |
| } | |
| .button{ | |
| background-color: lightgrey; | |
| color: black; | |
| width: 25px; | |
| height: 45px; | |
| border: 2px solid grey; | |
| cursor: pointer; | |
| text-align: center; | |
| font-size: 32px; | |
| font-weight: 100; | |
| padding-top: 3px; | |
| } | |
| .button:hover { | |
| background-color: green; | |
| } | |
| .row{ | |
| display: table; | |
| table-layout: fixed; | |
| width: 300px; | |
| } | |
| .column{ | |
| display: table-cell; | |
| } | |
| #equal{ | |
| text-align: center; | |
| border-radius: 0px 0px 5px 5px; | |
| width: 300px; | |
| border-left: 2px solid grey; | |
| border-right: 2px solid grey; | |
| border-bottom: 5px solid grey; | |
| } | |
| #decimal{ | |
| text-align: center; | |
| } | |
| #zero{ | |
| text-align: center; | |
| } | |
| #clear{ | |
| text-align: center; | |
| } | |
| #display-val{ | |
| height: 100px; | |
| color: white; | |
| text-align: right; | |
| border-left: 7px solid grey; | |
| border-right: 7px solid grey; | |
| border-top: 10px solid grey; | |
| font-size: 50px; | |
| background-color: #383838; | |
| word-break: break-all; | |
| padding: 10px; | |
| border-radius: 8px 8px 0 0; | |
| } | |
| .button-operation{ | |
| background-color: orange; | |
| color: white; | |
| } | |
| .parent-calculator{ | |
| margin-left: calc(50% - 150px); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment