This project is a dynamic restaurant homepage built entirely using JavaScript to manipulate the DOM. The goal is to practice DOM manipulation by generating all webpage content with JavaScript alone, with CSS used for styling.

The website provides tabbed browsing functionality for navigating through a home and menu sections. Each tab displays different content dynamically loaded via JavaScript. This project showcases how JavaScript modules can be used to create maintainable and reusable components, while Webpack is used for bundling all assets.

Screenshots

📝 Project Objective

The main goal of this project is to practice dynamic DOM manipulation using only JavaScript. The webpage structure is not hard-coded into the HTML file; instead, JavaScript modules dynamically create the elements and populate them with data.

Another objective is to understand how Webpack can bundle assets and manage dependencies for a project, making the development process more modular and scalable. This project also demonstrates setting up tab-switching logic using event listeners and JavaScript modules, following best practices for clean, maintainable code.

🔧 Features

• Tabbed Navigation: Users can easily switch between the Home, Menu, and Contact sections by clicking buttons in the navigation bar. Each section is dynamically rendered.

• Modular Components: Content for each tab (Home, Menu, Contact) is separated into different JavaScript modules for better code organization.

• Dynamic Home and Menu Pages: The homepage greets users with a background image, restaurant description, and operating hours. The menu page dynamically displays various mouthwatering burger and side options.

📖 Learnings

• DOM Manipulation: Learned how to dynamically create and append DOM elements using JavaScript.

• JavaScript Modules: Gained experience in using ES6 modules to structure the project into reusable and maintainable components.

• Webpack Bundling: Enhanced skills in setting up Webpack to manage different project assets (images, CSS, and JS files).

• Event Listeners: Learned to implement event listeners for navigation buttons to dynamically switch between tabs and load new content.

• GitHub Pages Deployment: Understood the process of deploying a project to GitHub Pages by pushing a specific build directory to a branch, using Webpack to bundle and manage project files.

💻 Technologies Used

• JavaScript (ES6): For DOM manipulation and dynamic content generation.

• Webpack: Module bundler for compiling JavaScript and handling assets.

• CSS: Separate file for styles.

• Node.js & npm: Used for project setup, dependency management, and Webpack configuration.

💡 Acknowledgments

• The Odin Project: For providing the project outline and guidance.