The Card Flip

I recently just finished my first project, which is a simple video-game library with a quick and easy rating system. This site allows for users to either add their own recently played games to the library and receive feedback from others. If they do not feel like participating in the addition of a game they can always use the application to see what is the most popular game
and the general consensus around this game.

While creating this web application, I found myself dealing with a majority innerHTML and scope. This was due to the function that I wanted for the front of the game cards. I wanted the front of the game cards to only show the image that was added with a button. This button then flips the card allowing for the the rest of the information of the card to show.

Getting the card to this format did take a lot of work and getting familiar with how innerHTML works within the scope. This ultimately came down to creating one function with 2 more functions nested within.renderGame(game),function backCard() and function createCardButton()

The renderGame(game) function is the main function that allows for my code to take in the information and post it to the JSON an then allowing for the cards to render on the DOM.

function renderGame(game){
    let frontGameCard = document.createElement('div')
    const frontHTML = `
      <div class = "container">
      <img class = "gamePic" src = '${game.imgurl}'/>
      <button id = "btn_${game.id}" class ='btn'> ${game.name} </button>
      </div >`
      frontGameCard.className = 'front_card'
      frontGameCard.id = `card_${game.id}`
      frontGameCard.innerHTML = frontHTML

        contClass.appendChild(frontGameCard)

This inforamtion is gathered from an earlier function that calls on render game. This information then is taken and added to our createCardButton(). This function allows for each card to have its own function button that allows for users to click on each card. The main issue that I ran into here was that if the cards had all the same ID with a .document.querySelector(#x) only the first button would have functionality, leaving the rest useless. To bypass this issue I had to set the ID of the cards to btn_${game.id}. This gave each card their own unique ID allowing for each button to work separately.

function backCard(){
    frontGameCard.innerHTML = 
      `<div class = "container">
      <div class = 'column'>
      <h2> ${game.name} </h2>
      <p> ${game.description} </p>
      <div id = 'sys_price' class = 'grid'>
      <p> System </p>
      <p> Price </p>
      <p> ${game.systems}</p>
      <p> $${game.price}</p>
      </div>
      <div class = 'grid'>
      <p> <span id = 'num-of-must'> ${game.must_play} </span></p> 
      <p> <span id = 'num-of-play'> ${game.play} </span></p>
      <p> <span id = 'num-of-return'> ${game.return} </span></p> 
      <button class = 'Must_Button'> Must Play </button> 
      <button class = 'Play_Button'> Play </button> 
      <button class = 'Return_Button'> Return </button>
      </div>
      </div>
      <button class = back_btn> Back </button>
      </div">` 

This then led me to my second nested function function backCard() which when the button on X's card was clicked it would replace the image of the card with rest of the information. This is where I dealt with a majority of the scope issues. At first I tried creating the function outside of the renderGame(game) function but quickly learned that in order for this function to use any of the information required to be built, it had to be inside of renderGame(game). This function responds to the click cardButton.addEventListener('click', backCard)} changing the innerHTML from the function scope of renderGame(game). The final capability of my cards that was required so the application could keep its aesthetic was a back button. This allowed for the user to flip that card back over and stay on their search for their next game.