prompt generator for website

That's it! Now, when you open the prompt-generator.html file in a web browser, you'll see a simple prompt generator. Clicking the "Generate" button will fetch a prompt using the mymemory library without requiring an API key. The generated prompt will be displayed in the <h2> element with the id "prompt".

Feel free to customize the styles or modify the code further based on your specific requirements.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Prompt Generator</title>

  <link rel="stylesheet" href="body {

  font-family: Arial, sans-serif;

  margin: 0;

  padding: 0;

}

header {

  background-color: #333;

  color: #fff;

  padding: 20px;

  text-align: center;

}

header h1 {

  margin: 0;

}

main {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

}

.prompt-container {

  text-align: center;

}

#prompt {

  font-size: 24px;

  margin-bottom: 20px;

}

#generate-btn {

  padding: 10px 20px;

  background-color: #4CAF50;

  color: #fff;

  border: none;

  border-radius: 4px;

  font-size: 16px;

  cursor: pointer;

  transition: background-color 0.3s;

}

#generate-btn:hover {

  background-color: #45a049;

}

">

</head>

<body>

  <header>

    <h1>Prompt Generator</h1>

  </header>

  <main>

    <div class="prompt-container">

      <h2 id="prompt"></h2>

      <button id="generate-btn">Generate</button>

    </div>

  </main>

  <script src="window.onload = function() {

  const promptElement = document.getElementById("prompt");

  const generateButton = document.getElementById("generate-btn");

  generateButton.addEventListener("click", generatePrompt);

  function generatePrompt() {

    // Make a GET request to the MyMemory API

    fetch("https://api.mymemory.translated.net/get?q=prompt&langpair=en|en")

      .then(response => response.json())

      .then(data => {

        const prompt = data.matches[0].translation;

        promptElement.textContent = prompt;

      })

      .catch(error => {

        console.log("Error:", error);

        promptElement.textContent = "Failed to fetch prompt. Please try again.";

      });

  }

};

"></script>

</body>

</html>