<!DOCTYPE html>
<html>

<head>
    <title>Number Sum</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <form id="dataForm">
        <label for="numbers">Enter numbers (separated by commas):</label><br />
        <input type="text" id="numbers" name="numbers" /><br /><br />
        <input type="submit" value="Submit" />
    </form>
    <div id="totalSum"></div>

    <table id="resultTable">
        <thead>
            <tr>
                <th>Number</th>
                <th>Date</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <br />

    <script>
        async function fetchDataFromAPI(apiUrl) {
            try {
                const response = await fetch(apiUrl);

                // Check if the response is successful (status code 2xx)
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }

                const data = await response.json(); // Parse the JSON data
                return data;
            } catch (error) {
                console.error('Error fetching data:', error);
                throw error;
            }
        }

        // Function to add rows to the table
        function addRowToTable(number, date) {
            const tableBody = document.querySelector('#resultTable tbody');
            const newRow = document.createElement('tr');

            const numberCell = document.createElement('td');
            numberCell.textContent = number;
            newRow.appendChild(numberCell);

            const dateCell = document.createElement('td');
            dateCell.textContent = date;
            newRow.appendChild(dateCell);

            tableBody.appendChild(newRow);
        }

        // Example usage:
        const apiUrl = 'https://raw.githubusercontent.com/anantprakashgupta/json_data/main/data.json'; // Replace with the actual API URL
        fetchDataFromAPI(apiUrl)
            .then((data) => {
                // Process the data or perform further operations here
                data.forEach((item) => {
                    addRowToTable(item.data, item.datetime);
                });
            })
            .catch((error) => {
                // Handle errors if any occurred during the fetching process
                console.error('Error:', error);
            });
    </script>
</body>

</html>

 



 

 Show Demo Click Here...