JSFiddle - React, Tailwind, and code Playground

by failimuhtar

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Word Replacement Game</title>
</head>
<body>
  <h1>Word Replacement Game</h1>
  <div id="gameContainer">
    <label for="nounInput">Enter a noun:</label>
    <input type="text" id="nounInput"><br>

    <label for="adjectiveInput">Enter an adjective:</label>
    <input type="text" id="adjectiveInput"><br>

    <label for="verbInput">Enter a verb:</label>
    <input type="text" id="verbInput"><br>

    <button onclick="generateStory()">Generate Story</button>

    <div id="storyOutput"></div>

    <button id="downloadButton" onclick="downloadStory()" disabled>Download Story</button>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>
  <script>
    function generateStory() {
      var noun = document.getElementById("nounInput").value;
      var adjective = document.getElementById("adjectiveInput").value;
      var verb = document.getElementById("verbInput").value;

      var story = "Once upon a time, there was a " + adjective + " " + noun + ". It loved to " + verb + " all day long. The end.";

      document.getElementById("storyOutput").innerText = story;
      document.getElementById("downloadButton").disabled = false;
    }

    function downloadStory() {
      var story = document.getElementById("storyOutput").innerText;
      var blob = new Blob([story], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
      saveAs(blob, "story.docx");
    }
  </script>
</body>
</html>