diff --git a/Calculator/bhpranit08/README.md b/Calculator/bhpranit08/README.md new file mode 100644 index 000000000..7249096f4 --- /dev/null +++ b/Calculator/bhpranit08/README.md @@ -0,0 +1,14 @@ +# Calculator + - A simple calculator using HTML, CSS, and JS
+ - It can calculate some of the basic operations like addition, subtraction, multiplication, and division.
+ - It has validaton to not let the user enter more than one decimal point in one number.
+ - It has validaton to not let the user enter symbols (+, ÷, −, ×) right after one another.
+ + ## Built using: + + - HTML + - CSS + - Javascript + + ## Screenshot + ![Screenshot](images/screenshot.png) diff --git a/Calculator/bhpranit08/images/screenshot.png b/Calculator/bhpranit08/images/screenshot.png new file mode 100644 index 000000000..20062ad90 Binary files /dev/null and b/Calculator/bhpranit08/images/screenshot.png differ diff --git a/Calculator/bhpranit08/index.html b/Calculator/bhpranit08/index.html new file mode 100644 index 000000000..aa6899d35 --- /dev/null +++ b/Calculator/bhpranit08/index.html @@ -0,0 +1,45 @@ + + + + + + + Calculator + + +
+

The Calculator

+ + +
+ + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + \ No newline at end of file diff --git a/Calculator/bhpranit08/script.js b/Calculator/bhpranit08/script.js new file mode 100644 index 000000000..aaa951975 --- /dev/null +++ b/Calculator/bhpranit08/script.js @@ -0,0 +1,61 @@ +const addItem = (item) => { + const inputEl = document.getElementById("input-el") + const realInput = document.getElementById("real-input-el") + + const specials = ["*", "/", "-", "+"] + const currentValue = inputEl.value + + const replacements = { + "*": "×", + "-": "−", + "/": "÷", + "+": "+", + "+": "+", + } + + if(specials.includes(item)) { + inputEl.value += replacements[item] + realInput.value += item + return + } + + if (item === '.') { + const numberSegments = currentValue.split(/[\*\+\-\/]/) + const currentSegment = numberSegments.at(-1) + if (currentSegment.includes('.')) { + return; + } + } + + const lastChar = currentValue.slice(-1) + if (specials.includes(item) && specials.includes(lastChar)) { + return + } + + realInput.value += item + inputEl.value += item +} + +const clearScreen = () => { + document.getElementById("input-el").value = "" + document.getElementById("real-input-el").value = "" +} + +const deleteEl = () => { + const inputEl = document.getElementById("input-el") + const realInput = document.getElementById("real-input-el") + inputEl.value = inputEl.value.slice(0, -1) + realInput.value = realInput.value.slice(0, -1) +} + +const equal = () => { + const realInput = document.getElementById("real-input-el") + const inputEl = document.getElementById("input-el") + try { + realInput.value = eval(realInput.value) + inputEl.value = realInput.value + } catch (err) { + realInput.value = "Error" + inputEl.value = "Error" + } +} \ No newline at end of file diff --git a/Calculator/bhpranit08/style.css b/Calculator/bhpranit08/style.css new file mode 100644 index 000000000..9323dd777 --- /dev/null +++ b/Calculator/bhpranit08/style.css @@ -0,0 +1,102 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); + +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html { + height: 100%; +} + +body { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-family: 'Roboto', sans-serif; +} + +.calculator { + + min-width: 20%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 4px; +} + +.row { + display: flex; + align-items: center; + width: 100%; + justify-content: center; + gap: 2px; +} + +input { + width: 100%; + border: 2px solid rgb(52, 216, 52); + border-radius: 0.3rem; + background-color: rgba(52, 216, 52, 0.527); + height: 7%; + font-size: 2rem; + text-align: right; + padding-right: 4px; + color: black; +} + +button { + width: 100%; + height: 3rem; + transition: transform 0.1s ease-in-out; +} + +button:active { + transform: scale(0.9); +} + +.num-btn { + background-color: rgba(163, 88, 218, 0.527); + border: 2px solid rgb(162, 88, 214); + color: rgb(162, 88, 214); + border-radius: 0.14rem; + font-size: 1.4rem; +} + +.num-btn:active { + background-color: rgb(81, 41, 110); + border: 2px solid rgb(81, 41, 110); + color: white; +} + +.action-btn { + background-color: rgba(51, 104, 173, 0.527); + border: 2px solid rgb(51, 104, 173); + color: rgb(51, 104, 173); + border-radius: 0.15rem; + font-size: 1.5rem; +} + +.action-btn:active { + border: 2px solid rgb(35, 74, 124); + background-color: rgb(35, 74, 124); + color: white; +} + +.mega-btn { + background-color: rgba(233, 171, 55, 0.527); + border: 2px solid rgb(233, 171, 55); + border-radius: 0.15rem; + font-size: 1rem; + color: black; +} + +.mega-btn:active { + background-color: rgb(233, 171, 55); + color: black; +} \ No newline at end of file