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 trialAdam Lyles Kauffman
14,016 Pointslinking to client side javascript file in pug
i have a personal project going. i successfully linked my static stylesheet using this video. i hope to link a frontend js file my index.pug. however when i tried using the method in this video expect with a script tag and a javascript folder i failed. the pug still rendered fine but no front end javascript interaction.
here is the code in my pug file:
extends layout.pug
block content
#header
#profile-info
#gallery-styles
ul#gallery
script(src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js')
script(src='/static/javascript/badges.js')
here is the code in my js file:
$.get("https://teamtreehouse.com/adam5808.json", function(response){
for (let i = 0; i < response.badges.length; i++){
var galleryItem = `<li><img src="${response.badges[i].icon_url}"><p>${response.badges[i].name}</p></li>`;
$('#gallery').last().append(galleryItem);
}
$('#profile-info').append(`
<h6>Treehouse Profile</h6>
<img src="${response.gravatar_url}" alt="${response.name}">
<h1>${response.name}</h1>
<p id="profile-name">Bellarmine Univerisy</p>
<p><a href="${response.profile_url}">${response.profile_name}</a></p>
<ul id="points-left"></ul>
<ul id="points-right"></ul>
<p><a href="${response.profile_url}"><button id="profile-button">View</button></a></p>`);
let i = 0;
$.each(response.points, function(key, value){
let liPoints = `<li><span>${value}</span><p>${key}</p></li>`;
if (value > 0){
if(i % 2 == 0){
$("#points-left").append(liPoints);
} else{
$("#points-right").append(liPoints);
}
i += 1;
}
});
});
the javascipt file should be dynamically creating html and displaying my badge information. did i fail to link my javascipt file properly? do i need to add anything in my app.js?
note: in programmer tools under sources i see static/stylesheets, but there is no static/javascript. i have a folder named javascript in my public folder.