first attempt at modularizing the javascript to reduce duplication
This commit is contained in:
parent
a5dd8f1610
commit
6dbff09621
@ -45,8 +45,8 @@
|
||||
</style>
|
||||
<title>Gamma World Bestiary</title>
|
||||
<script src="config.js"></script>
|
||||
<script src="bestiary.js" defer></script>
|
||||
<script src="catalog.js" defer></script>
|
||||
<script type="module" src="bestiary.js" defer></script>
|
||||
<script type="module" src="catalog.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Look Up A Creature</h2>
|
||||
|
@ -1,3 +1,5 @@
|
||||
import {loadingGif} from "./loading.js";
|
||||
|
||||
document.getElementById('searchForm').addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
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
|
||||
let resultSection = document.getElementById('resultSection');
|
||||
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);
|
||||
let imgElement = loadingGif(resultSection);
|
||||
|
||||
setTimeout(() => {
|
||||
fetch(`${window.BASE_URL}/rules/creature?${queryParams}`)
|
||||
|
@ -1,17 +1,13 @@
|
||||
import {loadingGif} from "./loading.js";
|
||||
|
||||
document.getElementById('catalog-button').addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
// Insert the loading.gif
|
||||
// Insert the loading.gif before making the fetch request
|
||||
let resultSection = document.getElementById('resultSection');
|
||||
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);
|
||||
|
||||
|
||||
loadingGif(resultSection);
|
||||
|
||||
fetch(`${window.BASE_URL}/rules/creature`)
|
||||
.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