rrrzzzqqq · stefanus-ai-tech · Apr 19, 2025 · Apr 19, 2025 · Apr 20, 2025
diff --git a/index.html b/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>CalculatorApp</title>
+    <meta name="description" content="CalculatorApp for UT learner" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1 class="title">UT Programming Apps</h1>
+      <div class="calculator">
+        <input type="text" id="calculator-display" readonly value="0" />
+        <div class="calculator-keys">
+          <button
+            class="calculator-key calculator-key--operator"
+            data-action="del">
+            del
+          </button>
+          <button
+            class="calculator-key calculator-key--operator"
+            data-action="clear">
+            C
+          </button>
+          <button
+            class="calculator-key calculator-key--operator"
+            data-value="/">
+            /
+          </button>
+          <button
+            class="calculator-key calculator-key--operator"
+            data-value="*">
+            x
+          </button>
+          <!-- Row 1 -->
+          <button class="calculator-key" data-value="7">7</button>
+          <button class="calculator-key" data-value="8">8</button>
+          <button class="calculator-key" data-value="9">9</button>
+          <button
+            class="calculator-key calculator-key--operator"
+            data-value="-">
+            -
+          </button>
+
+          <!-- Row 2 -->
+          <button class="calculator-key" data-value="4">4</button>
+          <button class="calculator-key" data-value="5">5</button>
+          <button class="calculator-key" data-value="6">6</button>
+          <button
+            class="calculator-key calculator-key--operator"
+            data-value="+">
+            +
+          </button>
+
+          <!-- Row 3 -->
+          <button class="calculator-key" data-value="1">1</button>
+          <button class="calculator-key" data-value="2">2</button>
+          <button class="calculator-key" data-value="3">3</button>
+
+          <button
+            class="calculator-key calculator-key--operator"
+            data-value=".">
+            .
+          </button>
+          <button class="calculator-key calculator-key--zero" data-value="0">
+            0
+          </button>
+          <button
+            class="calculator-key calculator-key--operator"
+            data-action="calculate">
+            =
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git 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
@@ -0,0 +1,105 @@
+html,
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: aliceblue;
+  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;
+  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: rgb(242, 191, 97);
+  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;
+}