Permalink
Browse files

sdssdsd

  • Loading branch information...
awwmicky
awwmicky committed Jan 11, 2019
1 parent e7ff6fd commit 539abc56ef49681e7d06b6d7196ac4920cd64dbd
Showing with 45 additions and 1 deletion.
  1. +19 −0 css/style.css
  2. +8 −0 index.html
  3. +18 −1 js/app.js
@@ -27,3 +27,22 @@
display: flex;
justify-content: center;
}

button.btn-adjust {
display: flex;
align-items: center;
justify-content: center;
}

.box {
width: 200px;
height: 200px;
border: solid 3px #000;
background-color: #fff;
background-size: cover;
}
.animal {
background-position: center;
back
background-size: auto;
}
@@ -108,5 +108,13 @@ <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
</div>
</div>
</div>
<hr>
<div class="animal-option">
<button data-id="0" type="button" class="btn btn-secondary animal">G-Raffe</button>
<button data-id="1" type="button" class="btn btn-secondary animal">G-Pig</button>
<div class="box">

</div>
</div>
</body>
</html>
@@ -1,5 +1,22 @@
function codeToRun() {
console.log('document is loaded');
}

var images = ["https://images.unsplash.com/photo-1530824395616-b1ec7fac4aff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80",
"https://images.unsplash.com/photo-1533152162573-93ad94eb20f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80"]

function showParticularAnimal(e) {
// 1
var dataIdOfButtonIClicked = $(e.target).data('id');
console.log(dataIdOfButtonIClicked); // show index
// 2
var urlToUse = images[dataIdOfButtonIClicked];
console.log(urlToUse); // show url
// 3
$('.box').css('background-image', 'url(' + urlToUse + ')');
}

$('button.animal').click(showParticularAnimal);

};

$(document).ready(codeToRun);

0 comments on commit 539abc5

Please sign in to comment.