Fun Kids Calculator
\n\n
\n\n \n
\n \n 
body.html
Changed around line 1
+
+
Fun Kids Calculator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://kidscalc.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Fun Kids Calculator
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01GM8M8mod3NWEi5ijq76qse",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a fun and educational calculator website for children.\n\n---domain---\nkidscalc.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://kidscalc.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Fun Kids Calculator\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n \n\n---style.css---\n:root {\n --primary: #ff6b6b;\n --secondary: #4ecdc4;\n --accent: #ffe66d;\n --background: #f7f7f7;\n --text: #2d3436;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Comic Sans MS', cursive, sans-serif;\n background-color: var(--background);\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.calculator-container {\n text-align: center;\n padding: 2rem;\n}\n\nh1 {\n color: var(--primary);\n margin-bottom: 2rem;\n font-size: 2.5rem;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n}\n\n.calculator {\n background: white;\n border-radius: 20px;\n padding: 1.5rem;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n max-width: 400px;\n margin: 0 auto;\n}\n\n.display {\n margin-bottom: 1.5rem;\n}\n\n#result {\n width: 100%;\n height: 60px;\n font-size: 2rem;\n text-align: right;\n padding: 0.5rem;\n border: 3px solid var(--secondary);\n border-radius: 10px;\n background: var(--background);\n color: var(--text);\n transition: all 0.3s ease;\n}\n\n.buttons {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 10px;\n}\n\nbutton {\n padding: 1rem;\n font-size: 1.5rem;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n transition: transform 0.2s, background-color 0.2s;\n}\n\nbutton:hover {\n transform: scale(1.05);\n}\n\n.number {\n background-color: var(--accent);\n color: var(--text);\n}\n\n.operator {\n background-color: var(--primary);\n color: white;\n}\n\n.equals {\n background-color: var(--secondary);\n color: white;\n}\n\n.clear {\n background-color: #ff9f43;\n color: white;\n}\n\n.success {\n animation: glow 0.5s ease-in-out;\n}\n\n@keyframes glow {\n 0% { box-shadow: 0 0 5px rgba(78, 205, 196, 0.5); }\n 50% { box-shadow: 0 0 20px rgba(78, 205, 196, 0.8); }\n 100% { box-shadow: 0 0 5px rgba(78, 205, 196, 0.5); }\n}\n\n@media (max-width: 480px) {\n .calculator {\n padding: 1rem;\n }\n \n button {\n padding: 0.8rem;\n font-size: 1.2rem;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n #result {\n font-size: 1.5rem;\n height: 50px;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const result = document.getElementById('result');\n let currentValue = '';\n let operator = '';\n let previousValue = '';\n\n document.querySelectorAll('button').forEach(button => {\n button.addEventListener('click', () => {\n const value = button.dataset.value;\n\n if (value >= '0' && value <= '9') {\n currentValue += value;\n result.value = currentValue;\n } else if (['+', '-', '*', '/'].includes(value)) {\n operator = value;\n previousValue = currentValue;\n currentValue = '';\n } else if (value === '=') {\n if (previousValue && currentValue && operator) {\n const num1 = parseFloat(previousValue);\n const num2 = parseFloat(currentValue);\n let calculatedResult = 0;\n\n switch(operator) {\n case '+': calculatedResult = num1 + num2; break;\n case '-': calculatedResult = num1 - num2; break;\n case '*': calculatedResult = num1 * num2; break;\n case '/': calculatedResult = num1 / num2; break;\n }\n\n result.value = calculatedResult;\n currentValue = calculatedResult.toString();\n previousValue = '';\n operator = '';\n\n // Add success animation\n result.classList.add('success');\n setTimeout(() => {\n result.classList.remove('success');\n }, 500);\n }\n } else if (value === 'C') {\n currentValue = '';\n previousValue = '';\n operator = '';\n result.value = '';\n }\n });\n });\n});\n\n---end---\n\nThis calculator features:\n- Bright, kid-friendly colors\n- Large, easy-to-read buttons\n- Smooth animations and hover effects\n- A glowing animation when calculating results\n- Responsive design for all screen sizes\n- Simple and intuitive interface\n- Comic Sans font for a playful feel\n- Soft shadows and rounded corners\n- Clear visual feedback for interactions\n\nThe color scheme uses warm and friendly colors that are appealing to children while maintaining good contrast for readability. The layout is spacious and the buttons are large enough for small fingers to tap accurately on both mobile and desktop devices."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 385,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1923
+ }
+ }
readme.scroll
Changed around line 1
+ # kidscalc.scroll.pub
+ Website generated by Claude from prompt: Okay I need HTML CSS code for a simple calculator that does addition subtraction multiplication and division if you could give that so that I can run that in a browser make sure it is a friendly for both mobile and desktop screens it was just and make it a bit colourful because it is going to be used by children of 4 to 6 years of age and add some animations so that never the getting answer the you know so if I had enter to plus 9 when you get the answer the green the screen glows as green something like that
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const result = document.getElementById('result');
+ let currentValue = '';
+ let operator = '';
+ let previousValue = '';
+
+ document.querySelectorAll('button').forEach(button => {
+ button.addEventListener('click', () => {
+ const value = button.dataset.value;
+
+ if (value >= '0' && value <= '9') {
+ currentValue += value;
+ result.value = currentValue;
+ } else if (['+', '-', '*', '/'].includes(value)) {
+ operator = value;
+ previousValue = currentValue;
+ currentValue = '';
+ } else if (value === '=') {
+ if (previousValue && currentValue && operator) {
+ const num1 = parseFloat(previousValue);
+ const num2 = parseFloat(currentValue);
+ let calculatedResult = 0;
+
+ switch(operator) {
+ case '+': calculatedResult = num1 + num2; break;
+ case '-': calculatedResult = num1 - num2; break;
+ case '*': calculatedResult = num1 * num2; break;
+ case '/': calculatedResult = num1 / num2; break;
+ }
+
+ result.value = calculatedResult;
+ currentValue = calculatedResult.toString();
+ previousValue = '';
+ operator = '';
+
+ // Add success animation
+ result.classList.add('success');
+ setTimeout(() => {
+ result.classList.remove('success');
+ }, 500);
+ }
+ } else if (value === 'C') {
+ currentValue = '';
+ previousValue = '';
+ operator = '';
+ result.value = '';
+ }
+ });
+ });
+ });
style.css
Changed around line 1
+ :root {
+ --primary: #ff6b6b;
+ --secondary: #4ecdc4;
+ --accent: #ffe66d;
+ --background: #f7f7f7;
+ --text: #2d3436;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Comic Sans MS', cursive, sans-serif;
+ background-color: var(--background);
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .calculator-container {
+ text-align: center;
+ padding: 2rem;
+ }
+
+ h1 {
+ color: var(--primary);
+ margin-bottom: 2rem;
+ font-size: 2.5rem;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+ }
+
+ .calculator {
+ background: white;
+ border-radius: 20px;
+ padding: 1.5rem;
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+ max-width: 400px;
+ margin: 0 auto;
+ }
+
+ .display {
+ margin-bottom: 1.5rem;
+ }
+
+ #result {
+ width: 100%;
+ height: 60px;
+ font-size: 2rem;
+ text-align: right;
+ padding: 0.5rem;
+ border: 3px solid var(--secondary);
+ border-radius: 10px;
+ background: var(--background);
+ color: var(--text);
+ transition: all 0.3s ease;
+ }
+
+ .buttons {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 10px;
+ }
+
+ button {
+ padding: 1rem;
+ font-size: 1.5rem;
+ border: none;
+ border-radius: 10px;
+ cursor: pointer;
+ transition: transform 0.2s, background-color 0.2s;
+ }
+
+ button:hover {
+ transform: scale(1.05);
+ }
+
+ .number {
+ background-color: var(--accent);
+ color: var(--text);
+ }
+
+ .operator {
+ background-color: var(--primary);
+ color: white;
+ }
+
+ .equals {
+ background-color: var(--secondary);
+ color: white;
+ }
+
+ .clear {
+ background-color: #ff9f43;
+ color: white;
+ }
+
+ .success {
+ animation: glow 0.5s ease-in-out;
+ }
+
+ @keyframes glow {
+ 0% { box-shadow: 0 0 5px rgba(78, 205, 196, 0.5); }
+ 50% { box-shadow: 0 0 20px rgba(78, 205, 196, 0.8); }
+ 100% { box-shadow: 0 0 5px rgba(78, 205, 196, 0.5); }
+ }
+
+ @media (max-width: 480px) {
+ .calculator {
+ padding: 1rem;
+ }
+
+ button {
+ padding: 0.8rem;
+ font-size: 1.2rem;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ #result {
+ font-size: 1.5rem;
+ height: 50px;
+ }
+ }