Hi! Just found custom components, and it’s amazing!
I asked Claude 3.5 Sonnet to generate calculator:
and used this html code within glide custom components:
What can be really fascinating is the option to include actions anywhere within the HTML code manually, making any buttons work with the actions!
Thanks Glide Team!
If you somewhy need calculator in glide:
{
"kind": "ai-custom-component",
"componentID": "c13",
"visibilityFilters": [],
"generator": {
"kind": "enum",
"value": "html-tailwind-alpine"
},
"prompt": {
"kind": "string",
"value": ""
},
"fields": {
"kind": "array",
"value": [
{
"value": {
"kind": "column",
"value": {
"kind": "default-ctx",
"name": "AjbWM"
}
},
"name": {
"kind": "string",
"value": "{Name}"
}
}
]
},
"actions": {
"kind": "array",
"value": [
{
"title": {
"kind": "string",
"value": "Go!"
},
"action": {
"kind": "action",
"value": {
"kind": "show-toast",
"message": {
"kind": "string",
"value": ""
},
"icon": {
"kind": "enum",
"value": "success"
}
}
}
}
]
},
"builderDisplayName": "Code",
"html": {
"kind": "string",
"value": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1.0\"\n />\n <title>Functional Beautiful Math Calculator</title>\n <style>\n body {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #f5f5f5;\n }\n .calculator {\n background-color: #ededed;\n border-radius: 10px;\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\n padding: 20px;\n width: 300px;\n }\n .display {\n background-color: #d4d4d4;\n border: 2px solid #ff9800;\n border-radius: 5px;\n font-size: 24px;\n height: 60px;\n margin-bottom: 20px;\n padding: 10px;\n text-align: right;\n overflow: hidden;\n }\n .buttons {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 10px;\n }\n button {\n background-color: #ededed;\n border: 2px solid #ff9800;\n border-radius: 5px;\n color: #333;\n cursor: pointer;\n font-size: 18px;\n padding: 15px;\n transition: all 0.3s ease;\n }\n button:hover {\n background-color: #ff9800;\n color: white;\n }\n .operator {\n background-color: #d4d4d4;\n }\n .equals {\n background-color: #ff9800;\n color: white;\n }\n .equals:hover {\n background-color: #f57c00;\n }\n </style>\n </head>\n <body>\n <div class=\"calculator\">\n <div class=\"display\">0</div>\n <div class=\"buttons\">\n <button onclick=\"appendNumber('7')\">7</button>\n <button onclick=\"appendNumber('8')\">8</button>\n <button onclick=\"appendNumber('9')\">9</button>\n <button\n class=\"operator\"\n onclick=\"setOperation('/')\"\n >\n ÷\n </button>\n <button onclick=\"appendNumber('4')\">4</button>\n <button onclick=\"appendNumber('5')\">5</button>\n <button onclick=\"appendNumber('6')\">6</button>\n <button\n class=\"operator\"\n onclick=\"setOperation('*')\"\n >\n ×\n </button>\n <button onclick=\"appendNumber('1')\">1</button>\n <button onclick=\"appendNumber('2')\">2</button>\n <button onclick=\"appendNumber('3')\">3</button>\n <button\n class=\"operator\"\n onclick=\"setOperation('-')\"\n >\n -\n </button>\n <button onclick=\"appendNumber('0')\">0</button>\n <button onclick=\"appendDecimal()\">.</button>\n <button class=\"equals\" onclick=\"calculate()\">\n =\n </button>\n <button\n class=\"operator\"\n onclick=\"setOperation('+')\"\n >\n +\n </button>\n </div>\n </div>\n\n <script>\n let displayValue = \"0\";\n let firstOperand = null;\n let operator = null;\n let waitingForSecondOperand = false;\n\n const display = document.querySelector(\".display\");\n\n function updateDisplay() {\n display.textContent = displayValue;\n }\n\n function appendNumber(number) {\n if (waitingForSecondOperand) {\n displayValue = number;\n waitingForSecondOperand = false;\n } else {\n displayValue =\n displayValue === \"0\"\n ? number\n : displayValue + number;\n }\n updateDisplay();\n }\n\n function appendDecimal() {\n if (!displayValue.includes(\".\")) {\n displayValue += \".\";\n updateDisplay();\n }\n }\n\n function setOperation(op) {\n if (operator && waitingForSecondOperand) {\n operator = op;\n return;\n }\n\n if (firstOperand === null) {\n firstOperand = parseFloat(displayValue);\n } else if (operator) {\n const result = calculate();\n displayValue = `${parseFloat(result.toFixed(7))}`;\n firstOperand = result;\n }\n\n waitingForSecondOperand = true;\n operator = op;\n updateDisplay();\n }\n\n function calculate() {\n if (operator === null || waitingForSecondOperand) {\n return displayValue;\n }\n\n const secondOperand = parseFloat(displayValue);\n let result;\n\n switch (operator) {\n case \"+\":\n result = firstOperand + secondOperand;\n break;\n case \"-\":\n result = firstOperand - secondOperand;\n break;\n case \"*\":\n result = firstOperand * secondOperand;\n break;\n case \"/\":\n result = firstOperand / secondOperand;\n break;\n default:\n return;\n }\n\n displayValue = `${parseFloat(result.toFixed(7))}`;\n firstOperand = result;\n operator = null;\n waitingForSecondOperand = false;\n updateDisplay();\n return result;\n }\n\n updateDisplay();\n </script>\n </body>\n</html>\n"
}
}