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

JavaScript Express Basics Serving Static Files in Express Adding Static Assets to the App

linking 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.