Non mi visualizza un contenuto dinamico nella pagina Home

Spiego brevemente, per non creare troppa confusione, e dove sta il problema. Praticamente ho fatto la pagina index.html e vari file javascript, dove uno di questi dentro una cartella “templates”. I file sono i seguenti: index.html, main.js, app.js e homePage.js (Ultimo file dentro ad un'altra cartella “templates”, tutti i file javascript all'interno della cartella “js”). Volevo capire se ho sbagliato qualcosa nel codice, o magari i collegamenti. Vi ringrazio per le risposte. ps: ho eliminato alcuni link di bootstrap perchè “contenevano qualche email” e non mi facevano postare la domanda.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <script defer src="js/templates/homePage.js"></script>
    <script defer src="js/app.js"></script>
<script defer src="js/main.js"></script>

<script defer src="js/script.js"></script>

  <title>bozza</title>

</head>

<body>

  <header class="header clearfix">
    <img href="index.html" id="logo" src="css/images/learnwithme.png" alt="Logo" width="80" height="auto" />
    <!--<a href="index.html" class="header__lo">Logo</a>-->
    <a href="index.html" class="header__icon-bar">
      <span></span>
      <span></span>
      <span></span>
    </a>
    <ul class="header__menu animate">
      <li class="header__menu__item" id="homebtn"><a href="/home">Home</a></li>
      <li class="header__menu__item" id="insegnantibtn"><a href="/prof">Insegnanti</a></li>
      <li class="header__menu__item" id="studentibtn"><a href="/studenti">Studenti</a></li>
      <li class="header__menu__item" id="annuncibtn"><a href="/annunci">Annunci</a></li>
      <li class="header__menu__item" id="navbar-btn-toolbar">
        <button id="login-btn" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#login-modal">Accedi</button>
      </li>
    </ul>
  </header>

  <section class="cover">
    <div class="cover__caption__filter">
      <div class="cover__caption">
        <div class="cover__caption__copy">
          <h1>Hai bisogno di ripetizioni?</h1>
          <h2>Cerca quello più adatto a te</h2>
          <a href="#" class="button">ANNUNCI</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Parte dinamica della pagina-->
  <div id="app-container">

  </div>

  <!--about-->



</body>

</html>

"use strict";


const appContainer = document.querySelector("#app-container");
const navBtnToolBar = document.querySelector("#navbar-btn-toolbar");


const app = new App(appContainer, navBtnToolBar);


"use strict";


class App{
constructor(appContainer, navBtnToolBar){
this.appContainer = appContainer;
this.navBtnToolBar = navBtnToolBar;
this.userLoggedIn = null;
this.userProfile = null;


//per non inviare richieste multiple ad ogni pagina ricaricata
this.homeListenersDefined = false;


this.addLoginFormEventListeners();
this.addSignupFormEventListeners();
this.addProfFormEventListeners();
this.addStudentiFormEventListeners();
this.addAnnunciFormEventListeners();


page('/home', () => {
this.appContainer.innerHTML = '';
this.showHomePage();
});


page('/prof', () => {
this.appContainer.innerHTML = '';
this.showProfPage();
});


page('/studenti', () => {
this.appContainer.innerHTML = '';
this.showStudentiPage();
});


page('/annunci', () => {
this.appContainer.innerHTML = '';
this.showAnnunciPage();
});


//pagina mostra profilo connesso
page('/profile', () => {
this.appContainer.innerHTML = '';
this.showProfilePage();
});


//pagina mostra profilo di un altro utente
page('/profili', () => {
this.appContainer.innerHTML = '';
this.showProfiliPage();
});


//altri url non validi portano direttamente alla home page
page('*', () => {
page('/home');
});


page();
}


showHomePage(){
this.appContainer.innerHTML = createHomePage();


if(this.homeListenersDefined == true) return;


document.getElementById('homebtn').addEventListener('click', () => {
page('/home');
});


document.getElementById('insegnantibtn').addEventListener('click', () => {
page('/prof');
});


document.getElementById('studentibtn').addEventListener('click', () => {
page('/studenti');
});

document.getElementById('annuncibtn').addEventListener('click', () => {
page('/annunci');
});


this.homeListenersDefined = true;

}



}

"use strict";


function createHomePage(){
return `
<section class="about">
<div class="mainabout">
<img src="css/images/learnwithme.png">
<div class="about-text">
<h2>Impara Con Noi</h2>
<h5>Cerca il professore adatto a te</h5>
<p>Hai difficoltà in qualche materia e non sai cosa fare? Ecco la soluzione. Cerca il professore in base alle tue esigenze, materia, prezzo, città
tra i vari annunci. Schiaccia sul bottone per vedere il professore adatto a te!
</p>
<button class="bottoneabout"><a href="insegnanti.html">Professori</a></button>
</div>
</div>
</section>
`;
}