JSFiddle - React, Tailwind, and code Playground

by rga4

HTML

<!DOCTYPE html><html>  <head>    <title>Albion Online Price Checker</title>  </head>  <body>    <h1>Albion Online Price Checker</h1>        <!-- Input Fields -->    <div>      <label>Items:</label>      <input id="items" type="text" value="T4_BAG,T5_BAG">            <label>Locations:</label>      <input id="locations" type="text" value="Caerleston,Bridgewatch">            <label>Qualities:</label>      <input id="qualities" type="text" value="2">    </div>        <!-- Table for Results Display -->    <table id="resultsTable"></table>        <!-- Button for Requesting Data -->    <button onclick="requestData()">Check Prices</button>        <script src="app.js"></script>  </body></html>

JavaScript

// Fetch Albion Online data and update the results table
function requestData() {  
const items = document.getElementById("items").value;  
const locations = document.getElementById("locations").value;  
const qualities = document.getElementById("qualities").value;    
const url = `https://west.albio-n-online-data.com/api/v2/stats/price/${items}/location=${locations}&quality=${qualities}`;  
fetch(url).then((response) => response.json()).then((data) => displayResults(data)).catch((error) => console.log(error));

}// Function to display data in a table format
function displayResults(data) {  
  const resultsTable = document.getElementById("resultsTable");  
  resultsTable.innerHTML = "";
}