diff --git a/Calculator/sushil-2803/index.html b/Calculator/sushil-2803/index.html index 92ad6431f..8067022c0 100644 --- a/Calculator/sushil-2803/index.html +++ b/Calculator/sushil-2803/index.html @@ -2,46 +2,37 @@ - - Calculator + + Calculator - + -
-
-
-
-
+
-
-
-
×
-
÷
-
-
-
-
7
-
8
-
9
-
-
-
4
-
5
-
6
-
-
-
1
-
2
-
3
-
-
-
0
-
.
-
C
-
+
+
+
+ +
+
+
-
+
×
+
÷
+
7
+
8
+
9
+
4
+
5
+
6
+
1
+
2
+
3
+
0
+
.
+
C
+
=
-
=
-
- +
+ - \ No newline at end of file + + diff --git a/Calculator/sushil-2803/style.css b/Calculator/sushil-2803/style.css index 940dcc4bb..169b410cb 100644 --- a/Calculator/sushil-2803/style.css +++ b/Calculator/sushil-2803/style.css @@ -1,6 +1,15 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} body { - width: 500px; - margin: 4% auto; + height: 800px; + display: flex; + align-items: center; + justify-content: center; + overflow-y: hidden; + width: 100%; font-family: 'Source Sans Pro', sans-serif; letter-spacing: 5px; font-size: 1.8rem; @@ -10,16 +19,29 @@ body { } .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; + border-radius: 2rem; + background-color: rgb(225, 225, 255); + height: 80%; + width: min(400px,95%); + display: flex; + justify-content:center; + align-items: center; + box-shadow: rgb(38, 57, 77) 0rem 1rem 1.5rem -0.5rem; + flex-direction: column; + + /* padding: 20px; */ + + } .input { + width: 90%; + height: 35%; + border-radius: 1.5rem; + background-color: white; border: 1px solid #ddd; - border-radius: 1px; - height: 60px; + + padding-right: 15px; padding-top: 10px; text-align: right; @@ -35,7 +57,99 @@ body { box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2); } -.buttons {} +.buttons { + height: 60%; + width: 90%; + display: grid; + grid-template-rows:repeat(5,1fr); + grid-template-columns: repeat(4,1fr); + justify-content: space-around; + align-items: center; + grid-template-areas: + "o1 o2 o3 o4" + "n1 n2 n3 eq" + "n4 n5 n6 eq" + "n7 n8 n9 eq" + "n10 n11 n12 eq"; +} +.o,.n,.eq,.g{ + display: flex; + justify-content: center; + align-items: center; + justify-self: center; + height: 90%; + width: 90%; + font-weight: 600; + border-radius: 1rem; + background-color: white; + align-self: center; +} +.o{ + /* height: 100%; */ + /* width: 96%; */ + background-color: white; + color: #59a800; + + /* background-color: #c5d8f6; */ + border-radius: 1rem; + + +} +.g{ + color: rgb(249, 165, 19); +} +.o1{ + grid-area: o1; +} +.o2{ + grid-area: o2; +} +.o3{ + grid-area: o3; +} +.o4{ + grid-area: o4; +} +.n1{ + grid-area: n1; +} +.n2{ + grid-area: n2; +} +.n3{ + grid-area: n3; +} +.n4{ + grid-area: n4; +} +.n5{ + grid-area: n5; +} +.n6{ + grid-area: n6; +} +.n7{ + grid-area: n7; +} +.n8{ + grid-area: n8; +} +.n9{ + grid-area: n9; +} +.n10{ + grid-area: n10; +} +.n11{ + grid-area: n11; +} +.n12{ + grid-area: n12; +} +.eq{ + grid-area: eq; +} + .operators {} @@ -64,7 +178,8 @@ body { } .leftPanel { - display: inline-block; + + width: 100%; } .numbers div { @@ -93,26 +208,22 @@ body { div.equal { display: inline-block; - border: 1px solid #3079ED; - border-radius: 1px; - width: 17%; + height: 97%; + text-align: center; - padding: 127px 10px; - margin: 10px 6px 10px 0; - vertical-align: top; + display: flex; + justify-content: center; + align-items: center; cursor: pointer; color: #FFF; - background-color: #4d90fe; + background-color: #3f45ff; 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; + background-color: #242ef6; } div.equal:active { font-weight: bold; -} \ No newline at end of file +} diff --git a/Calculator/sushil-2803/use.js b/Calculator/sushil-2803/use.js index daa6fd380..68630e05b 100644 --- a/Calculator/sushil-2803/use.js +++ b/Calculator/sushil-2803/use.js @@ -1,64 +1,116 @@ "use strict"; var input = document.getElementById('input'), // input/output button - number = document.querySelectorAll('.numbers div'), // number buttons - operator = document.querySelectorAll('.operators div'), // operator buttons + number = document.querySelectorAll('.n'), // number buttons + operator = document.querySelectorAll('.o'), // operator buttons result = document.getElementById('result'), // equal button clear = document.getElementById('clear'), // clear button resultDisplayed = false; // flag to keep an eye on what output is displayed // adding click handlers to number buttons -for (var i = 0; i < number.length; i++) { - number[i].addEventListener("click", function(e) { - // storing current input string and its last character in variables - used later - var currentString = input.innerHTML; - var lastChar = currentString[currentString.length - 1]; - - // if result is not diplayed, just keep adding - if (resultDisplayed === false) { - input.innerHTML += e.target.innerHTML; - } else if (resultDisplayed === true && lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") { - // if result is currently displayed and user pressed an operator - // we need to keep on adding to the string for next operation - resultDisplayed = false; - input.innerHTML += e.target.innerHTML; - } else { - // if result is currently displayed and user pressed a number - // we need clear the input string and add the new input to start the new opration - resultDisplayed = false; - input.innerHTML = ""; - input.innerHTML += e.target.innerHTML; - } - - }); +function number_handler(event) { + // storing current input string and its last character in variables - used later + var currentString = input.innerHTML; + var lastChar = currentString[currentString.length - 1]; + + // if result is not diplayed, just keep adding + if (resultDisplayed === false) { + input.innerHTML += event.target.innerHTML; + } else if (resultDisplayed === true && lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") { + // if result is currently displayed and user pressed an operator + // we need to keep on adding to the string for next operation + resultDisplayed = false; + input.innerHTML += event.target.innerHTML; + } else { + // if result is currently displayed and user pressed a number + // we need clear the input string and add the new input to start the new opration + resultDisplayed = false; + input.innerHTML = ""; + input.innerHTML += event.target.innerHTML; + } + +} +for (var i = 0; i < number.length; i++) { + number[i].addEventListener("click",number_handler ); } // adding click handlers to number buttons +function operator_handler(event) { + // storing current input string and its last character in variables - used later + var currentString = input.innerHTML; + var lastChar = currentString[currentString.length - 1]; + + // if last character entered is an operator, replace it with the currently pressed one + if (lastChar === "+" || lastChar === "-" || lastChar === "x" || lastChar === "÷") { + var newString = currentString.substring(0, currentString.length - 1) + event.target.innerHTML; + input.innerHTML = newString; + } else if (currentString.length == 0) { + // if first key pressed is an opearator, don't do anything + console.log("enter a number first"); + } else { + // else just add the operator pressed to the input + input.innerHTML += event.target.innerHTML; + } + +} for (var i = 0; i < operator.length; i++) { - operator[i].addEventListener("click", function(e) { + operator[i].addEventListener("click",operator_handler ); +} +// adding a window eventListener to add keypress events to window +function windows_handler(event){ + if (parseInt(event.key)<=9 || parseInt(event.key)>=0) { // storing current input string and its last character in variables - used later - var currentString = input.innerHTML; - var lastChar = currentString[currentString.length - 1]; - - // if last character entered is an operator, replace it with the currently pressed one - if (lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") { - var newString = currentString.substring(0, currentString.length - 1) + e.target.innerHTML; - input.innerHTML = newString; - } else if (currentString.length == 0) { - // if first key pressed is an opearator, don't do anything - console.log("enter a number first"); - } else { - // else just add the operator pressed to the input - input.innerHTML += e.target.innerHTML; - } - - }); + var currentString = input.innerHTML; + var lastChar = currentString[currentString.length - 1]; + + // if result is not diplayed, just keep adding + if (resultDisplayed === false) { + input.innerHTML += parseInt(event.key); + } else if (resultDisplayed === true && lastChar === "+" || lastChar === "-" || lastChar === "×" || lastChar === "÷") { + // if result is currently displayed and user pressed an operator + // we need to keep on adding to the string for next operation + resultDisplayed = false; + input.innerHTML += parseInt(event.key); + } else { + // if result is currently displayed and user pressed a number + // we need clear the input string and add the new input to start the new opration + resultDisplayed = false; + input.innerHTML = ""; + input.innerHTML += parseInt(event.key); + } + } + else if(event.key === "+" || event.key === "-" || event.key === "x" || event.key === "÷" || event.key === "/" || event.key === "*" ){ + // storing current input string and its last character in variables - used later + var currentString = input.innerHTML; + var lastChar = currentString[currentString.length - 1]; + var s=event.key; + if(s=="/"){ // deckared a variable s to accomodte / as ÷ + s="÷" + } + if(s=="*"){ // to accomodate * as × + s=document.querySelector('.multiply_sign').textContent; // to apply sign x when * is pressed + } + // if last character entered is an operator, replace it with the currently pressed one + if (lastChar === "+" || lastChar === "-" || lastChar === "x" || lastChar === "÷") { + var newString = currentString.substring(0, currentString.length - 1) + s; + input.innerHTML = newString; + } else if (currentString.length == 0) { + // if first key pressed is an opearator, don't do anything + console.log("enter a number first"); + } else { + // else just add the operator pressed to the input + input.innerHTML += s; + } + } } +window.addEventListener("keypress",windows_handler); + // on click of 'equal' button -result.addEventListener("click", function() { + +function output(){ // this is the string that we will be processing eg. -10+26+33-56*34/23 var inputString = input.innerHTML; @@ -112,9 +164,22 @@ result.addEventListener("click", function() { input.innerHTML = numbers[0]; // displaying the output resultDisplayed = true; // turning flag if result is displayed -}); +} +result.addEventListener("click",output ); + // clearing the input on press of clear clear.addEventListener("click", function() { input.innerHTML = ""; -}) \ No newline at end of file +}) + +//adding a event for clearing with the help of backspace +window.onkeydown = function(event){ + let key = event.key; + if (key === "Backspace") { + input.innerHTML = ""; + } + else if(key==="Enter"){ + output() + } +}