index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="pico.amber.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuotes Test</title>
    <script>
        // Function to wake up the API
        function wakeUpAPI() {
          fetch('https://jquotes.onrender.com/wake', {
            method: 'GET',
            cache: 'no-cache' // Optional: to prevent caching the request
          }).catch(error => {
            // Optionally, handle errors, e.g., log them if necessary
            console.error('API wake-up failed:', error);
          });
        }
    
        // Call the function before the page fully loads
        wakeUpAPI();
      </script>
</head>

<body>
    <main class="container-fluid">
        <nav>

            <ul>

                <li>
                    <h1>JQuotes Test</h1>
                </li>

            </ul>
        </nav>

        <article>

            <header class="grid">
<!-- <button id="uz">Unzip once</button>-->
        <button id="get">Get Random Quote</button> 
            </header>
            <label for="quote">Random Quote:</label>
            <p id="quote">
                <!-- Random quote goes here -->
            </p>

            <label for="author">
                Author:
            </label>

            <p id="author">
                <!-- Quote author goes here -->
            </p>

           
            <footer>
<label for="category">
                Category:
            </label>
              <p id="category">
                <!-- Category goes here -->
            </p>
            </footer>
        </article>


        <!-- <button id="button">Download</button>
        <button id="read">Read</button> -->
    </main>
    <script type="module" src="./main.js"></script>
</body>

</html>