src/main/webapp/js/pokemonTypesRequests.js

+
+let tableContainerId = 'table';
+let detailsContainerId = 'details';
+let pokemonTypes = {};
+let selectedPokemonType = {};
+let basePokemonType = {
+    "name": null,
+    "imgUrl": null,
+    "japaneseName": null,
+    "pokedexNumber": null,
+    "abilities": null,
+    "baseAttack": null,
+    "captureRate": null,
+    "classification": null,
+    "baseDefense": null,
+    "baseHeight": null,
+    "baseHp": null,
+    "baseSpAttack": null,
+    "baseSpDefense": null,
+    "baseSpeed": null,
+    "primaryType": null,
+    "secondaryType": null,
+    "baseWeight": null,
+    "generation": null,
+    "isLegendary": null
+};
+let defaultPokemonType = {
+    "name": "Pikachu",
+    "id": 513,
+    "created": "24/04/2024",
+    "lastUpDate": "24/04/2024",
+    "imgUrl": "./images/pikachu.png",
+    "japaneseName": "Pikachuピカチュウ",
+    "pokedexNumber": 25,
+    "abilities": ["Static", "Lightningrod"],
+    "baseAttack": 55,
+    "captureRate": 190,
+    "classification": "Mouse Pokémon",
+    "baseDefense": 40,
+    "baseHeight": 0.4,
+    "baseHp": 35,
+    "baseSpAttack": 50,
+    "baseSpDefense": 50,
+    "baseSpeed": 90,
+    "primaryType": "electric",
+    "secondaryType": "",
+    "baseWeight": 6,
+    "generation": 1,
+    "isLegendary": "FALSE"
+}
+
+function changeSelectedPokemonType(id) {
+    selectedPokemonType = pokemonTypes?.data?.find(pt => pt.id === id);
+    showDetails();
+}
+
+function showDetails() {
+    const detailsContainer = document.getElementById(detailsContainerId);
+
+    detailsContainer.innerHTML = `
+    <div class="card" id="${selectedPokemonType.id}_card">
+      <img src="${selectedPokemonType.imgUrl}" class="card-img-top" alt="${selectedPokemonType.classification}">
+      <div class="card-body">
+        <h5 class="card-title">${selectedPokemonType.name} #${selectedPokemonType.pokedexNumber}</h5>
+        <p class="card-text">
+            <span class="font-weight-bold">Japanese name:</span> ${selectedPokemonType.japaneseName} </br>
+            <span class="font-weight-bold">Classification:</span> ${selectedPokemonType.classification} </br>
+            <span class="font-weight-bold">Generation:</span> ${selectedPokemonType.generation} </br>
+            <span class="font-weight-bold">Legendary:</span> ${selectedPokemonType.isLegendary ? "Yes" : "No"} </br>
+            <span class="font-weight-bold">Type:</span> ${selectedPokemonType.primaryType}${selectedPokemonType.secondaryType ? " , " + selectedPokemonType.secondaryType : ""}
+        </p>
+      </div>
+      
+      <ul class="list-group list-group-flush">
+            <li class="list-group-item">
+                <span class="font-weight-bold">ID:</span> ${selectedPokemonType.id}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Created:</span> ${selectedPokemonType.created}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Last update:</span> ${selectedPokemonType.lastUpDate}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Name:</span> ${selectedPokemonType.name}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Pokédex number:</span> #${selectedPokemonType.pokedexNumber}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Japanese name:</span> ${selectedPokemonType.japaneseName}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Classification:</span> ${selectedPokemonType.classification}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Generation:</span> ${selectedPokemonType.generation}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Legendary:</span> ${selectedPokemonType.isLegendary ? "Yes" : "No"}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Image URL:</span> ${selectedPokemonType.imgUrl}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">HP:</span> ${selectedPokemonType.baseHp}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Height:</span> ${selectedPokemonType.baseHeight}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Weight:</span> ${selectedPokemonType.baseWeight}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Attack:</span> ${selectedPokemonType.baseAttack}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Special Attack:</span> ${selectedPokemonType.baseSpAttack}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Defense:</span> ${selectedPokemonType.baseDefense}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Special Defense:</span> ${selectedPokemonType.baseSpDefense}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Speed:</span> ${selectedPokemonType.baseSpeed}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Capture rate:</span> ${selectedPokemonType.captureRate}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Primary type:</span> ${selectedPokemonType.primaryType}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Secondary type:</span> ${selectedPokemonType.secondaryType}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Abilities:</span> ${selectedPokemonType.abilities?.join(", ") || "none"}
+            </li>
+            <li class="list-group-item d-flex justify-content-between">
+                <a class="btn btn-primary" onclick="showCreateForm()">New</a>
+                <a class="btn btn-primary" onclick="showUpdateForm()">Update</a>
+                <a class="btn btn-danger" onclick="deletePokemonType(selectedPokemonType.id)">Delete</a>
+            </li>
+      </ul>
+    </div>
+    `
+}
+
+
+function createPokemonTypesTable() {
+    const tableContainer = document.getElementById(tableContainerId);
+    tableContainer.innerHTML = `
+        <table class="table table-striped table-hover">
+            <thead>
+                <tr>
+                    <th scope="col">ID</th>
+                    <th scope="col">Name</th>
+                    <th scope="col">Pokedex Number</th>
+                    <th scope="col">Primary Type</th>
+                    <th scope="col">Secondary Type</th>
+                </tr>
+            </thead>
+            <tbody>
+                ${
+                    pokemonTypes.data.map(resource => `${pokemonTypeToRow(resource)}`).join("\n")
+                    || "no data"
+                }
+            </tbody>
+        </table>
+    `
+
+    if(pokemonTypes?.data?.[0]?.id)
+        changeSelectedPokemonType(pokemonTypes?.data?.[0]?.id)
+}
+
+function pokemonTypeToRow(pokemonType) {
+    return `
+    <tr id="${pokemonType.id}_row" onclick="changeSelectedPokemonType('${pokemonType?.id?.trim()}')">
+        <th scope="row">${pokemonType.id}</th>
+        <td>${pokemonType.name}</td>
+        <td>#${pokemonType.pokedexNumber}</td>
+        <td>${pokemonType.primaryType}</td>
+        <td>${pokemonType.secondaryType || '-'}</td>
+    </tr>
+    `
+}
+
+function getPokemonTypes() {
+    return fetch('./api/pokemonTypes')
+        .then(res => res.json())
+        .then(data => {
+            pokemonTypes = data;
+            createPokemonTypesTable();
+        })
+        .catch(err => {
+            console.error(`Unable to fetch Pokemon Types: ${err.status}`);
+            console.error(err);
+        });
+}
+
+function deletePokemonType(id) {
+    return fetch(`./api/pokemonTypes/${id}`, { method: "DELETE" })
+        .then(() => {
+            getPokemonTypes()
+        })
+        .catch(err => {
+            console.error(`Unable to delete Pokemon Type: ${err.status}`);
+            console.error(err);
+        });
+}
+
+
+function showUpdateForm() {
+    const detailsContainer = document.getElementById(detailsContainerId);
+
+    detailsContainer.innerHTML = `
+    <form id="update-form">
+          <div class="form-group">
+                <label for="input-name">Name</label>
+                <input type="text" class="form-control" id="input-name" name="name" placeholder="${selectedPokemonType.name}">
+          </div>
+          <div class="form-group">
+                <label for="input-classification">Classification</label>
+                <input type="text" class="form-control" id="input-classification" name="classification" placeholder="${selectedPokemonType.classification}">
+          </div>
+          <div class="form-group">
+                <label for="input-japanese-name">Japanese name</label>
+                <input type="text" class="form-control" id="input-japanese-name" name="japaneseName" placeholder="${selectedPokemonType.japaneseName}">
+          </div>
+          <div class="form-group">
+                <label for="input-img-url">Image URL</label>
+                <input type="text" class="form-control" id="input-img-url" name="imgUrl" placeholder="${selectedPokemonType.imgUrl}">
+          </div>
+          <div class="d-flex justify-content-between">
+                <button type="submit" class="btn btn-primary">Submit</button>
+                <button type="button" class="btn btn-danger" onclick="showDetails()">Cancel</button>
+          </div>
+    </form>
+    `
+
+    const form = document.getElementById("update-form");
+    form.addEventListener("submit", function(event) {
+            event.preventDefault();
+
+            let formData = new FormData(form);
+            formData.forEach((v,k) => {
+                selectedPokemonType[k] = formData.get(k) || selectedPokemonType[k];
+            })
+
+            const id = selectedPokemonType.id;
+            fetch(`./api/pokemonTypes/${id}`, {
+                    method: "PUT",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify(selectedPokemonType, null, 2)
+                }).then(res => getPokemonTypes())
+                .then(() => changeSelectedPokemonType(id))
+                .catch(err => {
+                    console.error("Error updating resource", err)
+                })
+        })
+}
+
+function showCreateForm() {
+    const detailsContainer = document.getElementById(detailsContainerId);
+
+    detailsContainer.innerHTML = `
+    <form id="create-form">
+          <div class="form-group">
+                <label for="input-name">Name</label>
+                <input type="text" class="form-control" id="input-name" name="name" placeholder="${defaultPokemonType.name}">
+          </div>
+          <div class="form-group">
+                <label for="input-classification">Classification</label>
+                <input type="text" class="form-control" id="input-classification" name="classification" placeholder="${defaultPokemonType.classification}">
+          </div>
+          <div class="form-group">
+                <label for="input-japanese-name">Japanese name</label>
+                <input type="text" class="form-control" id="input-japanese-name" name="japaneseName" placeholder="${defaultPokemonType.japaneseName}">
+          </div>
+          <div class="form-group">
+                <label for="input-img-url">Image URL</label>
+                <input type="text" class="form-control" id="input-img-url" name="imgUrl" placeholder="${defaultPokemonType.imgUrl}">
+          </div>
+          <div class="d-flex justify-content-between">
+                <button type="submit" class="btn btn-primary">Submit</button>
+                <button type="button" class="btn btn-danger" onclick="showDetails()">Cancel</button>
+          </div>
+    </form>
+    `
+
+    const form = document.getElementById("create-form");
+    form.addEventListener("submit", function(event) {
+            event.preventDefault();
+
+            let newPokemonType = JSON.parse(JSON.stringify(basePokemonType));
+            let formData = new FormData(form);
+            formData.forEach((v,k) => {
+                newPokemonType[k] = formData.get(k);
+            })
+
+            let newId;
+            fetch(`./api/pokemonTypes`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify(newPokemonType, null, 2)
+                }).then(res => res.json())
+                .then(data => {
+                    newId = data.id;
+                    return getPokemonTypes();
+                })
+                .then(() => changeSelectedPokemonType(newId))
+                .catch(err => {
+                    console.error("Error updating resource", err)
+                })
+        })
+}

