Short Story Generator with Specific Words in JavaScript

Short Story Generator with Specific Words in JavaScript
Code Snippet:silly story generator
Author: Muhammad Ghazali
Published: January 21, 2024
Last Updated: January 22, 2024
Downloads: 646
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X