Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const getRecipesList = async () => {
- try {
- const response = await fetch('http://localhost:3030/jsonstore/cookbook/recipes');
- const main = document.querySelector('main');
- if (response.ok == false) {
- throw new Error(response.statusText);
- }
- const recipes = await response.json();
- main.querySelector('p').remove();
- Object.values(recipes)
- .map(createPreview)
- .forEach(r => main.appendChild(r));
- } catch (err) {
- alert(err.message);
- }
- };
- const getRecipeDetails = async (id, preview) => {
- const response = await fetch('http://localhost:3030/jsonstore/cookbook/details/' + id);
- const recipe = await response.json();
- const result = `
- <h2>${recipe.name}</h2>
- <div class="band">
- <div class="thumb">
- <img src="${recipe.img}">
- </div>
- <div class="ingredients">
- <h3>Ingredients:</h3>
- <ul>
- ${recipe.ingredients.map(i => `<li>${i}</li>`).join('')}
- </ul>
- </div>
- </div>
- <div class="description">
- <h3>Preparation:</h3>
- ${recipe.steps.map(s => `<p>${s}</p>`).join('')}
- </div>
- `;
- const articleElement = document.createElement('article');
- articleElement.insertAdjacentHTML('beforeend', result);
- articleElement.querySelector('h2').onclick = () => toggleR();
- preview.replaceWith(articleElement);
- function toggleR() {
- articleElement.replaceWith(preview);
- }
- }
- const createPreview = (recipe) => {
- const result = `
- <div class="title">
- <h2>${recipe.name}</h2>
- </div>
- <div class="small">
- <img src="${recipe.img}">
- </div>`;
- const articleElement = document.createElement('article');
- articleElement.classList.add('preview');
- articleElement.insertAdjacentHTML('beforeend', result);
- articleElement.onclick = () => getRecipeDetails(recipe._id, articleElement);
- return articleElement;
- }
- window.onload = () => {
- console.log('before request');
- getRecipesList();
- console.log('after request');
- };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement