Skip to content

Commit

Permalink
added dynammic donation progress bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@t04glovern
t04glovern committed Feb 17, 2018
1 parent 2d3f46f commit 4a4914e
Show file tree
Hide file tree
Showing 6 changed files with 68 additions and 14 deletions.
7 changes: 5 additions & 2 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,10 +134,13 @@ <h4 class="card-title">Name</h4>
<div class="card-footer">
<!-- Kitty Donation Bar -->
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 20%" aria-valuenow="20%"
<div class="progress-bar progress-bar-striped progress-bar-animated kitty-donation-progress" role="progressbar"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">0.0005 / 0.002 ETH</small>
<small class="text-muted kitty-donation-current">0.0005</small>
<small class="text-muted"> / </small>
<small class="text-muted kitty-donation-target">0.002</small>
<small class="text-muted">ETH</small>
</div>
<!-- /card-footer -->

Expand Down
14 changes: 14 additions & 0 deletions docs/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,20 @@ function loadKittiesFromJson() {
kittyTemplate.find('.card-img-top').attr('src', data[i].picture);
kittyTemplate.find('.card-text').text(data[i].description);
kittyTemplate.find('.btn-donate').attr('data-id', data[i].id);
kittyTemplate.find('.kitty-donation-current').text(data[i].donationCurrent);
kittyTemplate.find('.kitty-donation-target').text(data[i].donationTarget);

var donateCurr = new BigNumber(kittyTemplate.find('.kitty-donation-current').text());
var donateTar = new BigNumber(kittyTemplate.find('.kitty-donation-target').text());
var percentOfTarget = donateCurr.dividedBy(donateTar).times(100);
kittyTemplate.find('.kitty-donation-progress').attr(
"style","width: " + percentOfTarget + "%; aria-valuenow: " + percentOfTarget + "%"
);
if (percentOfTarget >= 100) {
kittyTemplate.find('.kitty-donation-progress').addClass("bg-success");
} else {
kittyTemplate.find('.kitty-donation-progress').removeClass("bg-success");
}

kittyRow.append(kittyTemplate.html());
}
Expand Down
20 changes: 15 additions & 5 deletions docs/kitties.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,44 @@
"name": "Tortalina",
"picture": "assets/img/kitties/0.jpg",
"location": "Perth, Western Australia",
"description": "I just had a litter of kittens and am super confused about why that happened!"
"description": "I just had a litter of kittens and am super confused about why that happened!",
"donationCurrent": 0.002,
"donationTarget": 0.022
},
{
"id": 1,
"name": "Felix",
"picture": "assets/img/kitties/1.jpg",
"location": "Perth, Western Australia",
"description": "Play Hard, Nap Hard is my motto. I get along better with my human playmates!."
"description": "Play Hard, Nap Hard is my motto. I get along better with my human playmates!.",
"donationCurrent": 0.114,
"donationTarget": 0.031
},
{
"id": 2,
"name": "Pixel",
"picture": "assets/img/kitties/2.jpg",
"location": "Perth, Western Australia",
"description": "I was shy at first but have grown to love playing with people and other kitties."
"description": "I was shy at first but have grown to love playing with people and other kitties.",
"donationCurrent": 0.013,
"donationTarget": 0.018
},
{
"id": 3,
"name": "Calipso",
"picture": "assets/img/kitties/3.jpg",
"location": "Perth, Western Australia",
"description": "I just want a human to cuddle up with. Maybe you can be my new human?"
"description": "I just want a human to cuddle up with. Maybe you can be my new human?",
"donationCurrent": 0.005,
"donationTarget": 0.041
},
{
"id": 4,
"name": "Crystal",
"picture": "assets/img/kitties/4.jpg",
"location": "Perth, Western Australia",
"description": "I just really love people! All the people, all the time. Are you people?"
"description": "I just really love people! All the people, all the time. Are you people?",
"donationCurrent": 0.023,
"donationTarget": 0.0376
}
]
7 changes: 5 additions & 2 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,10 +134,13 @@ <h4 class="card-title">Name</h4>
<div class="card-footer">
<!-- Kitty Donation Bar -->
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 20%" aria-valuenow="20%"
<div class="progress-bar progress-bar-striped progress-bar-animated kitty-donation-progress" role="progressbar"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small class="text-muted">0.0005 / 0.002 ETH</small>
<small class="text-muted kitty-donation-current">0.0005</small>
<small class="text-muted"> / </small>
<small class="text-muted kitty-donation-target">0.002</small>
<small class="text-muted">ETH</small>
</div>
<!-- /card-footer -->

Expand Down
14 changes: 14 additions & 0 deletions src/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,20 @@ function loadKittiesFromJson() {
kittyTemplate.find('.card-img-top').attr('src', data[i].picture);
kittyTemplate.find('.card-text').text(data[i].description);
kittyTemplate.find('.btn-donate').attr('data-id', data[i].id);
kittyTemplate.find('.kitty-donation-current').text(data[i].donationCurrent);
kittyTemplate.find('.kitty-donation-target').text(data[i].donationTarget);

var donateCurr = new BigNumber(kittyTemplate.find('.kitty-donation-current').text());
var donateTar = new BigNumber(kittyTemplate.find('.kitty-donation-target').text());
var percentOfTarget = donateCurr.dividedBy(donateTar).times(100);
kittyTemplate.find('.kitty-donation-progress').attr(
"style","width: " + percentOfTarget + "%; aria-valuenow: " + percentOfTarget + "%"
);
if (percentOfTarget >= 100) {
kittyTemplate.find('.kitty-donation-progress').addClass("bg-success");
} else {
kittyTemplate.find('.kitty-donation-progress').removeClass("bg-success");
}

kittyRow.append(kittyTemplate.html());
}
Expand Down
20 changes: 15 additions & 5 deletions src/kitties.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,44 @@
"name": "Tortalina",
"picture": "assets/img/kitties/0.jpg",
"location": "Perth, Western Australia",
"description": "I just had a litter of kittens and am super confused about why that happened!"
"description": "I just had a litter of kittens and am super confused about why that happened!",
"donationCurrent": 0.002,
"donationTarget": 0.022
},
{
"id": 1,
"name": "Felix",
"picture": "assets/img/kitties/1.jpg",
"location": "Perth, Western Australia",
"description": "Play Hard, Nap Hard is my motto. I get along better with my human playmates!."
"description": "Play Hard, Nap Hard is my motto. I get along better with my human playmates!.",
"donationCurrent": 0.114,
"donationTarget": 0.031
},
{
"id": 2,
"name": "Pixel",
"picture": "assets/img/kitties/2.jpg",
"location": "Perth, Western Australia",
"description": "I was shy at first but have grown to love playing with people and other kitties."
"description": "I was shy at first but have grown to love playing with people and other kitties.",
"donationCurrent": 0.013,
"donationTarget": 0.018
},
{
"id": 3,
"name": "Calipso",
"picture": "assets/img/kitties/3.jpg",
"location": "Perth, Western Australia",
"description": "I just want a human to cuddle up with. Maybe you can be my new human?"
"description": "I just want a human to cuddle up with. Maybe you can be my new human?",
"donationCurrent": 0.005,
"donationTarget": 0.041
},
{
"id": 4,
"name": "Crystal",
"picture": "assets/img/kitties/4.jpg",
"location": "Perth, Western Australia",
"description": "I just really love people! All the people, all the time. Are you people?"
"description": "I just really love people! All the people, all the time. Are you people?",
"donationCurrent": 0.023,
"donationTarget": 0.0376
}
]

0 comments on commit 4a4914e

Please sign in to comment.