I need help creating a workout tracker using two JS files. The main.js file is responsible for loading content from the second file (workoutTracker.js) into the index.html. However, I'm facing an issue where the content is not being displayed on the page. Any suggestions or guidance would be greatly appreciated. Feel free to ask for more clarification if needed.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fitness Tracker</title>
<link rel="stylesheet" href="style.css" />
<script href="main.js" type="module"></script>
<script href="workoutTracker.js" type="module"></script>
</head>
<body>
<div id="app">
<!-- Content goes here -->
</div>
</body>
</html>
JS (main.js):
import workoutTracker from "./workoutTracker.js";
const app = document.getElementById("app");
new workoutTracker(app);
JS (workoutTracker.js):
export default class workoutTracker {
constructor(root) {
this.root = root;
this.root.insertAdjacentHTML("afterbegin", workoutTracker.html());
this.loadEntries();
this.updateView();
}
static html() {
return `
<table class="tracker">
<thead>
<tr>
<th>Date</th>
<th>Workout</th>
<th>Duration</th>
<th></th>
</tr>
</thead>
<tbody class="tracker__entries">
</tbody>
<tbody>
<tr class="tracker__row tracker__row--add">
<td colspan="4">
<button class="tracker__add">Add Entry +</button>
</td>
</tr>
</tbody>
</table>
`;
}
}