Skip to content

Instantly share code, notes, and snippets.

@KacieW

KacieW/index.html

Created June 29, 2017 17:14
Show Gist options
  • Save KacieW/c2274bbbab1aad4f69b8ef596e4f5bdd to your computer and use it in GitHub Desktop.
Save KacieW/c2274bbbab1aad4f69b8ef596e4f5bdd to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/nedehut
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
#dogList{
width:200px;
}
.clickableName{
padding:5px;
}
.clickableName:hover{
color:red;
}
img{
width:600px;
}
</style>
</head>
<body>
<div id="dogList"></div>
<div id="dogImage"></div>
<div id="counter"></div>
<script id="jsbin-javascript">
(function() {
//store data
var dogModel = {
dogs: [{
name: 'Husky on grass',
count: 0,
img: 'https://c1.staticflickr.com/5/4064/4716348948_ef8b600421_b.jpg'
}, {
name: 'Husky watch',
count: 0,
img: 'https://c1.staticflickr.com/9/8450/7963612704_9438621071_b.jpg'
}, {
name: 'Shiba Inu on grass',
count: 0,
img: 'https://c1.staticflickr.com/4/3061/2723229689_a9b6710c4e_b.jpg'
},{
name: 'Shiba Inu watch',
count: 0,
img: 'https://c1.staticflickr.com/4/3552/3350511997_679390dd00_b.jpg'
},{
name: 'retriver with sunglasses',
count: 0,
img: 'https://c1.staticflickr.com/5/4120/4759108993_ab9059beed_b.jpg'
},{
name: 'retriver on grass',
count: 0,
img: 'https://c1.staticflickr.com/6/5442/9287313264_e5bbe53a87_z.jpg'
},{
name: 'Schnauzer in the rain',
count: 0,
img: 'https://c1.staticflickr.com/5/4250/34254659334_10b17043b2_b.jpg'
},{
name: 'Schnauzer in city',
count: 0,
img: 'https://c1.staticflickr.com/2/1593/26024637754_436eabfffe_b.jpg'
}]
};
var octopus = {
getDogNames: function(e) {
var dogNames = [];
for (var i = 0; i < dogModel.dogs.length; i++) {
dogNames.push(dogModel.dogs[i].name);
}
return dogNames;
},
getDogImages: function() {
var dogImages = [];
for (var i = 0; i < dogModel.dogs.length; i++) {
dogImages.push(dogModel.dogs[i].img);
}
return dogImages;
},
add:function(e){
for(var i=0; i<dogModel.dogs.length;i++){
if(this.src ==dogModel.dogs[i].img){
dogModel.dogs[i].count++;
document.getElementById('counter').innerHTML = "Count: "+ dogModel.dogs[i].count;
}
}
},
resetCounter:function(jnum){
dogModel.dogs[jnum].count=0;
},
init: function() {
view.init();
}
};
var view = {
init: function() {
var t = octopus.getDogNames();
this.renderList(t);
},
renderList: function(t) {
for (var i = 0; i < t.length; i++) {
var div = document.createElement('div');
var text = document.createTextNode(t[i]);
div.appendChild(text);
div.setAttribute('class', 'clickableName');
document.getElementById('dogList').appendChild(div);
}
this.renderImage();
},
renderImage: function() {
var clickableNames = document.getElementsByClassName('clickableName');
var images = octopus.getDogImages();
var tt = document.getElementById('counter');
for (var j = 0; j < clickableNames.length; j++) {
clickableNames[j].addEventListener('click', (function(jcopy) {
return function() {
this.style.color='green';
var divImage = document.createElement('img');
var removeImage = document.getElementById('dogImage');
var h2 = document.createElement('h2');
var h2text = document.createTextNode(this.textContent);
h2.appendChild(h2text);
while (removeImage.hasChildNodes()) {
removeImage.removeChild(removeImage.lastChild);
}
while(tt.hasChildNodes()){
tt.removeChild(tt.lastChild);
}
divImage.setAttribute('src', images[jcopy]);
document.getElementById('dogImage').appendChild(h2);
document.getElementById('dogImage').appendChild(divImage);
divImage.addEventListener('click', octopus.add);
octopus.resetCounter(jcopy);
};
}(j)));
}
}
};
octopus.init();
}());
</script>
<script id="jsbin-source-css" type="text/css">#dogList{
width:200px;
}
.clickableName{
padding:5px;
}
.clickableName:hover{
color:red;
}
img{
width:600px;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">(function() {
//store data
var dogModel = {
dogs: [{
name: 'Husky on grass',
count: 0,
img: 'https://c1.staticflickr.com/5/4064/4716348948_ef8b600421_b.jpg'
}, {
name: 'Husky watch',
count: 0,
img: 'https://c1.staticflickr.com/9/8450/7963612704_9438621071_b.jpg'
}, {
name: 'Shiba Inu on grass',
count: 0,
img: 'https://c1.staticflickr.com/4/3061/2723229689_a9b6710c4e_b.jpg'
},{
name: 'Shiba Inu watch',
count: 0,
img: 'https://c1.staticflickr.com/4/3552/3350511997_679390dd00_b.jpg'
},{
name: 'retriver with sunglasses',
count: 0,
img: 'https://c1.staticflickr.com/5/4120/4759108993_ab9059beed_b.jpg'
},{
name: 'retriver on grass',
count: 0,
img: 'https://c1.staticflickr.com/6/5442/9287313264_e5bbe53a87_z.jpg'
},{
name: 'Schnauzer in the rain',
count: 0,
img: 'https://c1.staticflickr.com/5/4250/34254659334_10b17043b2_b.jpg'
},{
name: 'Schnauzer in city',
count: 0,
img: 'https://c1.staticflickr.com/2/1593/26024637754_436eabfffe_b.jpg'
}]
};
var octopus = {
getDogNames: function(e) {
var dogNames = [];
for (var i = 0; i < dogModel.dogs.length; i++) {
dogNames.push(dogModel.dogs[i].name);
}
return dogNames;
},
getDogImages: function() {
var dogImages = [];
for (var i = 0; i < dogModel.dogs.length; i++) {
dogImages.push(dogModel.dogs[i].img);
}
return dogImages;
},
add:function(e){
for(var i=0; i<dogModel.dogs.length;i++){
if(this.src ==dogModel.dogs[i].img){
dogModel.dogs[i].count++;
document.getElementById('counter').innerHTML = "Count: "+ dogModel.dogs[i].count;
}
}
},
resetCounter:function(jnum){
dogModel.dogs[jnum].count=0;
},
init: function() {
view.init();
}
};
var view = {
init: function() {
var t = octopus.getDogNames();
this.renderList(t);
},
renderList: function(t) {
for (var i = 0; i < t.length; i++) {
var div = document.createElement('div');
var text = document.createTextNode(t[i]);
div.appendChild(text);
div.setAttribute('class', 'clickableName');
document.getElementById('dogList').appendChild(div);
}
this.renderImage();
},
renderImage: function() {
var clickableNames = document.getElementsByClassName('clickableName');
var images = octopus.getDogImages();
var tt = document.getElementById('counter');
for (var j = 0; j < clickableNames.length; j++) {
clickableNames[j].addEventListener('click', (function(jcopy) {
return function() {
this.style.color='green';
var divImage = document.createElement('img');
var removeImage = document.getElementById('dogImage');
var h2 = document.createElement('h2');
var h2text = document.createTextNode(this.textContent);
h2.appendChild(h2text);
while (removeImage.hasChildNodes()) {
removeImage.removeChild(removeImage.lastChild);
}
while(tt.hasChildNodes()){
tt.removeChild(tt.lastChild);
}
divImage.setAttribute('src', images[jcopy]);
document.getElementById('dogImage').appendChild(h2);
document.getElementById('dogImage').appendChild(divImage);
divImage.addEventListener('click', octopus.add);
octopus.resetCounter(jcopy);
};
}(j)));
}
}
};
octopus.init();
}());</script></body>
</html>
Raw
jsbin.nedehut.css
#dogList{
width:200px;
}
.clickableName{
padding:5px;
}
.clickableName:hover{
color:red;
}
img{
width:600px;
}
Raw
jsbin.nedehut.js
(function() {
//store data
var dogModel = {
dogs: [{
name: 'Husky on grass',
count: 0,
img: 'https://c1.staticflickr.com/5/4064/4716348948_ef8b600421_b.jpg'
}, {
name: 'Husky watch',
count: 0,
img: 'https://c1.staticflickr.com/9/8450/7963612704_9438621071_b.jpg'
}, {
name: 'Shiba Inu on grass',
count: 0,
img: 'https://c1.staticflickr.com/4/3061/2723229689_a9b6710c4e_b.jpg'
},{
name: 'Shiba Inu watch',
count: 0,
img: 'https://c1.staticflickr.com/4/3552/3350511997_679390dd00_b.jpg'
},{
name: 'retriver with sunglasses',
count: 0,
img: 'https://c1.staticflickr.com/5/4120/4759108993_ab9059beed_b.jpg'
},{
name: 'retriver on grass',
count: 0,
img: 'https://c1.staticflickr.com/6/5442/9287313264_e5bbe53a87_z.jpg'
},{
name: 'Schnauzer in the rain',
count: 0,
img: 'https://c1.staticflickr.com/5/4250/34254659334_10b17043b2_b.jpg'
},{
name: 'Schnauzer in city',
count: 0,
img: 'https://c1.staticflickr.com/2/1593/26024637754_436eabfffe_b.jpg'
}]
};
var octopus = {
getDogNames: function(e) {
var dogNames = [];
for (var i = 0; i < dogModel.dogs.length; i++) {
dogNames.push(dogModel.dogs[i].name);
}
return dogNames;
},
getDogImages: function() {
var dogImages = [];
for (var i = 0; i < dogModel.dogs.length; i++) {
dogImages.push(dogModel.dogs[i].img);
}
return dogImages;
},
add:function(e){
for(var i=0; i<dogModel.dogs.length;i++){
if(this.src ==dogModel.dogs[i].img){
dogModel.dogs[i].count++;
document.getElementById('counter').innerHTML = "Count: "+ dogModel.dogs[i].count;
}
}
},
resetCounter:function(jnum){
dogModel.dogs[jnum].count=0;
},
init: function() {
view.init();
}
};
var view = {
init: function() {
var t = octopus.getDogNames();
this.renderList(t);
},
renderList: function(t) {
for (var i = 0; i < t.length; i++) {
var div = document.createElement('div');
var text = document.createTextNode(t[i]);
div.appendChild(text);
div.setAttribute('class', 'clickableName');
document.getElementById('dogList').appendChild(div);
}
this.renderImage();
},
renderImage: function() {
var clickableNames = document.getElementsByClassName('clickableName');
var images = octopus.getDogImages();
var tt = document.getElementById('counter');
for (var j = 0; j < clickableNames.length; j++) {
clickableNames[j].addEventListener('click', (function(jcopy) {
return function() {
this.style.color='green';
var divImage = document.createElement('img');
var removeImage = document.getElementById('dogImage');
var h2 = document.createElement('h2');
var h2text = document.createTextNode(this.textContent);
h2.appendChild(h2text);
while (removeImage.hasChildNodes()) {
removeImage.removeChild(removeImage.lastChild);
}
while(tt.hasChildNodes()){
tt.removeChild(tt.lastChild);
}
divImage.setAttribute('src', images[jcopy]);
document.getElementById('dogImage').appendChild(h2);
document.getElementById('dogImage').appendChild(divImage);
divImage.addEventListener('click', octopus.add);
octopus.resetCounter(jcopy);
};
}(j)));
}
}
};
octopus.init();
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment