A Pen by Eric Githinji on CodePen.
-
-
Save 0x8801/7db8ffc2022a7a100789ca063e5fbc61 to your computer and use it in GitHub Desktop.
Cat Clicker v1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h2>Cat Clicker 2000</h2> | |
<div class="buttons"> | |
</div> | |
<div class="cats"> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment