Cat Clicker

cat-clicker.markdown

Cat Clicker

A Pen by Eric Githinji on CodePen.

License.

index.html

<h2>Cat Clicker 2000</h2>
<div class="buttons">
</div>
<div class="cats">
</div>

script.babel

(function() {
  
  /*
  * State
  */
  let cats = [{
      name: 'Valar Morghulis',
      image: 'https://lh3.ggpht.com/nlI91wYNCrjjNy5f-S3CmVehIBM4cprx-JFWOztLk7vFlhYuFR6YnxcT446AvxYg4Ab7M1Fy0twaOCWYcUk=s0#w=640&h=426',
      clicks: 0
    },{
      name: 'Dracarys',
      image: 'https://lh3.ggpht.com/kixazxoJ2ufl3ACj2I85Xsy-Rfog97BM75ZiLaX02KgeYramAEqlEHqPC3rKqdQj4C1VFnXXryadFs1J9A=s0#w=640&h=496',
      clicks: 0
    },{
      name: 'Drogon',
      image: 'https://lh5.ggpht.com/LfjkdmOKkGLvCt-VuRlWGjAjXqTBrPjRsokTNKBtCh8IFPRetGaXIpTQGE2e7ZCUaG2azKNkz38KkbM_emA=s0#w=640&h=454',
      clicks: 0
    },{
      name: 'Drogonesss',
      image: 'https://lh5.ggpht.com/LfjkdmOKkGLvCt-VuRlWGjAjXqTBrPjRsokTNKBtCh8IFPRetGaXIpTQGE2e7ZCUaG2azKNkz38KkbM_emA=s0#w=640&h=454',
      clicks: 0
    },{
      name: 'Issa Cat',
      image: 'https://lh5.ggpht.com/LfjkdmOKkGLvCt-VuRlWGjAjXqTBrPjRsokTNKBtCh8IFPRetGaXIpTQGE2e7ZCUaG2azKNkz38KkbM_emA=s0#w=640&h=454',
      clicks: 0
    }
  ]
  
  /**
  * DOM
  */
  const cats_container = document.querySelector('.cats');
  const buttons_container = document.querySelector('.buttons');
  
  // Render buttons
  let buttons_markup = '';
  cats.forEach((cat) => {
    buttons_markup += getButtonMarkup(cat);
  });
  render(buttons_container, buttons_markup);
  // Attach event listener to buttons
  cats.forEach((cat) => {
    const _cat_button = document.querySelector(`button[data-cat-name="${cat.name}"]`);
    _cat_button.addEventListener('click', () => selectCat(cat, cats_container), false);
  });
  
  // Render the first cat
  selectCat(cats[0], cats_container);
  
})();

function updateClicks(el, clicks) {
  el.innerHTML = clicks;
}

function render(container, el) {
  container.innerHTML = el;
}

function getButtonMarkup(cat) {
  return `
    <button class="buttons__button" data-cat-name="${cat.name}">${cat.name}</button>
  `;
}

function getCatMarkup(cat) {
  return `
    <div class="cats__cat">
      <label>${cat.name}</label>
      <img src="${cat.image}" data-cat-name="${cat.name}"/>
      <h1>Number of clicks: <span data-cat-name="${cat.name}">${cat.clicks}</span></h1>
      <a data-cat-name="${cat.name}">reset</a>
    </div>
`;
}

function selectCat(cat, cats_container) {
  console.log('[Select]', cat)
  // add active state to current cat button
  document.querySelectorAll('.buttons__button').forEach((button) => {
    button.classList.remove('active');
  });
  const cat_button = document.querySelector(`button[data-cat-name="${cat.name}"]`);
  cat_button.classList.add('active');
  
  // get cat markup
  let cat_markup = getCatMarkup(cat);
  
  // render cat
  render(cats_container, cat_markup);
  
  // attach event listeners
  const cat_image =  document.querySelector(`img[data-cat-name="${cat.name}"]`);
  const cat_clicks = document.querySelector(`span[data-cat-name="${cat.name}"]`);
  const cat_clicks_reset = document.querySelector(`a[data-cat-name="${cat.name}"]`);
  cat_image.addEventListener('click', () => {
    cat.clicks++;
    updateClicks(cat_clicks, cat.clicks);
  });
  cat_clicks_reset.addEventListener('click', () => {
    cat.clicks = 0;
    updateClicks(cat_clicks, cat.clicks);
  });
}

style.css

html, body {
  font: caption;
  margin: 0;
  padding: 0;
  background: #f7f7f7;
}

body {
  margin: 0 auto;
  text-align: center;
  color: #333;
  margin-top: 2%;
}

.cats {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 12px;
  width: 60%;
}
.cats__cat {
  position: relative;
}
.cats__cat>img {
  cursor: pointer;
  height: 80%;
}

.cats__cat>label {
  position: absolute;
  bottom: 25%;
  color: white;
  font-weight: bold;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.9;
  text-shadow: 0 2px rgba(0, 0, 0, 0.25);
  font-size: 1.2em;
  z-index: 3;
}

img::before {
  content: attr(data-cat-name);
  display: block;
}

#reset-clicks {
  cursor: pointer;
}

.buttons {
  display: inline-flex;
  flex-direction: column;
  width: 33.333333%;
  vertical-align: top;
  padding: 12px;
}
.buttons>button {
  border: none;
  margin-bottom: 5px;
  padding: 10px 0;
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  background: #eee;
  outline: none;
}
.buttons>button:hover {
  background: #d7d7d7;
}
.buttons>button.active {
  background: #333;
  color: white;
  font-weight: bold;
}
.buttons>button.active:hover {
  transform: none;
}