{"id":31195675,"url":"https://github.com/siddami/resturant-ordering","last_synced_at":"2025-09-20T03:50:28.383Z","repository":{"id":308348263,"uuid":"1021061269","full_name":"Siddami/resturant-ordering","owner":"Siddami","description":null,"archived":false,"fork":false,"pushed_at":"2025-08-05T11:53:40.000Z","size":472,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-05T13:32:59.274Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/Siddami.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-07-16T20:21:30.000Z","updated_at":"2025-08-05T11:53:43.000Z","dependencies_parsed_at":"2025-08-05T13:33:06.786Z","dependency_job_id":"18456b86-0f71-4ecf-bd08-61b03e92e7bb","html_url":"https://github.com/Siddami/resturant-ordering","commit_stats":null,"previous_names":["siddami/resturant-ordering"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Siddami/resturant-ordering","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fresturant-ordering","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fresturant-ordering/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fresturant-ordering/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fresturant-ordering/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Siddami","download_url":"https://codeload.github.com/Siddami/resturant-ordering/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Siddami%2Fresturant-ordering/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276042131,"owners_count":25575000,"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-09-20T02:00:10.207Z","response_time":63,"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":[],"created_at":"2025-09-20T03:50:25.065Z","updated_at":"2025-09-20T03:50:28.379Z","avatar_url":"https://github.com/Siddami.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Restaurant Ordering App\n\nThis is a solo project for the [Scrimba Frontend Career Essentials Course](https://scrimba.com/learn/frontend).  \nIt is a simple restaurant ordering web app that allows users to browse a menu, add items to their order, remove items, and complete their order with a payment form.\n\n---\n\n## Project Idea\n\nThe goal of this project is to simulate a real-world restaurant ordering experience:\n\n- Users can view a menu of items (with emoji, name, ingredients, and price).\n- Users can add items to their order and adjust quantities.\n- Users can remove items from their order.\n- When ready, users can complete their order by filling out a payment form in a modal.\n- After successful payment, a confirmation modal is shown.\n\n---\n\n## Tools \u0026 Technologies Used\n\n- **JavaScript (ES6+)**: Core logic, DOM manipulation, classes, constructors, and event handling.\n- **HTML5**: Markup structure.\n- **CSS3**: Styling, Flexbox for layout, and responsive design with mobile-first approach and media queries.\n- **Vite**: Development server and build tool.\n- **Font Awesome**: For icons.\n\n---\n\n## Additional Features\n\n1. Added unit counter for each item if selected mutiple times.\n\n2. Added close button on modal so modal can be closed without confirming order.\n\n3. Used modal for success message instead of paragraph message as design specified for better user experience.\n\n---\n\n## What I Learned\n\n### JavaScript Concepts\n\n- **Classes \u0026 Constructors**: Used to encapsulate menu and order logic, making the code modular and reusable.\n- **Setting Functions in Constructors**: Methods like `renderMenu`, `renderOrder`, `showModal`, and `showSuccessModal` are defined in the class for clear structure.\n- **Form Handling \u0026 Verification**: Implemented a payment form inside a modal, with required fields and basic validation before submission.\n- **Event Handling**: Added event listeners for adding/removing items and handling form submission.\n- **Dynamic DOM Manipulation**: Created and updated HTML elements dynamically based on user actions.\n\n### CSS \u0026 Layout\n\n- **Flexbox**: Used for flexible and responsive layouts, aligning menu items and order summary.\n- **Mobile-First Design**: Base styles are optimized for mobile, with media queries for tablets and desktops.\n- **Custom Modals**: Built custom modal overlays for payment and confirmation messages.\n\n---\n\n## How to Run the Project\n\n1. Clone repository\n2. Open html file using any browser\n\n---\n\n## About Scrimba\n\nAt Scrimba, our goal is to create the best possible coding school at the cost of a gym membership! 💜  \nIf we succeed with this, it will give anyone who wants to become a software developer a realistic shot at succeeding, regardless of where they live and the size of their wallets 🎉\n\n- [Our courses](https://scrimba.com/allcourses)\n- [The Frontend Career Path](https://scrimba.com/learn/frontend)\n- [Become a Scrimba Pro member](https://scrimba.com/pricing)\n\n---\n\n## Future Improvements\n\n1. add minus icon to reduce item units\n2. improve accessibility with aria labels, sematic html among others.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiddami%2Fresturant-ordering","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiddami%2Fresturant-ordering","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiddami%2Fresturant-ordering/lists"}