https://github.com/um-xair/html-css-js-restaurant-menu-website
Responsive Restaurant Menu Website | by UM-XAIR
https://github.com/um-xair/html-css-js-restaurant-menu-website
css html javascript menu menu-design restaurant restaurant-menu restaurant-website website website-design
Last synced: about 2 months ago
JSON representation
Responsive Restaurant Menu Website | by UM-XAIR
- Host: GitHub
- URL: https://github.com/um-xair/html-css-js-restaurant-menu-website
- Owner: um-xair
- Created: 2023-12-25T04:38:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-11T11:29:37.000Z (12 months ago)
- Last Synced: 2025-01-11T15:49:28.200Z (4 months ago)
- Topics: css, html, javascript, menu, menu-design, restaurant, restaurant-menu, restaurant-website, website, website-design
- Language: CSS
- Homepage: https://restaurant-menu-by-um-xair.netlify.app/
- Size: 7.45 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### 🧬 Responsive Restaurant Menu Website | by UM-XAIR
This HTML and JavaScript code creates a simple menu website where users can view different food items and their prices. This code creates a basic menu website with interactive features for browsing different food items. Here's an explanation of the code:
# HTML Structure:
- The HTML file starts with the `` declaration, indicating that this is an HTML5 document.
- Inside the `` section, there are meta tags for defining the character set and viewport settings, as well as a title for the webpage.
- External CSS and Bootstrap Icons libraries are linked using `` tags.
- The `` section contains the main content of the webpage, including the header, navigation, sections, and footer.
## Header Section:
- The `` contains the logo, navigation menu, and a section for displaying the current food item.
- The logo and navigation menu are wrapped inside a `` element.
- The left menu links are placed inside a `
` with the class `left_menu`.
- Inside the ``, there is a `` with the class `content` for displaying the current food item's title, description, and price.
- Below the content div, there is another `` with the class `cards`, which contains multiple food cards.
## JavaScript (app.js):
- The JavaScript code starts by selecting the left and right arrow icons for scrolling through the food cards and the container div for the food cards.
- Event listeners are added to the left and right arrow icons to scroll the container div left or right when clicked.
- An event listener is added to each food card, so when a card is clicked, its image, title, and price are displayed in the content div at the top.
### Explanation of Specific Parts:
- The `scrollLeft` property is used to scroll the container horizontally.
- The `poster`, `title`, and `price_cont` variables are used to reference the elements that will display the current food item's image, title, and price, respectively.
- The `Array.from(document.getElementsByClassName('card'))` loop iterates over each food card and adds a click event listener to each one. When a card is clicked, it updates the content at the top of the page with the details of the selected food item.
Inspiration from the [KDS Coder YouTube channel](https://www.youtube.com/@kdscoder) 🫶
## Connect with Me 🌐
