diff --git a/assets/backspaceImg.png b/assets/backspaceImg.png new file mode 100644 index 0000000..ae20202 Binary files /dev/null and b/assets/backspaceImg.png differ diff --git a/calculator.html b/calculator.html index 013caa0..c04e472 100644 --- a/calculator.html +++ b/calculator.html @@ -4,9 +4,110 @@ + Calculator +
+ +
+ +
+
+
+
+
+
+ +
+ +
+ AC +
+ +
+ ( ) +
+ +
+ % +
+ +
+ รท +
+ +
+ 7 +
+ +
+ 8 +
+ +
+ 9 +
+ +
+ x +
+ +
+ 4 +
+ +
+ 5 +
+ +
+ 6 +
+ +
+ - +
+ +
+ 1 +
+ +
+ 2 +
+ +
+ 3 +
+ +
+ + +
+ +
+ ⌫ +
+ +
+ 0 +
+ +
+ . +
+ +
+ = +
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..a816ac6 --- /dev/null +++ b/js/script.js @@ -0,0 +1,22 @@ +const keys = document.querySelectorAll('.key'); +const display_input = document.querySelector('.display .input'); +const display_output = document.querySelector('.display .output'); + +let input = ""; + +for (let key of keys){ + const value = key.dataset.key; + + key.addEventListener('click', () => { + if(value == 'clear'){ + input = ""; + display_input.innerHTML = ""; + display_output.innerHTML = ""; + }else if(value == 'backspace'){ + input = input.slice(0, -1); + display_input.innerHTML = input; + }); +} + + + diff --git a/style/style.css b/style/style.css index e69de29..11fbb38 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,129 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; +} + + +body { + background-color: #D9D9D9; +} +.app { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.calculator { + background-color:#FFFF; + width: 100%; + max-width: 375px; + min-height: 700px; + display: flex; + flex-direction: column; + border-radius: 1.5rem; + overflow: hidden; + box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2); + border: 8px solid #988D8D; +} + +.display { + min-height: 200px; + padding: 1.5rem; + display: flex; + justify-content: flex-end; + align-items: flex-end; + color: white; + text-align: right; + flex: 1 1 0%; +} + +.display .content { + display: flex; + flex-direction: column; + justify-content: flex-end; + width: 100%; + max-width: 100%; + overflow: auto; +} + +.display .input { + width: 100%; + font-size: 1.25rem; + margin-bottom: 0.5rem; +} + +.display .output { + font-size: 3rem; + font-weight: 700; + width: 100%; + white-space: nowrap; +} + +.display .operator { + color: #EB6666; +} + +.display .brackets, +.display .percent { + color: #26FED7; +} + +.keys { + background-color: #F2F2F2; + padding: 1.5rem; + border-radius: 1.5rem 1.5rem 0 0; + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(5, 1fr); + grid-gap: 1rem; + +} + +.keys .key { + position: relative; + cursor: pointer; + + display: block; + height: 0; + padding-top: 100%; + background-color: #544D4D; + border-radius: 50%; + transition: 0.2s; + user-select: none; +} + +.keys .key span { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + font-size: 24px; + font-weight: 700; + color: #FFF; +} + +.keys .key:hover { + box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.2); +} + +.keys .key.operator span { + + color: #ffffff; +} + +.keys .key.action span { + + color: #ffffff; +} + +.keys .key.operator { + background-color: #FF9D20;; +} + +.keys .key.key.action { + background-color: #CBC4C4; +}