Generate code from description, create project structure, and take a photo of the result
{
"title": "React Calculator",
"language": "html",
"code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>React Calculator</title>\n <!-- React CDN -->\n <script crossorigin src=\"https://unpkg.com/react@18/umd/react.development.js\"></script>\n <script crossorigin src=\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\"></script>\n <!-- Babel CDN for JSX transformation in browser -->\n <script src=\"https://unpkg.com/@babel/standalone/babel.min.js\"></script>\n <style>\n body {\n font-family: 'Arial', sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background-color: #f0f2f5;\n margin: 0;\n }\n .calculator {\n background-color: #333;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n padding: 20px;\n width: 320px;\n }\n .display {\n background-color: #444;\n color: #fff;\n font-size: 2.5em;\n padding: 15px;\n text-align: right;\n border-radius: 5px;\n margin-bottom: 15px;\n min-height: 50px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n overflow-x: auto;\n }\n .buttons {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 10px;\n }\n .button {\n background-color: #666;\n color: #fff;\n border: none;\n border-radius: 5px;\n padding: 20px;\n font-size: 1.5em;\n cursor: pointer;\n transition: background-color 0.2s ease;\n }\n .button:hover {\n background-color: #888;\n }\n .button.operator {\n background-color: #f79231;\n }\n .button.operator:hover {\n background-color: #ffad66;\n }\n .button.clear {\n background-color: #d9534f;\n }\n .button.clear:hover {\n background-color: #e06b67;\n }\n .button.equals {\n background-color: #5cb85c;\n grid-column: span 2;\n }\n .button.equals:hover {\n background-color: #7ad07a;\n }\n </style>\n</head>\n<body>\n <div id=\"root\"></div>\n\n <script type=\"text/babel\">\n const { useState } = React;\n\n function Calculator() {\n const [input, setInput] = useState(\"0\");\n const [prevInput, setPrevInput] = useState(null);\n const [operator, setOperator] = useState(null);\n const [waitingForNewInput, setWaitingForNewInput] = useState(false);\n\n
{
"title": "React Calculator",
"language": "html",
"code": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>React Calculator</title>\n <!-- React CDN -->\n <script crossorigin src=\"https://unpkg.com/react@18/umd/react.development.js\"></script>\n <script crossorigin src=\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\"></script>\n <!-- Babel CDN for JSX transformation -->\n <script src=\"https://unpkg.com/@babel/standalone/babel.min.js\"></script>\n <style>\n body {\n font-family: 'Arial', sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background-color: #f0f2f5;\n margin: 0;\n }\n .calculator {\n border: 1px solid #ccc;\n border-radius: 10px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n width: 300px;\n background-color: #fff;\n padding: 20px;\n }\n .display {\n background-color: #222;\n color: #fff;\n font-size: 2.5em;\n padding: 15px;\n text-align: right;\n border-radius: 5px;\n margin-bottom: 15px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n min-height: 60px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n }\n .buttons {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 10px;\n }\n .button {\n background-color: #e0e0e0;\n border: none;\n border-radius: 5px;\n padding: 20px;\n font-size: 1.5em;\n cursor: pointer;\n transition: background-color 0.2s;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .button:hover {\n background-color: #d0d0d0;\n }\n .button.operator {\n background-color: #f39c12;\n color: #fff;\n }\n .button.operator:hover {\n background-color: #e67e22;\n }\n .button.equals {\n background-color: #27ae60;\n color: #fff;\n grid-column: span 2;\n }\n .button.equals:hover {\n background-color: #2ecc71;\n }\n .button.clear {\n background-color: #e74c3c;\n color: #fff;\n }\n .button.clear:hover {\n background-color: #c0392b;\n }\n </style>\n</head>\n<body>\n <div id=\"root\"></div>\n\n <script type=\"text/babel\">\n const { useState } = React;\n\n function Calculator() {\n const [dis