src/main/webapp/js/trainersRequests.js

+
+let tableContainerId = 'table';
+let detailsContainerId = 'details';
+let trainers = {};
+let selectedTrainer = {};
+let baseTrainer = {
+    "name": null,
+    "profileUrl": null
+};
+let defaultTrainer = {
+    "name": "Ash Ketchum",
+    "id": 1,
+    "profileUrl": "https://archives.bulbagarden.net/media/upload/thumb/c/cd/Ash_JN.png/300px-Ash_JN.png"
+}
+
+function changeSelectedTrainer(id) {
+    selectedTrainer = trainers?.data?.find(pt => pt.id === id);
+    showDetails();
+}
+
+function showDetails() {
+    const detailsContainer = document.getElementById(detailsContainerId);
+
+    detailsContainer.innerHTML = `
+    <div class="card" id="${selectedTrainer.id}_card">
+      <img src="${selectedTrainer.profileUrl}" class="card-img-top">
+      <div class="card-body">
+        <h5 class="card-title">${selectedTrainer.name} (${selectedTrainer.id})</h5>
+      </div>
+      
+      <ul class="list-group list-group-flush">
+            <li class="list-group-item">
+                <span class="font-weight-bold">ID:</span> ${selectedTrainer.id}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Created:</span> ${selectedTrainer.created}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Last update:</span> ${selectedTrainer.lastUpDate}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Name:</span> ${selectedTrainer.name}
+            </li>
+            <li class="list-group-item">
+                <span class="font-weight-bold">Image URL:</span> ${selectedTrainer.profileUrl}
+            </li>
+            <li class="list-group-item d-flex justify-content-between">
+                <a class="btn btn-primary" onclick="showCreateForm()">New</a>
+                <a class="btn btn-primary" onclick="showUpdateForm()">Update</a>
+                <a class="btn btn-danger" onclick="deleteTrainer(selectedTrainer.id)">Delete</a>
+            </li>
+      </ul>
+    </div>
+    `
+}
+
+
+function createTrainersTable() {
+    const tableContainer = document.getElementById(tableContainerId);
+    tableContainer.innerHTML = `
+        <table class="table table-striped table-hover">
+            <thead>
+                <tr>
+                    <th scope="col">ID</th>
+                    <th scope="col">Name</th>
+                </tr>
+            </thead>
+            <tbody>
+                ${
+                    trainers.data.map(resource => `${trainerToRow(resource)}`).join("\n")
+                    || "no data"
+                }
+            </tbody>
+        </table>
+    `
+
+    if(trainers?.data?.[0]?.id)
+        changeSelectedTrainer(trainers?.data?.[0]?.id)
+}
+
+function trainerToRow(trainer) {
+    return `
+    <tr id="${trainer.id}_row" onclick="changeSelectedTrainer('${trainer?.id?.trim()}')">
+        <th scope="row">${trainer.id}</th>
+        <td>${trainer.name}</td>
+    </tr>
+    `
+}
+
+function getTrainers() {
+    return fetch('./api/trainers')
+        .then(res => res.json())
+        .then(data => {
+            trainers = data;
+            createTrainersTable();
+        })
+        .catch(err => {
+            console.error(`Unable to fetch trainers: ${err.status}`);
+            console.error(err);
+        });
+}
+
+function deleteTrainer(id) {
+    return fetch(`./api/trainers/${id}`, { method: "DELETE" })
+        .then(() => {
+            getTrainers()
+        })
+        .catch(err => {
+            console.error(`Unable to delete trainer: ${err.status}`);
+            console.error(err);
+        });
+}
+
+
+function showUpdateForm() {
+    const detailsContainer = document.getElementById(detailsContainerId);
+
+    detailsContainer.innerHTML = `
+    <form id="update-form">
+          <div class="form-group">
+                <label for="input-name">Name</label>
+                <input type="text" class="form-control" id="input-name" name="name" placeholder="${selectedTrainer.name}">
+          </div>
+          <div class="form-group">
+                <label for="input-profile-url">Profile URL</label>
+                <input type="text" class="form-control" id="input-profile-url" name="profileUrl" placeholder="${selectedTrainer.profileUrl}">
+          </div>
+          <div class="d-flex justify-content-between">
+                <button type="submit" class="btn btn-primary">Submit</button>
+                <button type="button" class="btn btn-danger" onclick="showDetails()">Cancel</button>
+          </div>
+    </form>
+    `
+
+    const form = document.getElementById("update-form");
+    form.addEventListener("submit", function(event) {
+            event.preventDefault();
+
+            let formData = new FormData(form);
+            formData.forEach((v,k) => {
+                selectedTrainer[k] = formData.get(k) || selectedTrainer[k];
+            })
+
+            const id = selectedTrainer.id;
+            fetch(`./api/trainers/${id}`, {
+                    method: "PUT",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify(selectedTrainer, null, 2)
+                }).then(res => getTrainers())
+                .then(() => changeSelectedTrainer(id))
+                .catch(err => {
+                    console.error("Error updating resource", err)
+                })
+        })
+}
+
+function showCreateForm() {
+    const detailsContainer = document.getElementById(detailsContainerId);
+
+    detailsContainer.innerHTML = `
+    <form id="create-form">
+          <div class="form-group">
+                <label for="input-name">Name</label>
+                <input type="text" class="form-control" id="input-name" name="name" placeholder="${defaultTrainer.name}">
+          </div>
+          <div class="form-group">
+                <label for="input-profile-url">Profile URL</label>
+                <input type="text" class="form-control" id="input-profile-url" name="profileUrl" placeholder="${defaultTrainer.profileUrl}">
+          </div>
+          <div class="d-flex justify-content-between">
+                <button type="submit" class="btn btn-primary">Submit</button>
+                <button type="button" class="btn btn-danger" onclick="showDetails()">Cancel</button>
+          </div>
+    </form>
+    `
+
+    const form = document.getElementById("create-form");
+    form.addEventListener("submit", function(event) {
+            event.preventDefault();
+
+            let newTrainer = JSON.parse(JSON.stringify(baseTrainer));
+            let formData = new FormData(form);
+            formData.forEach((v,k) => {
+                newTrainer[k] = formData.get(k);
+            })
+
+            let newId;
+            fetch(`./api/trainers`, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify(newTrainer, null, 2)
+                }).then(res => res.json())
+                .then(data => {
+                    newId = data.id;
+                    return getTrainers();
+                })
+                .then(() => changeSelectedTrainer(newId))
+                .catch(err => {
+                    console.error("Error updating resource", err)
+                })
+        })
+}

