The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a tool to rotate writing prompts

Written by

Bernardo Palos

in

Here’s a simple JavaScript-based tool that rotates writing prompts. It can be used in a web environment and allows users to display a random prompt from a list or cycle through them manually.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Writing Prompt Rotator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px;
      background-color: #f9f9f9;
    }

    .prompt-box {
      background: #fff;
      padding: 30px;
      margin: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      max-width: 600px;
      text-align: center;
    }

    button {
      padding: 10px 20px;
      margin: 10px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      background-color: #4caf50;
      color: white;
      transition: background 0.3s;
    }

    button:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>

  <h1>Writing Prompt Rotator</h1>

  <div class="prompt-box" id="promptBox">
    Click a button to get a prompt.
  </div>

  <div>
    <button onclick="showRandomPrompt()">Random Prompt</button>
    <button onclick="showNextPrompt()">Next Prompt</button>
  </div>

  <script>
    const prompts = [
      "Describe a world where people communicate only through colors.",
      "Write a story where time travel is possible—but only once.",
      "Your main character wakes up with a completely different identity.",
      "A mysterious letter arrives with no return address and a warning inside.",
      "The sun stops rising. What happens next?",
      "Write about someone who discovers they are in a simulation.",
      "Describe a dinner between two rival supervillains.",
      "Your protagonist finds a journal that tells the future.",
      "Create a dialogue between two people who have never met—but share the same dream every night.",
      "Write about a town where no one can lie."
    ];

    let currentIndex = -1;

    function showRandomPrompt() {
      const randomIndex = Math.floor(Math.random() * prompts.length);
      document.getElementById("promptBox").innerText = prompts[randomIndex];
      currentIndex = randomIndex;
    }

    function showNextPrompt() {
      currentIndex = (currentIndex + 1) % prompts.length;
      document.getElementById("promptBox").innerText = prompts[currentIndex];
    }
  </script>

</body>
</html>

Features:

  • Random Prompt: Picks a new random prompt.

  • Next Prompt: Cycles through the list in order.

  • Responsive UI: Clean and minimal interface, mobile-friendly.

You can expand this with:

  • A textarea to write directly below each prompt.

  • LocalStorage to save favorite prompts.

  • A backend to pull prompts dynamically.

Let me know if you want a React, Python, or CLI version too.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About