Permalink
Browse files

w animals

  • Loading branch information...
gtelzrow committed Jan 11, 2019
1 parent 7a1a9ca commit 4f94278ea13c006ff24879ee8c5ae02957d3eab9
Showing with 56 additions and 2 deletions.
  1. +34 −0 index.html
  2. +17 −2 scripts/index.js
  3. +5 −0 styles/my-styles.css
@@ -64,6 +64,7 @@ <h1 class="display-4">Welcome to Chaun's World</h1>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
@@ -90,5 +91,38 @@ <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
</div>
</div>
</div>

<button data-id="0" class="animal">Giraffe</button>
<button data-id="1" class="animal">Hippo</button>
<div id="box"></div>





























</body>
</html>
@@ -1,13 +1,28 @@
function codeToRun()
{console.log ('hi')
{
var arrayOfAnimalUrls = ['https://bit.ly/1KQhpjr', 'https://bit.ly/2CcQHWL'];

function showParticularAnimal(e) {
var dataIdOfButtonIClicked =$(e.target).data('id');
console.log(dataIdOfButtonIClicked);


}

var urlToUse = arrayOfAnimalUrls[dataIdOfButtonIClicked];
console.log(urlToUse);
// var cssVal = 'url('+urlToUse+')';
$('#box').css('background-image','url('+urlToUse+')');
$('#box').css('background-size', 'cover');


}




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

}

$(document).ready(codeToRun);

@@ -25,6 +25,11 @@ p{
}
}

#box{
height: 200px;
width: 200px;
border-style: solid;
}
/*
@include media-breakpoint-down(sm)

0 comments on commit 4f94278

Please sign in to comment.