Working more with loading JSON
I wanted to try building another layout for the data that I loaded in my Final Fetch post I did on the seventh day of this challenge. I learned how to reverse order list elements and tried out flex box's reversing as well.
Name
Front-End Developer, Web Designer, Consultant
Current points accumulated per subject within the Treehouse curriculum
Badges earned so far:
View the code:
HTML and JS
<div class="code-block">
<img id="img" height="300" width="300" alt="" class="skeleton-coloring">
<h2 id="name" class="skeleton-coloring">Name</h2>
<h3 id="job" class="skeleton-coloring">Front-End Developer, Web Designer, Consultant</h3>
<p id="points-desc"class="skeleton-coloring">Current points accumulated <em>per subject</em> within the Treehouse curriculum</p>
<ul id="points" class="skeleton-coloring">
<li></li>
</ul>
<p id="badges-desc"class="skeleton-coloring">Badges earned so far: <span id="badge-total"></span></p>
<ol id="badges" class="skeleton-coloring">
<li></li>
</ol>
<p id="profile-desc"class="skeleton-coloring"></p>
</div>
<script>
// ---------
// Variables
// ---------
const name = document.getElementById('name');
const job = document.getElementById('job');
const photo = document.getElementById('img');
const exp = document.getElementById('exp');
const expPoints = document.getElementById('expPoints');
const points = document.getElementById('points');
const badges = document.getElementById('badges');
const badgesTotal = document.getElementById('badge-total')
const pointsDescription = document.getElementById('points-desc');
const badgesDescription = document.getElementById('badges-desc');
const profile = document.getElementById('profile-desc');
// ---------
// Fetch Functions
// ---------
window.addEventListener('load', () => {
fetch('https://teamtreehouse.com/jeremycaudle85.json')
.then(response => response.json())
.then(data => updateInfo(data))
.catch(error => alert('Uh oh! it looks like the data for this page is inacessible at the moment. Please try again another time.', error))
})
// ---------
// Helper Functions
// ---------
function updateInfo(data) {
name.textContent = `${data.name}`;
name.setAttribute('class', 'updated');
profile.innerHTML = `Take a look at my <a href="${data.profile_url}">Treehouse profile</a> for more info.`;
profile.setAttribute('class', 'updated');
pointsDescription.setAttribute('class', 'updated');
badgesDescription.setAttribute('class', 'updated');
photo.setAttribute('src',`${data.gravatar_url}`);
job.setAttribute('class', 'updated');
// Skills list
const pointsTreehouseSkills = Object.keys(data.points);
const pointsTreehouseValues = Object.values(data.points);
let treeSkills = '';
for(let i = 0; i < pointsTreehouseSkills.length; i++) {
if(pointsTreehouseValues[i] > 0) {
let skillName = pointsTreehouseSkills[i];
let skillValue = pointsTreehouseValues[i];
treeSkills += `<li><span class="skill-name">${skillName}</span><span class="skill-points">${skillValue}</span></li>`;
}
};
points.innerHTML = treeSkills;
let totalPoints = document.querySelector('ul#points li:first-child');
totalPoints.style.display = "none";
points.setAttribute('class','updated');
// Badges list
const badgesList = Object.values(data.badges);
badgesTotal.textContent = badgesList.length;
let treeBadges = '';
for(let i = 0; i < badgesList.length; i++) {
console.log('start loop');
let badgeValue = badgesList[i].name;
console.log(badgeValue);
treeBadges += `<li class="updated"><span>${badgeValue}</span></li>`;
};
badges.innerHTML = treeBadges;
badges.setAttribute('class','updated');
}
</script>CSS
@font-face {
font-family: "Blinker";
src: url("../ast/fonts/Blinker_variable.ttf") format("truetype");
font-style: normal;
font-variation-settings: 'wght' 50;
}
.code-block {
width: clamp(16em, 90vw, 60em);
margin: 1rem auto;
font-family: "Blinker", sans-serif;
}
.code-block img {
display: block;
margin: 1rem auto;
border-radius: 52%;
}
.code-block ul {
min-height: 5em;
}
.code-block h2, .code-block h3, .code-block img, .code-block ol, .code-block ol l, .code-block p {
transition: background-color .5s ease-in, color .5s ease-in, height .5s ease-in, width .5s ease-in;
}
.code-block h2 {
font-size: 4rem;
font-variation-settings: 'wght' 180;
margin: .5rem auto 0 auto;
text-align: center;
}
.code-block h3 {
font-size: 1.5rem;
font-variation-settings: 'wght' 90;
margin-top: 0;
text-align: center;
}
.skeleton-coloring {
background-color: darkgray;
color: darkgray;
border: none;
}
.code-block p {
text-align: center;
font-variation-settings: 'wght' 50;
}
.code-block ul { margin: 0; padding: 0; list-style-type: none; }
.code-block ul li { padding: 1rem; text-align: center; }
.skill-name {
font-size: 1.25rem;
}
.skill-points {
display: block;
font-variation-settings: 'wght' 120;
max-height: 5rem;
font-size: 2rem;
color: rgb(50, 72, 119);
}
.code-block ol#badges {
list-style-position: inside;
}
.code-block ol#badges li {
padding: 1rem;
text-align: center;
list-style-position: inside;
font-variation-settings: 'wght' 60;
}
h2.updated { color: #111; }
h3.updated { color: #333; }
p.updated { color: rgb(50, 72, 119); }
li.updated {background-color: #eee;}
li.updated::marker { color: rgb(50, 72, 119); }
@supports (display: flex) {
.code-block ul {
display: flex;
flex-flow: row;
flex: 1 1.5 min-content;
flex-wrap: wrap;
justify-content: space-evenly;
}
}
@supports (display: grid) {
.code-block ol#badges {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.code-block ol#badges li {
border-radius: .5rem;
}
.code-block li::marker {
display: block;
}
@media (min-width: 440px) {
.code-block ol#badges {
grid-template-columns: repeat(3, 1fr);
}
}
}