From ee50462ad677bcb49ab348d0ffd7e05cc0b3c5d6 Mon Sep 17 00:00:00 2001 From: stefanus-ai-tech Date: Sun, 20 Apr 2025 02:22:37 +0700 Subject: [PATCH 1/3] FE init --- index.html | 68 +++++++++++++++++++++++++++++++++++++++++++ script.js | 0 styles.css | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 152 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..6dca9be --- /dev/null +++ b/index.html @@ -0,0 +1,68 @@ + + + + + + CalculatorApp + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..e69de29 diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..40e18d1 --- /dev/null +++ b/styles.css @@ -0,0 +1,84 @@ +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: aliceblue; + font-family: sans-serif; +} + +.calculator { + width: 250px; + border: 1px solid #bde1de; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + background-color: aliceblue; +} + +#calculator-display { + width: 100%; + padding: 10px 15px; + font-size: 1.8em; + text-align: left; + border: none; + background-color: rgb(221, 243, 250); + color: white; + box-sizing: border-box; + border-bottom: 1px solid #bde1de; +} + +#calculator-display::placeholder { + color: rgb(242, 191, 97); +} + +.calculator-keys { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1px; + background-color: #ccc; +} + +.calculator-key { + padding: 15px 0; + font-size: 1.2em; + border: none; + cursor: pointer; + transition: background-color 0.2s ease; + background-color: rgb(236, 250, 250); +} + +.calculator-key:hover { + background-color: #bde1de; +} + +.calculator-key:active { + background-color: rgb(248, 231, 215); +} + +.calculator-key--operator { + background-color: rgb(246, 253, 255); +} + +.calculator-key--operator:hover { + background-color: #ffffff; +} + +.calculator-key--operator:active { + background-color: rgb(252, 243, 234); +} + +button[data-action='calculate'] { + background-color: azure; + color: rgb(242, 191, 97); + grid-row: auto; + grid-column: auto; +} + +button[data-action='calculate']:hover { + background-color: aquamarine; +} + +.calculator-key--zero { + grid-column: span 3; +} From 2a6f6034e230e74e716051eb2ce44868f284324f Mon Sep 17 00:00:00 2001 From: stefanus-ai-tech Date: Sun, 20 Apr 2025 03:10:12 +0700 Subject: [PATCH 2/3] added first logic --- index.html | 2 +- script.js | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 2 +- 3 files changed, 108 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 6dca9be..142cfa2 100644 --- a/index.html +++ b/index.html @@ -63,6 +63,6 @@ - + diff --git a/script.js b/script.js index e69de29..6cd3f43 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,106 @@ +const display = document.getElementById('calculator-display'); +const keysContainer = document.querySelector('.calculator-keys'); + +let valuePertama = ''; +let operator = ''; +let isNungguNextValue = false; + +function calculate(angka1, op, angka2) { + const n1 = parseFloat(angka1); + const n2 = parseFloat(angka2); + + switch (op) { + case '+': + return n1 + n2; + case '-': + return n1 - n2; + case '*': + return n1 * n2; + case '/': + return n1 !== 0 ? n1 / n2 : 'Error'; + default: + return n2; + } +} + +keysContainer.addEventListener('click', (event) => { + const key = event.target; + if (!key.matches('button')) { + return; + } + + const action = key.dataset.action; + const value = key.dataset.value; + + if (!action && value !== undefined) { + if (display.value === '0' || isNungguNextValue) { + display.value = value; + isNungguNextValue = false; + } else { + display.value += value; + } + console.log('Nomor:', value); + } + + if (value === '.') { + if (!display.value.includes('.') && !isNungguNextValue) { + display.value += '.'; + } else if (isNungguNextValue) { + display.value = '0.'; + isNungguNextValue = false; + } + console.log('Decimal'); + } + if (['+', '-', '*', '/'].includes(value)) { + if (operator && !isNungguNextValue) { + const result = calculate(valuePertama, operator, display.value); + display.value = String(result); + valuePertama = String(result); + } else { + valuePertama = display.value; + } + operator = value; + isNungguNextValue = true; + console.log('Operator:', operator, 'Value pertama:', valuePertama); + } + + if (action === 'clear') { + display.value = '0'; + valuePertama = ''; + operator = ''; + isNungguNextValue = false; + console.log('Cleared!'); + } + + if (action === 'del') { + if (!isNungguNextValue) { + display.value = display.value.slice(0, -1); + if (display.value === '') { + display.value = '0'; + } + } + console.log('Delete'); + } + + if (action === 'calculate') { + if (valuePertama && operator && !isNungguNextValue) { + const valueKedua = display.value; + const result = calculate(valuePertama, operator, valueKedua); + display.value = String(result); + + valuePertama = ''; + operator = ''; + isNungguNextValue = true; + console.log( + 'Mengkalkulasi:', + valuePertama, + operator, + valueKedua, + '=', + result + ); + } else { + console.log('Mengkalkulasi: Ga cukup operatornya'); + } + } +}); diff --git a/styles.css b/styles.css index 40e18d1..fca28d5 100644 --- a/styles.css +++ b/styles.css @@ -23,7 +23,7 @@ body { text-align: left; border: none; background-color: rgb(221, 243, 250); - color: white; + color: rgb(242, 191, 97); box-sizing: border-box; border-bottom: 1px solid #bde1de; } From 134fb3c412aae08f6a2195b01d679d457ec8d3ef Mon Sep 17 00:00:00 2001 From: stefanus-ai-tech Date: Mon, 21 Apr 2025 01:48:03 +0700 Subject: [PATCH 3/3] added title --- index.html | 109 ++++++++++++++++++++++++++++++----------------------- styles.css | 21 +++++++++++ 2 files changed, 82 insertions(+), 48 deletions(-) diff --git a/index.html b/index.html index 142cfa2..fa6cfab 100644 --- a/index.html +++ b/index.html @@ -9,57 +9,70 @@ -
- -
- - - - - - - - - +
+

UT Programming Apps

+
+ +
+ + + + + + + + + - - - - - + + + + + - - - - + + + + - - - + + + +
diff --git a/styles.css b/styles.css index fca28d5..de79f44 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,7 @@ +html, body { display: flex; + flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; @@ -7,6 +9,25 @@ body { font-family: sans-serif; } +.container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; +} + +.title { + margin-bottom: 1rem; + font-size: 2rem; + color: rgb(242, 191, 97); + transition: color 0.2s ease; +} + +.title:hover { + color: rgb(252, 207, 148); +} + .calculator { width: 250px; border: 1px solid #bde1de;