{"id":25204297,"url":"https://github.com/kbelltree/odin-restaurant-page","last_synced_at":"2026-04-13T22:34:18.741Z","repository":{"id":195449903,"uuid":"686448151","full_name":"kbelltree/odin-restaurant-page","owner":"kbelltree","description":"The Odin Project: Restaurant Page","archived":false,"fork":false,"pushed_at":"2023-10-12T01:18:56.000Z","size":2748,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-13T18:47:23.544Z","etag":null,"topics":["css","html-css-javascript","javascript","js","learning-by-doing","restaurant-page","the-odin-project","theodinproject","webpack"],"latest_commit_sha":null,"homepage":"https://kbelltree.github.io/odin-restaurant-page/","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/kbelltree.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":"2023-09-02T20:34:10.000Z","updated_at":"2025-03-03T02:36:43.000Z","dependencies_parsed_at":"2023-09-18T03:10:51.983Z","dependency_job_id":"5c6397f9-ea7e-41c1-ad1d-5cde7547d2fe","html_url":"https://github.com/kbelltree/odin-restaurant-page","commit_stats":null,"previous_names":["kbelltree/odin-restaurant-page"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kbelltree/odin-restaurant-page","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbelltree%2Fodin-restaurant-page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbelltree%2Fodin-restaurant-page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbelltree%2Fodin-restaurant-page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbelltree%2Fodin-restaurant-page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kbelltree","download_url":"https://codeload.github.com/kbelltree/odin-restaurant-page/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kbelltree%2Fodin-restaurant-page/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31774094,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T20:17:16.280Z","status":"ssl_error","status_checked_at":"2026-04-13T20:17:08.216Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["css","html-css-javascript","javascript","js","learning-by-doing","restaurant-page","the-odin-project","theodinproject","webpack"],"created_at":"2025-02-10T08:17:23.689Z","updated_at":"2026-04-13T22:34:18.721Z","avatar_url":"https://github.com/kbelltree.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# odin-restaurant-page\n\n## The Odin Project: Restaurant Page\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://kbelltree.github.io/odin-restaurant-page\"\u003e\n    \u003cimg src=\"src/assets/images/the-odin-project-restaurant-page-kbelltree-2023.jpg\" alt=\"restaurant-page-project-UI-snapshots-by-keiko-s-2023\" width=50% height=50%\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n## Summary\n\nThis project is a desktop-browser-based restaurant website built using JavaScript, CSS, and HTML. The main objectives include demonstrating knowledge of npm, JavaScript ES6 modules, and website development with webpack. \n\nFor detailed lessons on these concepts, visit [The Odin Project - Project: Restaurant Page](https://www.theodinproject.com/lessons/node-path-javascript-restaurant-page).\n\n## Key Project Instructions:\n\n- The website should consist of three pages: Home, Menu, and Contact.\n- Only the `\u003chtml\u003e`, `\u003cbody\u003e`, and `\u003cdiv id=\"content\"\u003e` tags should be present in index.html.\n- All content must be dynamically created using JavaScript inside a `\u003cdiv\u003e`, which is then appended to `\u003cdiv id=\"content\"\u003e`.\n- Create a module for each page, a style sheet, and an index.js as the entry point.\n- The index.js should contain eventListeners that clear the content and reload the respective page upon clicking its tab.\n\n## Skills Acquired \u0026 Applied:\nThis project allowed me to improve various skills and integrate previously learned concepts:\n\n\u003cdetails\u003e\n  \u003csummary\u003e Problem Solving \u003c/summary\u003e\n\n- Recognizing problems\n- Planning solutions\n- Applying the divide and conquer strategy\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e Error Correction \u003c/summary\u003e\n  \n- Utilizing Chrome Developer Tools\n- Researching solutions online \n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e Clean Code Writing \u003c/summary\u003e\n  \n- Maintaining consistent indentation\n- Adopting descriptive naming conventions\n- Adhering to principles like YAGNI, DRY, and KISS \n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e CSS \u003c/summary\u003e\n\n- 🆕 Using 'position: sticky' with the setting of calc() in sibling elements\n- Implementing CSS resets\n- Incorporating custom fonts\n- Applying advanced styling properties\n- Prioritizing the use of relative units \n- Defining and utilizing custom properties\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e Javascript \u0026 DOM Manipulation \u003c/summary\u003e\n\n- 🆕 Implementing ES6 modules \n- 🆕 Developing a webpage entirely with DOM manipulation\n- Using event delegation \n- Applying ternary operators\n- Creating and manipulating objects \n- Understanding various data types\n- Implementing conditionals, methods, loops, and functions\n- Applying `appendChild()` and `append()`\n- Modifying styles and HTML content\n- Building eventListeners\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e Emmet \u003c/summary\u003e\n\n- Writing HTML using abbreviations\n- Applying shortcut keys for efficiency\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e Git \u003c/summary\u003e\n\n- 🆕 Using .gitignore\n- 🆕 Deploying bundled website to GitHub Pages\n- Managing code with branching \n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e npm \u003c/summary\u003e\n\n- 🆕 Generating the package.json file\n- 🆕 Installing packages\n- 🆕 Writing scripts as task runners \n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e webpack \u003c/summary\u003e\n\n- 🆕 Organizing directories for entry and output\n- 🆕 Managing assets\n- 🆕 Using webpack-dev-server as a development tool \n\n\u003c/details\u003e\n\n\u003cbr\u003e\n\n\n*** \n\n### Resources Used \n\n- google-webfonts-helper by [Mario Ranftl](https://gwfh.mranftl.com/fonts)\n- UI Designing Tool by [Figma.com](https://www.figma.com)\n- ColorSpace by [mycolor.space](https://mycolor.space/)\n- Graphic Design Tool by [Canva.com](https://www.canva.com/)\n- ChatGPT-4 by [ChatGPT](https://chat.openai.com)\n\n- Interior Images by [PAKUTASO](https://www.pakutaso.com/)\n- Food Images by [photoAC](https://www.photo-ac.com/)\n\n\n### Referenced Tutorials\n\nJavaScript Related:\n\n- [A Comprehensive Look at ES6 Modules by JavaScript Tutorial](https://www.javascripttutorial.net/es6/es6-modules/)\n\n- [Accessibility Meaningful \u0026 Decorative Images by W3Schools](https://www.w3schools.com/accessibility/accessibility_meaningful_images.php)\n\n- [Must-Know Append JavaScript Explained by SoftAuthor](https://softauthor.com/javascript-append-html-string/)\n\nCSS Related: \n\n- [blur() by MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur)\n\n- [Before and After pseudo elements explained - part one: how they work by Kevin Powell](https://youtu.be/zGiirUiWslI?si=24Bn1mMKJ-uqSkuP)\n\n- [CSS white-space Property by DigitalOcean](https://www.digitalocean.com/community/tutorials/css-white-space-property)\n\n- [How to Fix Issues With CSS Position Sticky Not Working? by DESIGNCIZE](https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working)\n\n- [Remove All Child Nodes by JavaScript Tutorial](https://www.javascripttutorial.net/dom/manipulating/remove-all-child-nodes/)\n\n- [JavaScript Event Delegation by JavaScript Tutorial](https://www.javascripttutorial.net/javascript-dom/javascript-event-delegation/)\n\n\nNpm Related: \n\n- [Using webpack-dev-server by webpack](https://webpack.js.org/guides/development/#using-webpack-dev-server)\n\nDesign Related: \n\n- [The 20 Best Restaurant Websites of 2023 by Bentobox](https://www.getbento.com/blog/best-restaurant-websites-design/)\n\n- [22 Restaurant Website Design Examples We Love [+ How To Make Your Own] by HubSpot](https://blog.hubspot.com/website/restaurant-website-design)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkbelltree%2Fodin-restaurant-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkbelltree%2Fodin-restaurant-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkbelltree%2Fodin-restaurant-page/lists"}