Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 PointsPersonal profile page badges layout
Hi,
I am about to finish up my profile page for the Treehouse Techdegree profile assignment and I am having trouble in figuring out how to layout my Treehouse badges horizontally on my experience.html page. I've tried floats, but that doesn't work as I have the body set to be a flex container. I have tried justify-content, align-self,etc...all to no avail. I'm totally stuck on this one.
Thanks in advance to anyone that can help.
Here is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Juliette Tworsey's Profile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet">
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/getTreeJSON/getTreeJSON.js"></script>
<script src="js/badges.js"></script>
</head>
<body>
<div class="main-nav">
<ul class="nav">
<li class="name">Juliette Tworsey</li>
<li><a href="index.html">Home</a></li>
<li><a href="experience.html">Experience</a></li>
<li><a href="photos.html">Photos</a></li>
</ul>
</div>
<section>
<div>
<ul class="badges"><li class="bquery"></li></ul>
</div>
</section>
<footer>
<ul>
<li><a href="https://twitter.com/jredheadgirl" class="social twitter">Twitter</a></li>
<li><a href="https://www.linkedin.com/in/juliettetworsey" class="social linkedin">LinkedIn</a></li>
<li><a href="https://github.com/firebuggirl" class="social github">Github</a></li>
</ul>
<p class="copyright">Copyright 2016, Juliette Tworsey<p>
</footer>
</body>
</html>
/* Badges Styles */
h1{
color:beige;
}
@media (max-width: 360px){
.badges{
padding-top: 40px;
padding-left: 20px;
}
.badges > h1{
padding-top: 10px;
padding-left: 40px;
font-size: 15px;
}
}
@media (max-width: 768px){
.badges{
padding-right: 70px;
}
}
.grid-300{
flex: 1;
}
img.bquery{
width:30%;
margin: auto;
}
@media (max-width:360px) {
img.bquery {
width:70%;
}
}
/*$(document).ready(function(){
var treehouseAPI = "https://teamtreehouse.com/juliettetworsey.json";
$('.badges').html('<h1>Loading....</h1>');
var treehouseOptions = { format: "json" };
function shuffle(o){
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}
function displayBadges(data){
var badgesHTML = "";
badgesHTML += '<h1>Points on treehouse' + " " + data.points.total +'</h1>';
badgesHTML += '<ul>';
var randBadges = shuffle(data.badges)
$.each(randBadges, function(j, badge){
badgesHTML += '<li>';
badgesHTML += '<img class="bquery" src="' + badge.icon_url + '"></a></li>';
});
badgesHTML += '</ul>';
$('.badges').html(badgesHTML);
}
$.getJSON(treehouseAPI,treehouseOptions, displayBadges);
});*/
$(document).ready(function(){
var treehouseAPI = "https://teamtreehouse.com/juliettetworsey.json";
$('.badges').html('<h1 style="font-family: Poller One;">Loading....</h1>');
var treehouseOptions = { format: "json" };
function displayBadges(data){
var badgesHTML = "";
badgesHTML += '<h1>Points on Treehouse' + " " + data.points.total +'</h1>';
badgesHTML += '<ul>';
$.each(data.badges, function(j, badge){
badgesHTML += '<li >';
badgesHTML += '<img class="bquery" src="' + badge.icon_url + '"></a></li>';
});
badgesHTML += '</ul>';
$('.badges').html(badgesHTML);
}
$.getJSON(treehouseAPI,treehouseOptions, displayBadges);
});
4 Answers
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 PointsI think the issue you are having with getting them to expand horizontially is that you are applying the width to the actual img with the class of bquery when the width of the img should be 100% of its contatiner which is the li element. The you should make the li element an in-line block and control your widths on those. Also you'll need to accound for the browers automatic margin on inline-block element with an negative right margin on the li elements.
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 PointsWow. That did it. Thanks Brent! ..and thanks for responding so soon. You just saved me a bunch of time:-)
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 PointsNo problem! :)
I may have to get with you sometime... I like the idea of pulling the badges from the API for display :)
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 PointsI did a search for Treehouse badges/JSON and after trying a few other methods that failed,I came across this link here on TH:
https://teamtreehouse.com/community/shuffling-displayed-treehouse-badges-using-jquery
Now I just have to learn how to display a limited number of recent badges. I'm going to have to review some of the classed that I have taken here to see if I can figure it out eventually:-)
Brent Suggs
Front End Web Development Techdegree Graduate 21,343 PointsYou can probably use a for or while loop with a variable set to the number of badges you want to pull and then only create the li elements while the loop iterator is less than said variable. just that just me thinking... :)
Thanks for the link!
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,425 PointsThat's what I was thinking too. Cheers:-)