first attempt at modularizing the javascript to reduce duplication
This commit is contained in:
parent
a5dd8f1610
commit
6dbff09621
@ -45,8 +45,8 @@
|
|||||||
</style>
|
</style>
|
||||||
<title>Gamma World Bestiary</title>
|
<title>Gamma World Bestiary</title>
|
||||||
<script src="config.js"></script>
|
<script src="config.js"></script>
|
||||||
<script src="bestiary.js" defer></script>
|
<script type="module" src="bestiary.js" defer></script>
|
||||||
<script src="catalog.js" defer></script>
|
<script type="module" src="catalog.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h2>Look Up A Creature</h2>
|
<h2>Look Up A Creature</h2>
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
import {loadingGif} from "./loading.js";
|
||||||
|
|
||||||
document.getElementById('searchForm').addEventListener('submit', function (event) {
|
document.getElementById('searchForm').addEventListener('submit', function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const creatureName = document.getElementById('creature').value;
|
const creatureName = document.getElementById('creature').value;
|
||||||
@ -7,15 +9,7 @@ document.getElementById('searchForm').addEventListener('submit', function (event
|
|||||||
|
|
||||||
// Insert the loading.gif before making the fetch request
|
// Insert the loading.gif before making the fetch request
|
||||||
let resultSection = document.getElementById('resultSection');
|
let resultSection = document.getElementById('resultSection');
|
||||||
resultSection.innerHTML = '';
|
let imgElement = loadingGif(resultSection);
|
||||||
let imgElement = document.createElement('img');
|
|
||||||
imgElement.src = 'img/checking.gif';
|
|
||||||
imgElement.style.width = '500px';
|
|
||||||
imgElement.style.height = '500px';
|
|
||||||
imgElement.style.display = 'block';
|
|
||||||
imgElement.style.marginLeft = 'auto';
|
|
||||||
imgElement.style.marginRight = 'auto';
|
|
||||||
resultSection.appendChild(imgElement);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
fetch(`${window.BASE_URL}/rules/creature?${queryParams}`)
|
fetch(`${window.BASE_URL}/rules/creature?${queryParams}`)
|
||||||
|
@ -1,17 +1,13 @@
|
|||||||
|
import {loadingGif} from "./loading.js";
|
||||||
|
|
||||||
document.getElementById('catalog-button').addEventListener('click', function (event) {
|
document.getElementById('catalog-button').addEventListener('click', function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
// Insert the loading.gif
|
// Insert the loading.gif before making the fetch request
|
||||||
let resultSection = document.getElementById('resultSection');
|
let resultSection = document.getElementById('resultSection');
|
||||||
resultSection.innerHTML = '';
|
|
||||||
let imgElement = document.createElement('img');
|
|
||||||
imgElement.src = 'img/checking.gif';
|
loadingGif(resultSection);
|
||||||
imgElement.style.width = '500px';
|
|
||||||
imgElement.style.height = '500px';
|
|
||||||
imgElement.style.display = 'block';
|
|
||||||
imgElement.style.marginLeft = 'auto';
|
|
||||||
imgElement.style.marginRight = 'auto';
|
|
||||||
resultSection.appendChild(imgElement);
|
|
||||||
|
|
||||||
fetch(`${window.BASE_URL}/rules/creature`)
|
fetch(`${window.BASE_URL}/rules/creature`)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
|
24
web/loading.js
Normal file
24
web/loading.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
|
||||||
|
export function loadingGif(resultSection) {
|
||||||
|
// Insert the loading.gif before making the fetch request
|
||||||
|
resultSection.innerHTML = '';
|
||||||
|
let imgElement = document.createElement('img');
|
||||||
|
imgElement.src = 'img/checking.gif';
|
||||||
|
imgElement.style.width = '500px';
|
||||||
|
imgElement.style.height = '500px';
|
||||||
|
imgElement.style.display = 'block';
|
||||||
|
imgElement.style.marginLeft = 'auto';
|
||||||
|
imgElement.style.marginRight = 'auto';
|
||||||
|
resultSection.appendChild(imgElement);
|
||||||
|
return imgElement;
|
||||||
|
}
|
||||||
|
export function setResultImage(document, name) {
|
||||||
|
let imgElement = document.createElement('img');
|
||||||
|
let resultSection = document.getElementById('resultSection');
|
||||||
|
imgElement.src = 'img/' + name + ".jpg";
|
||||||
|
console.log(imgElement.src);
|
||||||
|
imgElement.onerror = function () {
|
||||||
|
this.src = 'img/404.jpg';
|
||||||
|
};
|
||||||
|
resultSection.appendChild(imgElement);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user