{"id":31766296,"url":"https://github.com/ayokanmi-adejola/javascript-calculator","last_synced_at":"2025-10-10T00:30:56.928Z","repository":{"id":300749219,"uuid":"1006982668","full_name":"Ayokanmi-Adejola/Javascript-Calculator","owner":"Ayokanmi-Adejola","description":"A beautiful JavaScript calculator built with React \u0026 TypeScript. Implements formula logic with proper order of operations, handles all edge cases, and passes all FreeCodeCamp tests. Features chain calculations, decimal precision, consecutive operator handling, and beautiful gradient UI.","archived":false,"fork":false,"pushed_at":"2025-07-13T15:49:43.000Z","size":62,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-30T00:00:37.252Z","etag":null,"topics":["mobile-first-workflow","react18","tailwindcss","typescript","vite"],"latest_commit_sha":null,"homepage":"https://javascript-calculator-red.vercel.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ayokanmi-Adejola.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-23T09:34:20.000Z","updated_at":"2025-08-27T21:07:13.000Z","dependencies_parsed_at":"2025-06-23T12:22:09.934Z","dependency_job_id":"fcc8bdf5-0919-40f9-98c3-8c453e2d9865","html_url":"https://github.com/Ayokanmi-Adejola/Javascript-Calculator","commit_stats":null,"previous_names":["ayokanmi-adejola/javascript-calculator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ayokanmi-Adejola/Javascript-Calculator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FJavascript-Calculator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FJavascript-Calculator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FJavascript-Calculator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FJavascript-Calculator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ayokanmi-Adejola","download_url":"https://codeload.github.com/Ayokanmi-Adejola/Javascript-Calculator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayokanmi-Adejola%2FJavascript-Calculator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002363,"owners_count":26083356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mobile-first-workflow","react18","tailwindcss","typescript","vite"],"created_at":"2025-10-10T00:30:16.156Z","updated_at":"2025-10-10T00:30:56.923Z","avatar_url":"https://github.com/Ayokanmi-Adejola.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript Calculator - FreeCodeCamp Project\n\nA beautiful, fully-featured JavaScript calculator built with React and TypeScript that meets all FreeCodeCamp requirements. This production-ready calculator implements proper formula logic with order of operations and handles all edge cases.\n\n![image](https://github.com/user-attachments/assets/ac35a5b5-491f-4835-9f23-9ad8a6aeb583)\n\n## 🚀 Features\n\n### Core Functionality\n- ✅ Complete calculator with all basic operations (+, -, ×, ÷)\n- ✅ Formula logic with proper order of operations (not immediate execution)\n- ✅ Chain calculations with operator precedence\n- ✅ Decimal point support with precision handling\n- ✅ Clear functionality that resets to initial state\n- ✅ Error handling for invalid operations\n\n### Advanced Features\n- ✅ Consecutive operator handling (keeps last operator, allows negative numbers)\n- ✅ Prevents multiple leading zeros\n- ✅ Operator continuation after equals for new calculations\n- ✅ Precise decimal calculations with proper rounding (10 decimal places)\n- ✅ Formula display showing calculation history\n- ✅ Responsive design for all screen sizes\n\n### Design Elements\n- 🎨 Modern gradient design with elegant color scheme\n- 🎯 Clean, readable typography with proper button hierarchy\n- ✨ Smooth hover animations and visual feedback\n- 📱 Responsive grid layout\n- 🎪 Professional spacing using 8px system\n- 🌟 Subtle shadows and rounded corners for depth\n\n## 🛠️ Technology Stack\n\n- **React 18** - Modern React with hooks\n- **TypeScript** - Type-safe development\n- **Tailwind CSS** - Utility-first CSS framework\n- **Vite** - Fast build tool and dev server\n\n## 📋 FreeCodeCamp Requirements\n\nThis calculator fulfills all 15 user stories from the FreeCodeCamp JavaScript Calculator project:\n\n1. ✅ Contains clickable element with `id=\"equals\"`\n2. ✅ Contains 10 clickable number elements (0-9) with proper IDs\n3. ✅ Contains 4 operator elements with IDs: `add`, `subtract`, `multiply`, `divide`\n4. ✅ Contains decimal element with `id=\"decimal\"`\n5. ✅ Contains clear element with `id=\"clear\"`\n6. ✅ Contains display element with `id=\"display\"` \n7. ✅ Clear button resets calculator to initial state (shows 0)\n8. ✅ Numbers display as they're input\n9. ✅ Chain calculations work correctly with proper order of operations\n10. ✅ Prevents numbers from beginning with multiple zeros\n11. ✅ Decimal handling (only one decimal per number)\n12. ✅ Operations work on decimal numbers\n13. ✅ Consecutive operators handled properly (last operator wins, except negative)\n14. ✅ Operators after equals start new calculation with previous result\n15. ✅ Decimal precision maintained (handles calculations like 2/7 properly)\n\n## 🎯 Calculator Logic\n\nThis calculator implements **Formula Logic** with proper order of operations, not immediate execution logic. This means:\n\n- `3 + 5 × 6 - 2 ÷ 4 = 32.5` (Formula Logic)\n- Operations follow mathematical precedence (multiplication/division before addition/subtraction)\n\n## 🚀 Getting Started\n\n### Prerequisites\n- Node.js (version 16 or higher)\n- npm or yarn\n\n### Installation\n\n1. Clone the repository:\n```bash\ngit clone \u003crepository-url\u003e\ncd javascript-calculator\n```\n\n2. Install dependencies:\n```bash\nnpm install\n```\n\n3. Start the development server:\n```bash\nnpm run dev\n```\n\n4. Open your browser and navigate to `http://localhost:5173`\n\n### Building for Production\n\n```bash\nnpm run build\n```\n\nThe built files will be in the `dist` directory.\n\n## 🧪 Testing\n\nThis project includes the FreeCodeCamp test suite. The tests will automatically run when you open the calculator in your browser.\n\n## 📁 Project Structure\n\n```\nsrc/\n├── App.tsx              # Main app component\n├── Calculator.tsx       # Calculator component with all logic\n├── main.tsx            # React app entry point\n├── index.css           # Tailwind CSS imports\n└── vite-env.d.ts       # Vite type definitions\n```\n\n## 🎨 Design Philosophy\n\nThe calculator follows modern design principles:\n\n- **Hierarchy**: Clear visual hierarchy using typography and spacing\n- **Contrast**: High contrast for readability and accessibility\n- **Balance**: Symmetrical layout with proper proportions\n- **Movement**: Subtle animations that enhance user experience\n- **Consistency**: Consistent spacing, colors, and interactions throughout\n\n## 🔧 Key Implementation Details\n\n### State Management\n- Uses React hooks for state management\n- Tracks display value, formula, previous key type, and input state\n- Handles complex state transitions for proper calculator behavior\n\n### Expression Evaluation\n- Safe evaluation using Function constructor with strict mode\n- Proper operator precedence handling\n- Floating-point precision management\n- Error handling for invalid expressions\n\n### Edge Case Handling\n- Consecutive operators (5 + * 7 = 35)\n- Negative numbers (5 * -5 = -25)\n- Leading zeros prevention\n- Decimal point validation\n- Division by zero and other error states\n\n\n## 👨‍💻 Author\n\n**Ayokanmi Adejola**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Fjavascript-calculator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayokanmi-adejola%2Fjavascript-calculator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayokanmi-adejola%2Fjavascript-calculator/lists"}