I would love a code review. I started learning about the DOM outside of FCC

I would love a code review. I started learning about the DOM outside of FCC
0

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 :slight_smile:

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';
        } 
    }
});