Short Story Generator with Specific Words in JavaScript

This JavaScript code helps you to create a short story generator with specific words tool to generate a random short story. It uses predefined templates and inserts random elements like names and locations to create unique stories. This code is helpful for generating fun and creative short stories with customized details.

You can use this code on your website or application to engage users with fun and personalized stories. It enhances user interaction and keeps them entertained. Additionally, it’s a great tool for creative writing exercises and can be adapted for various storytelling purposes.

How to Create a Short Story Generator Tool in JavaScript

1. First of all, load the Normalize CSS by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

2. After that, create the HTML structure for your story generator. You can use the following code as a template:

<div>
  <label for="customname">Enter custom name:</label>
  <input id="customname" type="text" placeholder="">
</div>
<div>
  <label for="us">US</label><input id="us" type="radio" name="ukus" value="us" checked>
  <label for="uk">UK</label><input id="uk" type="radio" name="ukus" value="uk">
</div>
<div>
  <button class="randomize">Generate random story</button>
</div>
<!-- Thanks a lot to Willy Aguirre for his help with the code for this assessment -->
<p class="story"></p>

3. Add some basic CSS to style your elements. You can customize the styling to match your website’s design:

label {
  font-weight: bold;
}

div {
  padding-bottom: 20px;
}

input[type="text"] {
  padding: 5px;
  width: 150px;
}

p {
  background: #ffc125;
  color: #5e2612;
  padding: 10px;
  visibility: hidden;
}

4. Now, it’s time to add the JavaScript code that powers the story generator. Copy and paste the provided JavaScript code into your project. Modify the storyText variable to create your own story template. Use :insertx:, :inserty:, and :insertz: as placeholders for dynamic content.

let customName = document.getElementById("customname");
let randomize = document.querySelector(".randomize");
let story = document.querySelector(".story");

let storyText =
  "It was 94 farenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but he was not surprised — :insertx: weighs 300 pounds, and it was a hot day.";
let insertX = ["Willy the Goblin", "Big Daddy", "Father Christmas"];

let insertY = ["the soup kitchen", "Disneyland", "the White House"];

let insertZ = [
  "spontaneously combusted",
  "melted into a puddle on the sidewalk",
  "turned into a slug and crawled away"
];

randomize.addEventListener("click", result);

function result() {
  let newStory = storyText;
  let xItem = randomValueFromArray(insertX);
  let yItem = randomValueFromArray(insertY);
  let zItem = randomValueFromArray(insertZ);

  newStory = newStory.replace(/:insertx:/gi, xItem);
  newStory = newStory.replace(":inserty:", yItem);
  newStory = newStory.replace(":insertz:", zItem);

  if (customName.value != "") {
    var name = customName.value;
    newStory = newStory.replace("Bob", name);
  }

  if (document.getElementById("uk").checked) {
    var weight = Math.round(300 * 0.0714);
    newStory = newStory.replace("300 pounds", weight + " stone");
    
    var temperature = Math.round((94 - 32) * 0.5556);
    newStory = newStory.replace("94 farenheit", temperature + " celcius");
  }

  story.textContent = newStory;
  story.style.visibility = "visible";
}

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function randomValueFromArray(stringsCollection) {
  const randomIndex = getRandomInt(2);

  return stringsCollection[randomIndex];
}

That’s all! hopefully, you have successfully created a Short Story Generator with Specific Words in JavaScript. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.