From 9d5999a442f2e253602fa43541d54e7a0d1465a4 Mon Sep 17 00:00:00 2001 From: jawed321 <73461761+jawed321@users.noreply.github.com> Date: Tue, 12 Oct 2021 11:20:49 +0530 Subject: [PATCH] calculator using html,css,js --- WebDev/Frontend/calculator/calc.js | 89 ++++++++++++++++++++++ WebDev/Frontend/calculator/calculator.html | 52 +++++++++++++ WebDev/Frontend/calculator/style.css | 29 +++++++ 3 files changed, 170 insertions(+) create mode 100644 WebDev/Frontend/calculator/calc.js create mode 100644 WebDev/Frontend/calculator/calculator.html create mode 100644 WebDev/Frontend/calculator/style.css diff --git a/WebDev/Frontend/calculator/calc.js b/WebDev/Frontend/calculator/calc.js new file mode 100644 index 0000000..9a75080 --- /dev/null +++ b/WebDev/Frontend/calculator/calc.js @@ -0,0 +1,89 @@ +let screen = document.getElementById('screen') +let screenValue = ''; +regex = /[0-9]$/ +regex1 = /[0-9]$/ +regex2=/[^\+]$/ +regex3=/[^\-]$/ +buttons = document.querySelectorAll('button') +for (item of buttons) { + item.addEventListener('click', (e) => { + buttontext = e.target.innerText; + console.log(buttontext); + if (buttontext == "X") { + if (regex.test(screenValue)) { + buttontext = "*"; + screen.value = screenValue + "*"; + screenValue = screen.value; + } + else if(screenValue.slice((screenValue.length-1), screenValue.length)=="/"){ + screen.value=screenValue.slice(0, (screenValue.length-1))+ "*"; + //console.log(screen.value); + screenValue=screen.value; + } + else { + screenValue = screenValue; + } + + } + else if (buttontext == "/") { + if (regex1.test(screenValue)) { + buttontext = "/"; + screen.value = screenValue + "/"; + screenValue = screen.value; + } + else if(screenValue.slice((screenValue.length-1), screenValue.length)=="*"){ + screen.value=screenValue.slice(0, (screenValue.length-1))+ "/"; + //console.log(screen.value); + screenValue=screen.value; + } + else { + screenValue = screenValue; + } + } + else if (buttontext == "+") { + if (regex2.test(screenValue)) { + buttontext = "+"; + screen.value = screenValue + "+"; + screenValue = screen.value; + } + else { + screenValue = screenValue; + } + } + else if (buttontext == "-") { + if (regex3.test(screenValue)) { + buttontext = "-"; + screen.value = screenValue + "-"; + screenValue = screen.value; + } + else { + screenValue = screenValue; + } + } + else if (buttontext == "c") { + screenValue = ""; + screen.value = screenValue; + } + else if (buttontext == "=") { + + try { + if(isNaN(eval(screenValue))) throw "Error"; + screenValue = eval(screenValue) + screen.value = screenValue; + } + catch(err) { + screenValue = "Error"; + screen.value=screenValue; + setTimeout(()=>{ + screenValue = ""; + screen.value=screenValue; + }, 3000) + } + + } + else { + screenValue += buttontext; + screen.value = screenValue; + } + }) +} diff --git a/WebDev/Frontend/calculator/calculator.html b/WebDev/Frontend/calculator/calculator.html new file mode 100644 index 0000000..c39ed4e --- /dev/null +++ b/WebDev/Frontend/calculator/calculator.html @@ -0,0 +1,52 @@ + + + + + + + + calculator + + +
+
+

Calculator

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + \ No newline at end of file diff --git a/WebDev/Frontend/calculator/style.css b/WebDev/Frontend/calculator/style.css new file mode 100644 index 0000000..0b1617d --- /dev/null +++ b/WebDev/Frontend/calculator/style.css @@ -0,0 +1,29 @@ +.container{ + margin-top: 20px; + text-align: center; +} +table{ + margin: auto; + +} +input{ + font-size: 1.7rem; + width: 242px; + height: 40px; + margin-bottom: 15px; + border-radius: 10px; +} +button{ + margin: 3px; + font-size: 23px; + width: 55px; + height: 45px; + background: #EDBB00; + border-radius: 18px; +} +.calculator{ + display: inline-block; + padding: 10px; + background: linear-gradient(rgb(245, 228, 228), rgb(103, 103, 245)); + border-radius: 15px; +} \ No newline at end of file