Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andriidorohov/goit-js-hw-10-food-service
🍕 Menu page with the ability to choose a theme for the food ordering service
https://github.com/andriidorohov/goit-js-hw-10-food-service
handlebars javascript sass webpack
Last synced: about 1 month ago
JSON representation
🍕 Menu page with the ability to choose a theme for the food ordering service
- Host: GitHub
- URL: https://github.com/andriidorohov/goit-js-hw-10-food-service
- Owner: AndriiDorohov
- Created: 2021-03-18T02:09:44.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-06-17T11:38:52.000Z (over 1 year ago)
- Last Synced: 2024-11-09T10:31:28.914Z (3 months ago)
- Topics: handlebars, javascript, sass, webpack
- Language: JavaScript
- Homepage: http://andriidorohov.github.io/goit-js-hw-10-food-service
- Size: 850 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Admission criteria
- The 'goit-js-hw-10-food-service` repository has been created.
- When submitting homework, there are two links: to the source files and the work
page on GitHub Pages.
- When visiting the work page (GitHub Pages) of the task, there are no errors and
warnings in the console.
- The names of variables and functions are clear, descriptive.
- The project is built using `Webpack` or `Parceljs'.
- The code is formatted `Prettier'.
# Task
Create a menu page with the ability to choose a theme for the food ordering service.
[Link to demo video](https://take.ms/RxIlv ).
- Be sure to use 'Webpack` or `Parceljs` to build and deploy (
[link to the finished Webpack build](https://github.com/luxplanjay/webpack-starter-kit ))
- In the folder [src](./src) you will find the starting markup, styles and data
- An array of dish objects lies in [menu.json](./src/menu.json)
## Subject
Add the functionality of changing the theme when you click (the `change` event) on the checkbox
`#theme-switch-toggle` in the toolbar.
- By default, the theme is light.
- When changing the theme, it is necessary to add the `light-theme` class to the `body` element
or `dark-theme'.
- The selected theme should be saved between page reloads. To store
the theme, use `localStorage'.
- If the theme is dark when loading the page, don't forget to set the `checked` property
have the `#theme-switch-toggle` checkbox set to `true` so that the slider moves to the
correct position.
For the convenience of storing a list of topics, use this enumeration.
```js
const Theme = {
LIGHT: 'light-theme',
DARK: 'dark-theme',
};
```
## Templating
Using the template engine [Handlebars](https://handlebarsjs.com /) create a template
one menu item. After that, using the template, create the layout of the entire menu
according to the data from [menu.json](./src/menu.json) and add to the DOM in `ul.js-menu`.
The `Material Icons` library is used for icons, the link to the web font is already in
the source HTML.
Below is the layout of the menu item, which should be obtained according to the template (the data
will be different for each object).
```html
Potatoes baked in uniform
monetization_on
100 credits
Fragrant, hearty, sizzling homemade potatoes, stuffed
sour cream and bacon filling is a very simple and very effective way
to feed a large number of people, practically without spending on cooking
no strength, no time. Ordinary potatoes , if desired , can be replaced with
sweet sweet potato, and add, for example, corn or sweet to the filling
red pepper.
shopping_cart
Into a basket
```