src/main/webapp/pokemon.html

+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/html">
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
+          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
+
+    <title>PokeApp</title>
+    <link rel="icon" type="image/x-icon" href="./favicon.ico">
+</head>
+<body>
+
+<h1 class="display-1 d-flex justify-content-center mb-5">PokeApp</h1>
+
+<div class="d-flex justify-content-center mb-5">
+    <a class="btn btn-primary mx-2" href="./pokemonTypes.html">Pokemon Types</a>
+    <a class="btn btn-primary mx-2" href="./trainers.html">Trainers</a>
+    <a class="btn btn-primary mx-2" href="./pokemon.html">Pokemon</a>
+</div>
+
+<div class="d-flex justify-content-center mb-5">
+    <div class="row">
+        <div class="col-sm">
+            <h2>Pokemon Details</h2>
+
+            <ul>
+                <li>
+                    <storng>ID:</storng>
+                    <span id="detail-id"></span></li>
+                <li>
+                    <storng>Name:</storng>
+                    <span id="detail-name"></span></li>
+                <li>
+                    <storng>Trainer ID:</storng>
+                    <span id="detail-trainer-id"></span></li>
+                <li>
+                    <storng>Pokemon Type ID:</storng>
+                    <span id="detail-pokemon-type-id"></span></li>
+            </ul>
+        </div>
+        <div class="col-sm">
+            <h2>New Pokemon</h2>
+
+            <label>ID: </label></br>
+            <input type="text" id="new-id"></br>
+
+            <label>Name: </label></br>
+            <input type="text" id="new-name"></br>
+
+            <label>Trainer ID: </label></br>
+            <input type="text" id="new-trainer-id"></br>
+
+            <label>Pokemon Type ID: </label></br>
+            <input type="text" id="new-pokemon-type-id"></br>
+
+            <button onclick="createPokemon()">New</button>
+        </div>
+        <div class="col-sm">
+            <h2>Update Pokemon</h2>
+
+            <label>ID: </label></br>
+            <input type="text" id="update-id"></br>
+
+            <label>Name: </label></br>
+            <input type="text" id="update-name"></br>
+
+            <label>Trainer ID: </label></br>
+            <input type="text" id="update-trainer-id"></br>
+
+            <label>Pokemon Type ID: </label></br>
+            <input type="text" id="update-pokemon-type-id"></br>
+        </div>
+    </div>
+</div>
+
+<h2>Pokemon Table</h2>
+<div class="pokemon-table">
+    <table class="table table-striped table-hover">
+        <thead>
+        <tr>
+            <th scope="col">ID</th>
+            <th scope="col">Name</th>
+            <th scope="col">Trainer ID</th>
+            <th scope="col">Pokemon Type ID</th>
+        </tr>
+        </thead>
+        <tbody id="table-body">
+            <tr>
+                <th scope="row">No data</th>
+                <td>-</td>
+                <td>-</td>
+                <td>-</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+<script>
+    fetch('./api/pokemon')
+        .then(res => res.json())
+        .then(data => {
+            let rows = data?.map(pokemon => `
+              <tr>
+                <td>${pokemon.id}</td>
+                <td>${pokemon.name}</td>
+                <td>${pokemon.trainerId}</td>
+                <td>${pokemon.pokemonTypeId}</td>
+              </tr>
+        `);
+
+            document.getElementById("table-body").innerHTML = rows.join("/n");
+        }).catch(err => {
+        console.error("Unable to fetch all pokemon", err)
+    })
+</script>
+
+<script>
+  function createPokemon() {
+    const newPokemon = {
+      id: document.getElementById("new-id").value,
+      name: document.getElementById("new-name").value,
+      trainerId: document.getElementById("new-trainer-id").value,
+      pokemonType: document.getElementById("new-pokemon-type-id").value,
+    }
+
+    fetch('./api/pokemon', {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(newPokemon)
+    }).then(res => {
+      alert("Pokemon created")
+    }).catch(err => {
+      alert("Failed to create pokemon")
+      console.error(err);
+    })
+  }
+</script>
+
+</body>
+</html>
\ No newline at end of file

src/main/webapp/pokemonTypes.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
+          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
+
+    <title>PokeApp</title>
+    <link rel="icon" type="image/x-icon" href="./favicon.ico">
+</head>
+<body>
+
+    <script src="js/pokemonTypesRequests.js"></script>
+
+    <h1 class="display-1 d-flex justify-content-center mb-5">PokeApp</h1>
+
+    <div class="d-flex justify-content-center mb-5">
+        <a class="btn btn-primary mx-2" href="./pokemonTypes.html">Pokemon Types</a>
+        <a class="btn btn-primary mx-2" href="./trainers.html">Trainers</a>
+        <a class="btn btn-primary mx-2" href="./pokemon.html">Pokemon</a>
+    </div>
+
+    <div class="container">
+        <div class="row">
+            <div class="col-8">
+                <h2>Pokemon Types</h2>
+                <div id="tableContainer">No data</div>
+            </div>
+            <div class="col-4">
+                <h2>Pokemon Type Details</h2>
+                <div id="detailsContainer">No data</div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        tableContainerId = "tableContainer";
+        detailsContainerId = "detailsContainer";
+        getPokemonTypes();
+        showUpdateForm();
+    </script>
+
+</body>
+</html>
\ No newline at end of file