Still very far from expert. I wanted to learn vanilla JS and the DOM, and seeing as FCC didn’t have anything, I went outside to learn on my own. I made a simple recipe browser with next and previous buttons. I would love some sort of JavaScript code review if anyone is interested
codepen: https://codepen.io/lmneozoo/pen/orOqXr
All the code is in the code pen, but i am most interested in feedback on the below:
function buildRecipeCard(recipeObj) {
// destructure obj (dont have to use recipeObj. notation)
const { recipe, serves, cookingTime, ingredients, steps } = recipeObj;
const recipeContainer = document.createElement('div');
recipeContainer.className = 'recipe-card';
function createMeta(text, value) {
const meta = document.createElement('span');
meta.textContent = `${text}: ${value}`;
return meta;
}
function createList(header, listTag, listItems, cssClass){
const listDiv = document.createElement('div');
const divHeader = document.createElement('h3');
divHeader.textContent = header;
listDiv.appendChild(divHeader);
const list = document.createElement(listTag);
for (let i = 0; i < listItems.length; i++){
let li = document.createElement('li');
li.textContent = listItems[i];
list.appendChild(li);
}
listDiv.appendChild(list);
listDiv.className = cssClass
return listDiv;
}
let recipeName = document.createElement('h2')
recipeName.textContent = recipe;
let metaDiv = document.createElement('div');
metaDiv.className = 'meta-container';
let recipeServes = createMeta('Serves', serves);
let recipeTime = createMeta('Cooks in', cookingTime);
metaDiv.appendChild(recipeServes);
metaDiv.appendChild(recipeTime);
let bodyDiv = document.createElement('div');
bodyDiv.className = 'recipe-wrapper'
let recipeIngredients = createList('Ingredients', 'ul', ingredients, 'ingredients');
let recipeSteps = createList('Method', 'ol', steps, 'method');
recipeContainer.appendChild(recipeName);
recipeContainer.appendChild(metaDiv);
bodyDiv.appendChild(recipeIngredients);
bodyDiv.appendChild(recipeSteps);
recipeContainer.appendChild(bodyDiv);
return recipeContainer;
}
//Parent elements
const recipeParent = document.querySelector('.recipe-parent');
const buttons = document.querySelector('#buttons');
//build all recipe cards and set only the first as visable
for (let i = 0; i < recipes.length; i++){
let card = buildRecipeCard(recipes[i]);
recipeParent.appendChild(card);
if ( i === 0 ) {
card.style.display = 'flex';
} else {
card.style.display = 'none';
}
}
buttons.addEventListener('click', event => {
const cardParent = event.target.parentNode.nextElementSibling;
const cards = cardParent.children;
if(event.target.textContent === 'Next Recipe') {
let activeCard;
for (let i = 0; i < cards.length; i++) {
if (cards[i].style.display === 'flex'){
activeCard = cards[i];
}
}
if(activeCard.nextElementSibling) {
activeCard.style.display = 'none';
activeCard.nextElementSibling.style.display = 'flex';
}
}
if(event.target.textContent === 'Prev Recipe') {
let activeCard;
for (let i = 0; i < cards.length; i++) {
if (cards[i].style.display === 'flex'){
activeCard = cards[i];
}
}
if(activeCard.previousElementSibling) {
activeCard.style.display = 'none';
activeCard.previousElementSibling.style.display = 'flex';
}
}
});