-
Notifications
You must be signed in to change notification settings - Fork 2
/
base.js
56 lines (49 loc) · 2.23 KB
/
base.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// we will have all the DOM elements in here, and if the user needs any DOM elements, they've to get it by importing
// the this module
export const elements = {
searchForm: document.querySelector('.search'),
searchInput: document.querySelector('.search__field'),
searchResList: document.querySelector('.results__list'),
searchRes: document.querySelector('.results'),
searchResPages: document.querySelector('.results__pages'),
recipe: document.querySelector('.recipe'),
shopping: document.querySelector('.shopping__list'),
likesMenu: document.querySelector('.likes__field'),
likesList: document.querySelector('.likes__list')
};
// inside the elementStrings object, we will have all the dynamically created DOM elements that are created and
// then removed after a while. One such example is the spinning loader.
export const elementStrings = {
loader: "loader",
pageButton: "btn-inline",
servingsIncreaseButton: "btn-increase",
servingsDecreaseButton: "btn-decrease",
ingredientQuantity: "recipe__count",
servings: "recipe__info-data--people",
addToShoppingList: "recipe__btn--add",
shoppingItem: "shopping__item",
shoppingDelete: "shopping__delete",
shoppingCount: "shopping__count-value",
loveButton: "recipe__love"
};
// function to render the loading spinner from the ./dist/css/style.css.
// We want to render the loading spinner inside two elements, therefore, we take the parent element as the parameter
// to the renderLoader() function
export const renderLoader = parent => {
// look into .loader class located inside the ./dist/css/style.css file to know how the the spinning loader functions.
const loader = `
<div class=${elementStrings.loader}>
<svg>
<use href="img/icons.svg#icon-cw"></use>
</svg>
</div>
`;
// we attach the loader to the parent that we passed into the renderLoader() method
parent.insertAdjacentHTML('afterbegin', loader);
};
// function to remove the spinning loader once the AJAX Request has been fulfilled
export const clearLoader = () => {
const loader = document.querySelector(`.${elementStrings.loader}`);
if (loader)
loader.parentNode.removeChild(loader);
};