-
Notifications
You must be signed in to change notification settings - Fork 407
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Modified Basic and Multiplication Table Calculator (#577)
- Loading branch information
Showing
10 changed files
with
430 additions
and
310 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
Binary file not shown.
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 |
|---|---|---|
| @@ -1,59 +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"> | ||
| <title>Basic Calculator</title> | ||
| <title>Calculator In CSS</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;800&family=Roboto+Condensed:wght@300;400;700&display=swap" rel="stylesheet"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="main"> | ||
| <h1> Your Basic Old School Calculator</h1> | ||
| <div class="box"> | ||
|
|
||
| <h2>Basic Calculator</h2> | ||
| <input type="text" id="display" disabled> | ||
| <br> | ||
| <div id="history"></div> | ||
| <br> | ||
| <button onclick="appendToDisplay('1')">1</button> | ||
| <button onclick="appendToDisplay('2')">2</button> | ||
| <button onclick="appendToDisplay('3')">3</button> | ||
| <button onclick="clearDisplay()">C</button> | ||
| <button onclick="removeFromDisplay()"><img src = "delete.png"></button> | ||
| <br> | ||
| <button onclick="appendToDisplay('4')">4</button> | ||
| <button onclick="appendToDisplay('5')">5</button> | ||
| <button onclick="appendToDisplay('6')">6</button> | ||
| <button onclick="appendToDisplay('+')">+</button> | ||
| <button onclick="appendToDisplay('-')">-</button> | ||
| <br> | ||
| <button onclick="appendToDisplay('7')">7</button> | ||
| <button onclick="appendToDisplay('8')">8</button> | ||
| <button onclick="appendToDisplay('9')">9</button> | ||
| <button onclick="appendToDisplay('*')">*</button> | ||
| <button onclick="appendToDisplay('/')">/</button> | ||
| <br> | ||
| <button onclick="appendToDisplay('0')">0</button> | ||
| <button onclick="appendToDisplay('.')">.</button> | ||
| <button onclick="appendToDisplay('%')">%</button> | ||
| <button onclick="appendToDisplay('(')">(</button> | ||
| <button onclick="appendToDisplay(')')">)</button> | ||
|
|
||
| <br> | ||
| <button onclick="appendToDisplay('Math.sqrt(')">√</button> | ||
| <button onclick="appendToDisplay('**')">^</button> | ||
| <button onclick="appendToDisplay('Math.sin(')">sin</button> | ||
| <button onclick="appendToDisplay('Math.cos(')">cos</button> | ||
| <button onclick="calculate()">=</button> | ||
| <br> | ||
|
|
||
| </div> | ||
| </div> | ||
| <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" onclick="calc.txt.value += '.' "><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 |
|---|---|---|
| @@ -1,49 +1,48 @@ | ||
| let history = []; | ||
| let display = document.getElementById('display'); | ||
| let historyDiv = document.getElementById('history'); | ||
| 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"); | ||
|
|
||
| document.addEventListener('keydown', function(event) { | ||
| // Check if the key pressed is alphanumeric or an operator | ||
| const validKeys = /^[0-9.\+\-\*\/\(\)\^\%\{\}\[\]&]$/; | ||
| if (validKeys.test(event.key)) { | ||
| // Append the key to the input box | ||
| document.getElementById('display').value += event.key; | ||
| } else if(event.key === 'Enter') { | ||
| event.preventDefault(); | ||
| calculate(); | ||
| } else if(event.key === 'Backspace') { | ||
| removeFromDisplay(); | ||
| } | ||
| 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 appendToDisplay(value) { | ||
| display.value += value; | ||
| } | ||
|
|
||
| function removeFromDisplay() { | ||
| let value = display.value | ||
| value = value.substring(0, value.length-1); | ||
| display.value = value; | ||
| let value = display.value; | ||
| value = value.substring(0, value.length - 1); | ||
| display.value = value; | ||
| } | ||
|
|
||
| function clearDisplay() { | ||
| display.value = ''; | ||
| display.value = ""; | ||
| } | ||
|
|
||
| function calculate() { | ||
| try { | ||
| const result = eval(display.value); | ||
| display.value = result; | ||
| } catch (error) { | ||
| display.value = 'Error'; | ||
| } | ||
| try { | ||
| const result = eval(display.value); | ||
| display.value = result; | ||
| } catch (error) { | ||
| display.value = "Error"; | ||
| } | ||
| } | ||
|
|
||
| btn.onclick = function () { | ||
| body.classList.toggle("light"); | ||
| }; | ||
|
|
||
| function updateHistory() { | ||
| historyDiv.innerHTML = ''; | ||
| history.forEach(entry => { | ||
| const p = document.createElement('p'); | ||
| p.textContent = entry; | ||
| historyDiv.appendChild(p); | ||
| }); | ||
| } | ||
| calc.onsubmit = calculate(e); | ||
|
|
||
| function clearOne() { | ||
| let currentValue = calc.txt.value; | ||
| calc.txt.value = currentValue.slice(0, -1); | ||
| } |
Oops, something went wrong.