cfultz/mtgcsv
1
0
Fork 0
mirror of https://github.com/cfultz/mtgcsv.git synced 2024-11-24 10:00:04 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Corrected autocomplete

Browse Source
This commit is contained in:
Caleb Fultz 2024-08-21 08:46:39 -04:00
parent 1d04b0f64c
commit a786d0e050
2 changed files with 52 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app.js
View File

@ -61,10 +61,40 @@ document.addEventListener('DOMContentLoaded', () => {
});
async function fetchCardSuggestions(query) {
try {
const response = await fetch(`https://api.scryfall.com/cards/autocomplete?q=${encodeURIComponent(query)}`);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
return data.data;
} catch (error) {
console.error('Fetch error:', error);
return [];
}
}
document.getElementById('card-name').addEventListener('input', async function() {
const query = this.value.trim();
if (query.length < 2) { // Only search for queries longer than 1 character
document.getElementById('suggestions').innerHTML = '';
return;
}
const suggestions = await fetchCardSuggestions(query);
const suggestionsDiv = document.getElementById('suggestions');
suggestionsDiv.innerHTML = ''; // Clear previous suggestions
suggestions.forEach(suggestion => {
const div = document.createElement('div');
div.textContent = suggestion;
div.onclick = () => {
document.getElementById('card-name').value = suggestion;
suggestionsDiv.innerHTML = ''; // Clear suggestions after selection
};
suggestionsDiv.appendChild(div);
});
});
async function fetchCardDetails(cardName, setCode) {
// Use the Scryfall 'named' endpoint to fetch the exact card by name and set code

50
index.html
View File

@ -30,45 +30,34 @@
</div>
<h1>MTG Card CSV Generator</h1>
<form id="card-form" class="mdc-card">
<div class="mdc-text-field mdc-text-field--outlined">
<input type="text" id="card-name" class="mdc-text-field__input" autocomplete="off" required>
<label class="mdc-floating-label" for="card-name">Card Name</label>
<div class="mdc-line-ripple"></div>
<form id="card-form">
<div>
<label for="card-name">Card Name:</label>
<input type="text" id="card-name" autocomplete="off" required>
<div id="suggestions"></div>
</div>
<div class="mdc-text-field mdc-text-field--outlined">
<input type="text" id="set-code" class="mdc-text-field__input" required>
<label class="mdc-floating-label" for="set-code">Set Code</label>
<div class="mdc-line-ripple"></div>
<div>
<label for="set-code">Set Code:</label>
<input type="text" id="set-code" required>
</div>
<div class="mdc-text-field mdc-text-field--outlined">
<input type="text" id="card-id" class="mdc-text-field__input" required>
<label class="mdc-floating-label" for="card-id">Card ID</label>
<div class="mdc-line-ripple"></div>
<div>
<label for="card-id">Card ID:</label>
<input type="text" id="card-id" required>
</div>
<div class="mdc-text-field mdc-text-field--outlined">
<input type="number" id="quantity" class="mdc-text-field__input" min="1" value="1" required>
<label class="mdc-floating-label" for="quantity">Quantity</label>
<div class="mdc-line-ripple"></div>
<div>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" min="1" value="1" required>
</div>
<div class="mdc-select">
<select id="foil" class="mdc-select__native-control">
<div>
<label for="foil">Is it Foil?</label>
<select id="foil">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
<label class="mdc-floating-label">Is it Foil?</label>
<div class="mdc-line-ripple"></div>
</div>
<button type="button" class="mdc-button mdc-button--raised" id="add-card-button">Add Card</button>
<button type="button" id="add-card-button">Add Card</button>
</form>
<button class="mdc-button mdc-button--outlined" id="download-csv-button">Download CSV</button>
<button id="download-csv-button">Download CSV</button>
<textarea id="csv-output" readonly></textarea>
<div id="card-popup" class="card-popup"></div>
</div>
@ -86,6 +75,5 @@
navigator.serviceWorker.register('sw.js')
}
</script>
</body>
</html>