linking to client side javascript file in pug

Question

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.

Welcome to the Treehouse Community

Looking to learn something new?

Adam Lyles Kauffman

Adam Lyles Kauffman

linking to client side javascript file in pug