JavaScript Project --
In this JavaScript project, we're going to create static restaurant menu page that filters thru different food menus. According to Yazeed Bzadough, he explains the higher order functions which are map, reduce, & filter methods and also states that --the greatest benefit of HOFs is greater reusability.-- Menu
Credit: FreeCodeCamp.org
The JavaScript key methods may be applied:
-
arrays --> List of arrays listing menu items of food. and beverages.
-
objects --> Collection of data stored in arrays as object literals: 'id', 'title', 'category', 'price', 'img', & 'desc'.
-
forEach() --> Calls a function ('filterBtns') for each element in an array.
-
DOMContentLoaded --> Pairs with 'window' method, it fires when the HTML document has been completely parsed without having the images, stylehsheet, etc to finish loading. In other words, immediate loading when function executed.
-
map, reduce, and filter --> MAP Creates a new array from calling a function ('displayMenuItems') for every array element. --> REDUCE Executes a reducer function ('displayMenuButtons') for array element. --> FILTER Creates a new array filled with elements that pass a test provided by a function ('menuCategory').
-
innerHTML --> Returns the HTML content (inner HTML) of an element.
-
includes method --> Returns true if an array contains a specified value, otherwise false.
-
addEventListener --> Include an event listener to listen to the event 'click'.
-
querySelector --> Select the first element '.section-center' & '.btn-container' matches the selectors.
-
join() method --> Returns an array 'menu' of foods & beverages as a string.
-
push() method --> Add new items of foods & beverages to an array.
-
currentTarget --> Return element whose event listeners triggered the event 'click'.
-
dataset --> Read-only property of the HTMLElement interface provides read/write access to custom data attributes (data-*any name) on elements. In JS, dataset must paired with its (.any name).
-
If Else Statement --> Decide the logic of assigning each individual food & beverages to each assigned category.
That's a Wrap!