JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>API Result Grid</title>
    <style>
      /* Style the grid */
      .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-gap: 20px;
      }

      .grid-item {
        background-color: #f2f2f2;
        padding: 20px;
        display: flex;
      }

      /* Style the error message */
      .error {
        color: red;
        font-weight: bold;
        text-align: center;
      }

      /* Style the column headers */
      .header {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>API Result Grid</h1>
    <p>Enter text to pass as a parameter:</p>
    <input id="input-text" type="text">
    <button onclick="getApiData()">Get Data</button>
    <div id="grid-container"></div>
    <div id="error"></div>
    <script>
      function getApiData() {
        // Get the input text from the input field
        const inputText = document.getElementById("input-text").value;

        // Make the API call
        fetch(`https://financialmodelingprep.com/api/v3/earning_calendar?from=2022-10-11&to=2022-10-13&apikey=c5ceb6f582038248f453e7318e934528&${inputText}`)
          .then(response => {
            // Check if the response was successful
            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }

            // Convert the response to JSON
            return response.json();
          })
          .then(data => {
            // Display the data in a grid
            const gridContainer = document.getElementById("grid-container");
            gridContainer.innerHTML = "";

            // Add column headers
            const headerRow = document.createElement("div");
            headerRow.className = "grid-item header-row";
            const header1 = document.createElement("div");
            header1.className = "header";
           ...