-
Notifications
You must be signed in to change notification settings - Fork 394
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added additional functionalities in the basic calculator for the point .
- Loading branch information
1 parent
ded4fe2
commit 7037883
Showing
8 changed files
with
666 additions
and
158 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| ## Description :- | ||
| Added additional functionalities in the basic calculator for the point "." | ||
|
|
||
| ## Tech Stacks :- | ||
|
|
||
| - HTML | ||
| - CSS | ||
| - JavaScript | ||
|
|
||
| ## Screenshots :- | ||
| If point is at the zero index 0 will be displayed before . (point) so the resultant innerText of the result will become 0. | ||
|  | ||
|
|
||
| If the first element inside the opening parenthesis is . then zero 0 will be displayed before the point. | ||
|  | ||
|
|
||
| If the first element after any operator is . then zero 0 will be displayed before the point. | ||
|  |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <title>Basic Calculator</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="btn"> | ||
| <strong>🌞</strong><strong>🌙</strong> | ||
| </div> | ||
|
|
||
| <div class="container"> | ||
| <form class="calculator" name="calc"> | ||
| <input type="text" class="value" id="display" name="txt"> | ||
| <span class="num clear" onclick="calc.txt.value = '' "><i>C</i></span> | ||
| <span class="num" onclick="calc.txt.value += '(' "><i>(</i></span> | ||
| <span class="num" onclick="calc.txt.value += ')' "><i>)</i></span> | ||
| <span class="num" onclick="calc.txt.value += '/' "><i>/</i></span> | ||
| <span class="num clear-one" onclick="clearOne()"><i>CE</i></span> | ||
| <span class="num" onclick="calc.txt.value += '7' "><i>7</i></span> | ||
| <span class="num" onclick="calc.txt.value += '8' "><i>8</i></span> | ||
| <span class="num" onclick="calc.txt.value += '9' "><i>9</i></span> | ||
| <span class="num" onclick="calc.txt.value += '+' "><i>+</i></span> | ||
| <span class="num" onclick="calc.txt.value += '*' "><i>*</i></span> | ||
| <span class="num" onclick="calc.txt.value += '-' "><i>-</i></span> | ||
| <span class="num" onclick="calc.txt.value += '4' "><i>4</i></span> | ||
| <span class="num" onclick="calc.txt.value += '5' "><i>5</i></span> | ||
| <span class="num" onclick="calc.txt.value += '6' "><i>6</i></span> | ||
| <span class="num" onclick="calc.txt.value += 'Math.sqrt(' "><i>√</i></span> | ||
| <span class="num" onclick="calc.txt.value += '%' "><i>%</i></span> | ||
| <span class="num point" onclick="point()"><i>.</i></span> | ||
| <span class="num" onclick="calc.txt.value += '1' "><i>1</i></span> | ||
| <span class="num" onclick="calc.txt.value += '2' "><i>2</i></span> | ||
| <span class="num" onclick="calc.txt.value += '3' "><i>3</i></span> | ||
| <span class="num" onclick="calc.txt.value += 'Math.sin(' "><i>sin</i></span> | ||
| <span class="num" onclick="calc.txt.value += 'Math.cos(' "><i>cos</i></span> | ||
|
|
||
| <span class="num result-give equal" onclick="document.calc.txt.value=eval(calc.txt.value)"><i>=</i></span> | ||
|
|
||
| <span class="num" onclick="calc.txt.value += ',' "><i>,</i></span> | ||
| <span class="num" onclick="calc.txt.value += '0' "><i>0</i></span> | ||
| <span class="num" onclick="calc.txt.value += 'Math.pow(' "><i>^</i></span> | ||
| <span class="num" onclick="calc.txt.value += 'Math.exp(' "><i>exp</i></span> | ||
| <span class="num" onclick="calc.txt.value += 'Math.log10(' "><i>log</i></span> | ||
| </form> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| let body = document.querySelector("body"); | ||
| let btn = document.querySelector(".btn"); | ||
| let calc = document.forms["calc"]; | ||
| let txt = calc.elements["txt"]; | ||
| let math = window.math; | ||
| let display = document.getElementById("display"); | ||
| // let zero = document.getElementById("display"); | ||
|
|
||
|
|
||
| document.addEventListener("keydown", function (event) { | ||
| const validKeys = /^[0-9.\+\-\*\/\(\)\^\%\{\}\[\]&]$/; | ||
| if (validKeys.test(event.key)) { | ||
| document.getElementById("display").value += event.key; | ||
| } else if (event.key === "Enter") { | ||
| event.preventDefault(); | ||
| calculate(); | ||
| } else if (event.key === "Backspace") { | ||
| removeFromDisplay(); | ||
| } | ||
| }); | ||
|
|
||
| function removeFromDisplay() { | ||
| let value = display.value; | ||
| value = value.substring(0, value.length - 1); | ||
| display.value = value; | ||
| } | ||
|
|
||
| function clearDisplay() { | ||
| display.value = ""; | ||
| } | ||
|
|
||
| function calculate() { | ||
| try { | ||
| const result = eval(display.value); | ||
| display.value = result; | ||
| } catch (error) { | ||
| display.value = "Error"; | ||
| } | ||
| } | ||
|
|
||
| btn.onclick = function () { | ||
| body.classList.toggle("light"); | ||
| }; | ||
|
|
||
| calc.onsubmit = calculate(e); | ||
|
|
||
| function clearOne() { | ||
| let currentValue = calc.txt.value; | ||
| calc.txt.value = currentValue.slice(0, -1); | ||
| } | ||
|
|
||
| function point() { | ||
| let currentValue = calc.txt.value; | ||
| if (currentValue == "") { | ||
| calc.txt.value = '0' + '.'; | ||
| } | ||
| else { | ||
|
|
||
| if (currentValue.charAt(currentValue.length - 1) == "." || currentValue.charAt(currentValue.length - 1) == "(") { | ||
| calc.txt.value = calc.txt.value + '0' + '.'; | ||
| return; | ||
| } | ||
| if (currentValue.charAt(currentValue.length - 1) == "+" || | ||
| currentValue.charAt(currentValue.length - 1) == "*" || | ||
| currentValue.charAt(currentValue.length - 1) == "-" || | ||
| currentValue.charAt(currentValue.length - 1) == "/" || | ||
| currentValue.charAt(currentValue.length - 1) == "%" || | ||
| currentValue.charAt(currentValue.length - 1) == "√" || | ||
| currentValue.charAt(currentValue.length - 1) == "^") { | ||
| calc.txt.value = calc.txt.value + '0' + '.'; | ||
| return; | ||
| } | ||
| else { | ||
| calc.txt.value = calc.txt.value + "."; | ||
| return; | ||
| } | ||
| } | ||
| }; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,192 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| font-family: consolas; | ||
| } | ||
|
|
||
| body { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| min-height: 100vh; | ||
| background: #333; | ||
| } | ||
|
|
||
| body.light { | ||
| background: #f8f8f8; | ||
| } | ||
|
|
||
| .container { | ||
| position: relative; | ||
| min-width: 300px; | ||
| min-height: 400px; | ||
| background: #333; | ||
| padding: 40px 30px 30px; | ||
| border-radius: 20px; | ||
| box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.25), | ||
| 10px 10px 75px rgba(0, 0, 0, 0.25), inset -5px -5px 15px rgba(0, 0, 0, 0.5), | ||
| inset 5px 5px 15px rgba(0, 0, 0, 0.5); | ||
| } | ||
|
|
||
| body.light .container { | ||
| background: #fafafa; | ||
| box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.15), | ||
| 10px 10px 75px rgba(0, 0, 0, 0.15), inset -5px -5px 15px rgba(0, 0, 0, 0.15), | ||
| inset 5px 5px 15px rgba(0, 0, 0, 0.05); | ||
| } | ||
|
|
||
| .calculator { | ||
| position: relative; | ||
| display: grid; | ||
| grid-template-columns: repeat(6, 1fr); | ||
| } | ||
|
|
||
| .calculator .value { | ||
| position: relative; | ||
| grid-column: span 6; | ||
| height: 100px; | ||
| left: 10px; | ||
| width: calc(100% - 20px); | ||
| border: none; | ||
| outline: none; | ||
| background: #a7af7c; | ||
| margin-bottom: 10px; | ||
| border-radius: 10px; | ||
| box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.75); | ||
| text-align: right; | ||
| padding: 10px; | ||
| font-size: 2em; | ||
| } | ||
|
|
||
| .calculator span { | ||
| position: relative; | ||
| display: grid; | ||
| place-items: center; | ||
| width: 80px; | ||
| height: 80px; | ||
| margin: 8px; | ||
| background: linear-gradient(180deg, #2f2f2f, #3f3f3f); | ||
| box-shadow: inset -8px 0 8px rgba(0, 0, 0, 0.15), | ||
| inset 0 -8px 8px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(0, 0, 0, 0.75), | ||
| 10px 20px 25px rgba(0, 0, 0, 0.4); | ||
| color: #fff; | ||
| user-select: none; | ||
| cursor: pointer; | ||
| font-weight: 400; | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| body.light .calculator span::before { | ||
| background: linear-gradient(90deg, #e6e6e6, #efefef); | ||
| box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.25), | ||
| 10px 5px 10px rgba(0, 0, 0, 0.15); | ||
| border-left: 1px solid #fff4; | ||
| border-bottom: 1px solid #fff4; | ||
| border-top: 1px solid #fff9; | ||
| } | ||
|
|
||
| .calculator span:active { | ||
| filter: brightness(1.5); | ||
| } | ||
|
|
||
| body.light .calculator span:active { | ||
| filter: brightness(0.9); | ||
| } | ||
|
|
||
| .calculator span i { | ||
| position: relative; | ||
| font-style: normal; | ||
| font-size: 1.5em; | ||
| text-transform: uppercase; | ||
| } | ||
|
|
||
| body.light .calculator span i { | ||
| color: #fff; | ||
| } | ||
|
|
||
| body.light .calculator span.clear i, | ||
| body.light .calculator span.result-give i { | ||
| color: #fff; | ||
| } | ||
|
|
||
| body.light .calculator .clear, | ||
| .calculator .clear { | ||
| grid-column: span 2; | ||
| width: 180px; | ||
| background: #f00; | ||
| } | ||
|
|
||
| body.light .calculator .clear-one, | ||
| .calculator .clear-one { | ||
| background: #2196f3; | ||
| } | ||
|
|
||
| body.light .calculator .clear::before, | ||
| .calculator .clear::before { | ||
| background: linear-gradient(90deg, #d20030, #ffffff5c); | ||
| border-left: 1px solid #fff4; | ||
| border-bottom: 1px solid #fff4; | ||
| border-top: 1px solid #fff4; | ||
| } | ||
|
|
||
| .calculator .equal { | ||
| grid-row: span 2; | ||
| height: 180px; | ||
| } | ||
|
|
||
| body.light .calculator .result-give, | ||
| .calculator .result-give { | ||
| background: #2196f3; | ||
| } | ||
|
|
||
| body.light .calculator .result-give::before, | ||
| .calculator .result-give::before { | ||
| background: linear-gradient(90deg, #1479c9, #ffffff5c); | ||
| border-left: 1px solid #fff4; | ||
| border-bottom: 1px solid #fff4; | ||
| border-top: 1px solid #fff4; | ||
| } | ||
|
|
||
| .btn { | ||
| position: absolute; | ||
| border: rgba(0, 0, 0, 0.1) solid; | ||
| border-radius: 10px; | ||
| top: 20px; | ||
| right: 20px; | ||
| width: 60px; | ||
| height: 60px; | ||
| background: #333; | ||
| font-size: 1.5em; | ||
| box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.25), 5px 5px 30px rgba(0, 0, 0, 0.25), | ||
| inset -2px -2px -5px rgba(0, 0, 0, 0.25), | ||
| inset 2px 2px 5px rgba(0, 0, 0, 0.25); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| body.light .btn { | ||
| background: #000; | ||
| box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1), 5px 5px 30px rgba(0, 0, 0, 0.05), | ||
| inset -2px -2px -5px rgba(0, 0, 0, 0.1), | ||
| inset 2px 2px 5px rgba(0, 0, 0, 0.05); | ||
| } | ||
|
|
||
| .btn strong { | ||
| display: none; | ||
| color: yellow; | ||
| } | ||
|
|
||
| .btn strong:nth-child(1) { | ||
| display: block; | ||
| } | ||
|
|
||
| body.light .btn strong:nth-child(1) { | ||
| display: none; | ||
| } | ||
|
|
||
| body.light .btn strong:nth-child(2) { | ||
| display: block; | ||
| } |
Oops, something went wrong.