Created
December 31, 2020 02:18
-
-
Save Ademking/fa66b11fc7163c76a95d04428741eccf to your computer and use it in GitHub Desktop.
Calculatrice JS
This file contains 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Calculatrice JS</title> | |
| <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300" rel="stylesheet" type="text/css"> | |
| <style> | |
| body { | |
| width: 500px; | |
| margin: 4% auto; | |
| font-family: 'Source Sans Pro', sans-serif; | |
| letter-spacing: 5px; | |
| font-size: 1.8rem; | |
| -moz-user-select: none; | |
| -webkit-user-select: none; | |
| -ms-user-select: none; | |
| } | |
| .calculator { | |
| padding: 20px; | |
| -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); | |
| box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); | |
| border-radius: 1px; | |
| } | |
| .input { | |
| border: 1px solid #ddd; | |
| border-radius: 1px; | |
| height: 60px; | |
| padding-right: 15px; | |
| padding-top: 10px; | |
| text-align: right; | |
| margin-right: 6px; | |
| font-size: 2.5rem; | |
| overflow-x: auto; | |
| transition: all .2s ease-in-out; | |
| } | |
| .input:hover { | |
| border: 1px solid #bbb; | |
| -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2); | |
| box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2); | |
| } | |
| .operators div { | |
| display: inline-block; | |
| border: 1px solid #bbb; | |
| border-radius: 1px; | |
| width: 80px; | |
| text-align: center; | |
| padding: 10px; | |
| margin: 20px 4px 10px 0; | |
| cursor: pointer; | |
| background-color: #ddd; | |
| transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s; | |
| } | |
| .operators div:hover { | |
| background-color: #ddd; | |
| -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); | |
| box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); | |
| border-color: #aaa; | |
| } | |
| .operators div:active { | |
| font-weight: bold; | |
| } | |
| .leftPanel { | |
| display: inline-block; | |
| } | |
| .numbers div { | |
| display: inline-block; | |
| border: 1px solid #ddd; | |
| border-radius: 1px; | |
| width: 80px; | |
| text-align: center; | |
| padding: 10px; | |
| margin: 10px 4px 10px 0; | |
| cursor: pointer; | |
| background-color: #f9f9f9; | |
| transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s; | |
| } | |
| .numbers div:hover { | |
| background-color: #f1f1f1; | |
| -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); | |
| box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); | |
| border-color: #bbb; | |
| } | |
| .numbers div:active { | |
| font-weight: bold; | |
| } | |
| div.equal { | |
| display: inline-block; | |
| border: 1px solid #3079ED; | |
| border-radius: 1px; | |
| width: 17%; | |
| text-align: center; | |
| padding: 127px 10px; | |
| margin: 10px 6px 10px 0; | |
| vertical-align: top; | |
| cursor: pointer; | |
| color: #FFF; | |
| background-color: #4d90fe; | |
| transition: all .2s ease-in-out; | |
| } | |
| div.equal:hover { | |
| background-color: #307CF9; | |
| -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); | |
| box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2); | |
| border-color: #1857BB; | |
| } | |
| div.equal:active { | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="calculator"> | |
| <div class="input" id="input"></div> | |
| <div class="buttons"> | |
| <div class="operators"> | |
| <div onclick="add()" id="plus">+</div> | |
| <div onclick="minus()" id="minus">-</div> | |
| <div onclick="times()" id="times">×</div> | |
| <div onclick="divide()" id="divide">÷</div> | |
| </div> | |
| <div class="leftPanel"> | |
| <div class="numbers"> | |
| <div onclick="clickedNumber(this)">7</div> | |
| <div onclick="clickedNumber(this)">8</div> | |
| <div onclick="clickedNumber(this)">9</div> | |
| </div> | |
| <div class="numbers"> | |
| <div onclick="clickedNumber(this)">4</div> | |
| <div onclick="clickedNumber(this)">5</div> | |
| <div onclick="clickedNumber(this)">6</div> | |
| </div> | |
| <div class="numbers"> | |
| <div onclick="clickedNumber(this)">1</div> | |
| <div onclick="clickedNumber(this)">2</div> | |
| <div onclick="clickedNumber(this)">3</div> | |
| </div> | |
| <div class="numbers"> | |
| <div onclick="clickedNumber(this)">0</div> | |
| <div id="clear" onclick="reset()">C</div> | |
| </div> | |
| </div> | |
| <div class="equal" id="result" onclick="calcul()">=</div> | |
| </div> | |
| </div> | |
| <script> | |
| var resultatInput = document.getElementById("input"); | |
| CurrentNumber = null | |
| function clickedNumber(el) { | |
| resultatInput.innerHTML += el.innerHTML; | |
| } | |
| function reset() { | |
| resultatInput.innerHTML = ''; | |
| signe = null; | |
| res = null; | |
| CurrentNumber = null | |
| } | |
| function add() { | |
| CurrentNumber = parseInt(resultatInput.innerHTML); | |
| signe = '+' | |
| resultatInput.innerHTML += signe | |
| } | |
| function minus() { | |
| CurrentNumber = parseInt(resultatInput.innerHTML); | |
| signe = '-' | |
| resultatInput.innerHTML += signe | |
| } | |
| function times() { | |
| CurrentNumber = parseInt(resultatInput.innerHTML); | |
| signe = '*' | |
| resultatInput.innerHTML += signe | |
| } | |
| function divide() { | |
| CurrentNumber = parseInt(resultatInput.innerHTML); | |
| signe = '/' | |
| resultatInput.innerHTML += signe | |
| } | |
| function calcul() { | |
| res = eval(resultatInput.innerHTML); | |
| resultatInput.innerHTML = res | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment