Kalkulator Pintar<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Poppins', sans-serif;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n body {\r\n min-height: 100vh;\r\n min-height: -webkit-fill-available;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: linear-gradient(45deg, #ff6b6b, #4ecdc4);\r\n padding: 10px;\r\n }\r\n\r\n html {\r\n height: -webkit-fill-available;\r\n }\r\n\r\n .calculator {\r\n background: rgba(255, 255, 255, 0.95);\r\n padding: 20px;\r\n border-radius: 25px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n width: 100%;\r\n max-width: 400px;\r\n margin: auto;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n\r\n .display {\r\n background: #f8f9fa;\r\n padding: 20px;\r\n border-radius: 15px;\r\n text-align: right;\r\n position: relative;\r\n flex: 0 0 auto;\r\n min-height: 140px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n }\r\n\r\n .previous-operand {\r\n font-size: clamp(1rem, 3vw, 1.2rem);\r\n color: #6c757d;\r\n min-height: 24px;\r\n margin-bottom: 8px;\r\n word-wrap: break-word;\r\n word-break: break-all;\r\n }\r\n\r\n .current-operand {\r\n font-size: clamp(2rem, 6vw, 2.8rem);\r\n color: #212529;\r\n word-wrap: break-word;\r\n word-break: break-all;\r\n line-height: 1.2;\r\n }\r\n\r\n .buttons {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: min(3vw, 10px);\r\n flex: 1;\r\n }\r\n\r\n button {\r\n width: 100%;\r\n aspect-ratio: 1;\r\n font-size: clamp(1.2rem, 4vw, 1.5rem);\r\n border: none;\r\n border-radius: 15px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n color: white;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n touch-action: manipulation;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n button:hover {\r\n transform: translateY(-2px);\r\n filter: brightness(110%);\r\n }\r\n\r\n button:active {\r\n transform: translateY(0);\r\n filter: brightness(90%);\r\n }\r\n\r\n .number { background: #4ecdc4; }\r\n .double-zero { background: #4ecdc4; }\r\n .operator { background: #ff6b6b; }\r\n .equals { background: #45b7af; }\r\n .clear { background: #ff9f43; }\r\n .delete { background: #ff6b6b; }\r\n\r\n .double-zero {\r\n grid-column: span 2;\r\n aspect-ratio: 2\/1;\r\n }\r\n\r\n .voice-btn {\r\n position: absolute;\r\n top: 10px;\r\n left: 10px;\r\n background: #45b7af;\r\n border: none;\r\n border-radius: 50%;\r\n width: clamp(35px, 8vw, 45px);\r\n height: clamp(35px, 8vw, 45px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n font-size: clamp(1rem, 3vw, 1.2rem);\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\r\n }\r\n\r\n \/* Mobile Portrait Optimization *\/\r\n @media (max-width: 480px) {\r\n body {\r\n padding: 0;\r\n }\r\n\r\n .calculator {\r\n min-height: 100vh;\r\n border-radius: 0;\r\n padding: 15px;\r\n justify-content: space-between;\r\n }\r\n\r\n .buttons {\r\n gap: 8px;\r\n }\r\n\r\n button {\r\n font-size: 1.8rem;\r\n }\r\n }\r\n\r\n \/* Mobile Landscape Optimization *\/\r\n @media (max-height: 480px) and (orientation: landscape) {\r\n .calculator {\r\n max-height: 100vh;\r\n flex-direction: row;\r\n max-width: 100%;\r\n gap: 15px;\r\n }\r\n\r\n .display {\r\n width: 40%;\r\n margin: 0;\r\n border-radius: 15px;\r\n }\r\n\r\n .buttons {\r\n width: 60%;\r\n gap: 5px;\r\n }\r\n\r\n button {\r\n aspect-ratio: 1.5;\r\n font-size: 1.4rem;\r\n }\r\n\r\n .double-zero {\r\n aspect-ratio: 3\/1.5;\r\n }\r\n }\r\n\r\n \/* For very small screens *\/\r\n @media (max-width: 320px) {\r\n .calculator {\r\n padding: 10px;\r\n border-radius: 15px;\r\n }\r\n\r\n .display {\r\n padding: 15px;\r\n min-height: 120px;\r\n border-radius: 15px;\r\n }\r\n\r\n .buttons {\r\n gap: 6px;\r\n }\r\n\r\n button {\r\n font-size: 1.5rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"calculator\">\r\n <div class=\"display\">\r\n <button class=\"voice-btn\" id=\"voiceBtn\">\ud83d\udd0a<\/button>\r\n <div class=\"previous-operand\"><\/div>\r\n <div class=\"current-operand\">0<\/div>\r\n <\/div>\r\n <div class=\"buttons\">\r\n <button class=\"clear\" data-action=\"clear\">C<\/button>\r\n <button class=\"delete\" data-action=\"delete\">\u232b<\/button>\r\n <button class=\"operator\" data-action=\"\/\">÷<\/button>\r\n <button class=\"operator\" data-action=\"*\">×<\/button>\r\n <button class=\"number\" data-number=\"7\">7<\/button>\r\n <button class=\"number\" data-number=\"8\">8<\/button>\r\n <button class=\"number\" data-number=\"9\">9<\/button>\r\n <button class=\"operator\" data-action=\"-\">-<\/button>\r\n <button class=\"number\" data-number=\"4\">4<\/button>\r\n <button class=\"number\" data-number=\"5\">5<\/button>\r\n <button class=\"number\" data-number=\"6\">6<\/button>\r\n <button class=\"operator\" data-action=\"+\">+<\/button>\r\n <button class=\"number\" data-number=\"1\">1<\/button>\r\n <button class=\"number\" data-number=\"2\">2<\/button>\r\n <button class=\"number\" data-number=\"3\">3<\/button>\r\n <button class=\"equals\" data-action=\"=\">=<\/button>\r\n <button class=\"number\" data-number=\"0\">0<\/button>\r\n <button class=\"double-zero\" data-number=\"00\">00<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ [Previous JavaScript remains exactly the same]\r\n class Calculator {\r\n constructor() {\r\n this.previousOperand = '';\r\n this.currentOperand = '0';\r\n this.operation = undefined;\r\n this.shouldResetScreen = false;\r\n }\r\n\r\n clear() {\r\n this.currentOperand = '0';\r\n this.previousOperand = '';\r\n this.operation = undefined;\r\n }\r\n\r\n delete() {\r\n if (this.currentOperand === '0') return;\r\n if (this.currentOperand.length === 1) {\r\n this.currentOperand = '0';\r\n } else {\r\n this.currentOperand = this.currentOperand.slice(0, -1);\r\n }\r\n }\r\n\r\n appendNumber(number) {\r\n if (this.shouldResetScreen) {\r\n this.currentOperand = '';\r\n this.shouldResetScreen = false;\r\n }\r\n if (number === '.' && this.currentOperand.includes('.')) return;\r\n if (this.currentOperand === '0' && number !== '.') {\r\n this.currentOperand = number;\r\n } else {\r\n \/\/ Tambahan pengecekan untuk \"00\"\r\n if (number === '00' && this.currentOperand === '0') return;\r\n this.currentOperand += number;\r\n }\r\n }\r\n\r\n chooseOperation(operation) {\r\n if (this.currentOperand === '') return;\r\n if (this.previousOperand !== '') {\r\n this.compute();\r\n }\r\n this.operation = operation;\r\n this.previousOperand = this.currentOperand;\r\n this.currentOperand = '';\r\n }\r\n\r\n getOperationName(operation) {\r\n switch(operation) {\r\n case '+': return 'ditambah';\r\n case '-': return 'dikurang';\r\n case '*': return 'dikali';\r\n case '\/': return 'dibagi';\r\n default: return '';\r\n }\r\n }\r\n\r\n compute() {\r\n let computation;\r\n const prev = parseFloat(this.previousOperand);\r\n const current = parseFloat(this.currentOperand);\r\n \r\n if (isNaN(prev) || isNaN(current)) return;\r\n\r\n switch (this.operation) {\r\n case '+':\r\n computation = prev + current;\r\n break;\r\n case '-':\r\n computation = prev - current;\r\n break;\r\n case '*':\r\n computation = prev * current;\r\n break;\r\n case '\/':\r\n computation = prev \/ current;\r\n break;\r\n default:\r\n return;\r\n }\r\n\r\n const formattedResult = this.formatNumber(computation);\r\n const operationName = this.getOperationName(this.operation);\r\n const speechText = `${this.formatNumber(prev)} ${operationName} ${this.formatNumber(current)} sama dengan ${formattedResult}`;\r\n \r\n this.speak(speechText);\r\n\r\n this.currentOperand = computation.toString();\r\n this.operation = undefined;\r\n this.previousOperand = '';\r\n this.shouldResetScreen = true;\r\n }\r\n\r\n formatNumber(number) {\r\n const stringNumber = number.toString();\r\n const [integerDigits, decimalDigits] = stringNumber.split('.');\r\n if (decimalDigits !== undefined) {\r\n return `${parseInt(integerDigits).toLocaleString('id-ID')} koma ${decimalDigits}`;\r\n }\r\n return parseInt(integerDigits).toLocaleString('id-ID');\r\n }\r\n\r\n speak(text) {\r\n speechSynthesis.cancel();\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n utterance.lang = 'id-ID';\r\n utterance.rate = 0.9;\r\n utterance.pitch = 1.2;\r\n speechSynthesis.speak(utterance);\r\n }\r\n\r\n updateDisplay() {\r\n document.querySelector('.current-operand').textContent = this.currentOperand;\r\n if (this.operation != null) {\r\n document.querySelector('.previous-operand').textContent = \r\n `${this.previousOperand} ${this.operation}`;\r\n } else {\r\n document.querySelector('.previous-operand').textContent = '';\r\n }\r\n }\r\n }\r\n\r\n const calculator = new Calculator();\r\n\r\n document.querySelectorAll('[data-number]').forEach(button => {\r\n button.addEventListener('click', () => {\r\n calculator.appendNumber(button.dataset.number);\r\n calculator.updateDisplay();\r\n calculator.speak(button.dataset.number);\r\n });\r\n });\r\n\r\n document.querySelectorAll('[data-action]').forEach(button => {\r\n button.addEventListener('click', () => {\r\n switch (button.dataset.action) {\r\n case 'clear':\r\n calculator.clear();\r\n calculator.speak('Hapus semua');\r\n break;\r\n case 'delete':\r\n calculator.delete();\r\n calculator.speak('Hapus');\r\n break;\r\n case '=':\r\n calculator.compute();\r\n break;\r\n default:\r\n calculator.chooseOperation(button.dataset.action);\r\n break;\r\n }\r\n calculator.updateDisplay();\r\n });\r\n });\r\n\r\n document.getElementById('voiceBtn').addEventListener('click', () => {\r\n calculator.speak('Selamat datang di Kalkulator Pintar! Ayo belajar berhitung!');\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Kalkulator Pintar \ud83d\udd0a 0 C \u232b ÷ × 7 8 9 – 4 5 6 + 1 2 3 = 0 00<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/423"}],"collection":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/comments?post=423"}],"version-history":[{"count":31,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/423\/revisions"}],"predecessor-version":[{"id":458,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/423\/revisions\/458"}],"wp:attachment":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/media?parent=423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Kalkulator Pintar<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Poppins', sans-serif;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n\r\n body {\r\n min-height: 100vh;\r\n min-height: -webkit-fill-available;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: linear-gradient(45deg, #ff6b6b, #4ecdc4);\r\n padding: 10px;\r\n }\r\n\r\n html {\r\n height: -webkit-fill-available;\r\n }\r\n\r\n .calculator {\r\n background: rgba(255, 255, 255, 0.95);\r\n padding: 20px;\r\n border-radius: 25px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n width: 100%;\r\n max-width: 400px;\r\n margin: auto;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n }\r\n\r\n .display {\r\n background: #f8f9fa;\r\n padding: 20px;\r\n border-radius: 15px;\r\n text-align: right;\r\n position: relative;\r\n flex: 0 0 auto;\r\n min-height: 140px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n }\r\n\r\n .previous-operand {\r\n font-size: clamp(1rem, 3vw, 1.2rem);\r\n color: #6c757d;\r\n min-height: 24px;\r\n margin-bottom: 8px;\r\n word-wrap: break-word;\r\n word-break: break-all;\r\n }\r\n\r\n .current-operand {\r\n font-size: clamp(2rem, 6vw, 2.8rem);\r\n color: #212529;\r\n word-wrap: break-word;\r\n word-break: break-all;\r\n line-height: 1.2;\r\n }\r\n\r\n .buttons {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: min(3vw, 10px);\r\n flex: 1;\r\n }\r\n\r\n button {\r\n width: 100%;\r\n aspect-ratio: 1;\r\n font-size: clamp(1.2rem, 4vw, 1.5rem);\r\n border: none;\r\n border-radius: 15px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n color: white;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n touch-action: manipulation;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n button:hover {\r\n transform: translateY(-2px);\r\n filter: brightness(110%);\r\n }\r\n\r\n button:active {\r\n transform: translateY(0);\r\n filter: brightness(90%);\r\n }\r\n\r\n .number { background: #4ecdc4; }\r\n .double-zero { background: #4ecdc4; }\r\n .operator { background: #ff6b6b; }\r\n .equals { background: #45b7af; }\r\n .clear { background: #ff9f43; }\r\n .delete { background: #ff6b6b; }\r\n\r\n .double-zero {\r\n grid-column: span 2;\r\n aspect-ratio: 2\/1;\r\n }\r\n\r\n .voice-btn {\r\n position: absolute;\r\n top: 10px;\r\n left: 10px;\r\n background: #45b7af;\r\n border: none;\r\n border-radius: 50%;\r\n width: clamp(35px, 8vw, 45px);\r\n height: clamp(35px, 8vw, 45px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n font-size: clamp(1rem, 3vw, 1.2rem);\r\n box-shadow: 0 2px 5px rgba(0,0,0,0.2);\r\n }\r\n\r\n \/* Mobile Portrait Optimization *\/\r\n @media (max-width: 480px) {\r\n body {\r\n padding: 0;\r\n }\r\n\r\n .calculator {\r\n min-height: 100vh;\r\n border-radius: 0;\r\n padding: 15px;\r\n justify-content: space-between;\r\n }\r\n\r\n .buttons {\r\n gap: 8px;\r\n }\r\n\r\n button {\r\n font-size: 1.8rem;\r\n }\r\n }\r\n\r\n \/* Mobile Landscape Optimization *\/\r\n @media (max-height: 480px) and (orientation: landscape) {\r\n .calculator {\r\n max-height: 100vh;\r\n flex-direction: row;\r\n max-width: 100%;\r\n gap: 15px;\r\n }\r\n\r\n .display {\r\n width: 40%;\r\n margin: 0;\r\n border-radius: 15px;\r\n }\r\n\r\n .buttons {\r\n width: 60%;\r\n gap: 5px;\r\n }\r\n\r\n button {\r\n aspect-ratio: 1.5;\r\n font-size: 1.4rem;\r\n }\r\n\r\n .double-zero {\r\n aspect-ratio: 3\/1.5;\r\n }\r\n }\r\n\r\n \/* For very small screens *\/\r\n @media (max-width: 320px) {\r\n .calculator {\r\n padding: 10px;\r\n border-radius: 15px;\r\n }\r\n\r\n .display {\r\n padding: 15px;\r\n min-height: 120px;\r\n border-radius: 15px;\r\n }\r\n\r\n .buttons {\r\n gap: 6px;\r\n }\r\n\r\n button {\r\n font-size: 1.5rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"calculator\">\r\n <div class=\"display\">\r\n <button class=\"voice-btn\" id=\"voiceBtn\">\ud83d\udd0a<\/button>\r\n <div class=\"previous-operand\"><\/div>\r\n <div class=\"current-operand\">0<\/div>\r\n <\/div>\r\n <div class=\"buttons\">\r\n <button class=\"clear\" data-action=\"clear\">C<\/button>\r\n <button class=\"delete\" data-action=\"delete\">\u232b<\/button>\r\n <button class=\"operator\" data-action=\"\/\">÷<\/button>\r\n <button class=\"operator\" data-action=\"*\">×<\/button>\r\n <button class=\"number\" data-number=\"7\">7<\/button>\r\n <button class=\"number\" data-number=\"8\">8<\/button>\r\n <button class=\"number\" data-number=\"9\">9<\/button>\r\n <button class=\"operator\" data-action=\"-\">-<\/button>\r\n <button class=\"number\" data-number=\"4\">4<\/button>\r\n <button class=\"number\" data-number=\"5\">5<\/button>\r\n <button class=\"number\" data-number=\"6\">6<\/button>\r\n <button class=\"operator\" data-action=\"+\">+<\/button>\r\n <button class=\"number\" data-number=\"1\">1<\/button>\r\n <button class=\"number\" data-number=\"2\">2<\/button>\r\n <button class=\"number\" data-number=\"3\">3<\/button>\r\n <button class=\"equals\" data-action=\"=\">=<\/button>\r\n <button class=\"number\" data-number=\"0\">0<\/button>\r\n <button class=\"double-zero\" data-number=\"00\">00<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ [Previous JavaScript remains exactly the same]\r\n class Calculator {\r\n constructor() {\r\n this.previousOperand = '';\r\n this.currentOperand = '0';\r\n this.operation = undefined;\r\n this.shouldResetScreen = false;\r\n }\r\n\r\n clear() {\r\n this.currentOperand = '0';\r\n this.previousOperand = '';\r\n this.operation = undefined;\r\n }\r\n\r\n delete() {\r\n if (this.currentOperand === '0') return;\r\n if (this.currentOperand.length === 1) {\r\n this.currentOperand = '0';\r\n } else {\r\n this.currentOperand = this.currentOperand.slice(0, -1);\r\n }\r\n }\r\n\r\n appendNumber(number) {\r\n if (this.shouldResetScreen) {\r\n this.currentOperand = '';\r\n this.shouldResetScreen = false;\r\n }\r\n if (number === '.' && this.currentOperand.includes('.')) return;\r\n if (this.currentOperand === '0' && number !== '.') {\r\n this.currentOperand = number;\r\n } else {\r\n \/\/ Tambahan pengecekan untuk \"00\"\r\n if (number === '00' && this.currentOperand === '0') return;\r\n this.currentOperand += number;\r\n }\r\n }\r\n\r\n chooseOperation(operation) {\r\n if (this.currentOperand === '') return;\r\n if (this.previousOperand !== '') {\r\n this.compute();\r\n }\r\n this.operation = operation;\r\n this.previousOperand = this.currentOperand;\r\n this.currentOperand = '';\r\n }\r\n\r\n getOperationName(operation) {\r\n switch(operation) {\r\n case '+': return 'ditambah';\r\n case '-': return 'dikurang';\r\n case '*': return 'dikali';\r\n case '\/': return 'dibagi';\r\n default: return '';\r\n }\r\n }\r\n\r\n compute() {\r\n let computation;\r\n const prev = parseFloat(this.previousOperand);\r\n const current = parseFloat(this.currentOperand);\r\n \r\n if (isNaN(prev) || isNaN(current)) return;\r\n\r\n switch (this.operation) {\r\n case '+':\r\n computation = prev + current;\r\n break;\r\n case '-':\r\n computation = prev - current;\r\n break;\r\n case '*':\r\n computation = prev * current;\r\n break;\r\n case '\/':\r\n computation = prev \/ current;\r\n break;\r\n default:\r\n return;\r\n }\r\n\r\n const formattedResult = this.formatNumber(computation);\r\n const operationName = this.getOperationName(this.operation);\r\n const speechText = `${this.formatNumber(prev)} ${operationName} ${this.formatNumber(current)} sama dengan ${formattedResult}`;\r\n \r\n this.speak(speechText);\r\n\r\n this.currentOperand = computation.toString();\r\n this.operation = undefined;\r\n this.previousOperand = '';\r\n this.shouldResetScreen = true;\r\n }\r\n\r\n formatNumber(number) {\r\n const stringNumber = number.toString();\r\n const [integerDigits, decimalDigits] = stringNumber.split('.');\r\n if (decimalDigits !== undefined) {\r\n return `${parseInt(integerDigits).toLocaleString('id-ID')} koma ${decimalDigits}`;\r\n }\r\n return parseInt(integerDigits).toLocaleString('id-ID');\r\n }\r\n\r\n speak(text) {\r\n speechSynthesis.cancel();\r\n const utterance = new SpeechSynthesisUtterance(text);\r\n utterance.lang = 'id-ID';\r\n utterance.rate = 0.9;\r\n utterance.pitch = 1.2;\r\n speechSynthesis.speak(utterance);\r\n }\r\n\r\n updateDisplay() {\r\n document.querySelector('.current-operand').textContent = this.currentOperand;\r\n if (this.operation != null) {\r\n document.querySelector('.previous-operand').textContent = \r\n `${this.previousOperand} ${this.operation}`;\r\n } else {\r\n document.querySelector('.previous-operand').textContent = '';\r\n }\r\n }\r\n }\r\n\r\n const calculator = new Calculator();\r\n\r\n document.querySelectorAll('[data-number]').forEach(button => {\r\n button.addEventListener('click', () => {\r\n calculator.appendNumber(button.dataset.number);\r\n calculator.updateDisplay();\r\n calculator.speak(button.dataset.number);\r\n });\r\n });\r\n\r\n document.querySelectorAll('[data-action]').forEach(button => {\r\n button.addEventListener('click', () => {\r\n switch (button.dataset.action) {\r\n case 'clear':\r\n calculator.clear();\r\n calculator.speak('Hapus semua');\r\n break;\r\n case 'delete':\r\n calculator.delete();\r\n calculator.speak('Hapus');\r\n break;\r\n case '=':\r\n calculator.compute();\r\n break;\r\n default:\r\n calculator.chooseOperation(button.dataset.action);\r\n break;\r\n }\r\n calculator.updateDisplay();\r\n });\r\n });\r\n\r\n document.getElementById('voiceBtn').addEventListener('click', () => {\r\n calculator.speak('Selamat datang di Kalkulator Pintar! Ayo belajar berhitung!');\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Kalkulator Pintar \ud83d\udd0a 0 C \u232b ÷ × 7 8 9 – 4 5 6 + 1 2 3 = 0 00<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/423"}],"collection":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/comments?post=423"}],"version-history":[{"count":31,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/423\/revisions"}],"predecessor-version":[{"id":458,"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/pages\/423\/revisions\/458"}],"wp:attachment":[{"href":"https:\/\/bg.pendampingusaha.com\/animasi\/wp-json\/wp\/v2\/media?parent=423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}