JSFiddle - React, Tailwind, and code Playground

by sberube

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
    <script defer src="arima.js"></script>
    <title>ARIMA Forecasting</title>
</head>
<body>
    <h1>ARIMA Forecasting</h1>
    
    <label for="inputValues">Enter comma-separated values:</label>
    <input type="text" id="inputValues" placeholder="e.g. 1,2,3,4,5">
    
    <button onclick="generateForecast()">Generate Forecast</button>
    
    <h3>Forecasted values:</h3>
    <ul id="forecastResults">
    </ul>
    
    <script>
        async function generateForecast() {
            const inputValues = document.getElementById("inputValues").value.split(",").map(Number);
            const forecastedValues = await forecast(inputValues);
            const resultContainer = document.getElementById("forecastResults");
            resultContainer.innerHTML = '';
            forecastedValues.forEach(value => {
                const listItem = document.createElement("li");
                listItem.textContent = value;
                resultContainer.appendChild(listItem);
            });
        }
    </script>
</body>
</html>