Byte-sized Story Generator

Posted on

Overview

Create a simple web application that uses a basic algorithm to generate a random short story. The goal is to keep the generated story under 500 bytes (about 100 words) to ensure it’s concise and impactful.

Tech Stack

  • HTML
  • CSS
  • JavaScript (no external libraries)

Features

  • A button to generate a new story
  • Display the generated story on the page
  • Ensure the story is under 500 bytes

Implementation Steps

  1. Set up a basic HTML file with a button and a div to display the story.
  2. Write JavaScript to generate a story using random words or phrases.
  3. Test the output to ensure it meets the size constraint.
  4. Style the page with minimal CSS for a clean look.

Example Code

<!DOCTYPE html>
<html>
<head>
    <title>Byte-sized Story Generator</title>
    <style>
        body { font-family: Arial; text-align: center; padding: 20px; }
        #story { margin-top: 20px; font-size: 18px; }
    </style>
</head>
<body>
    <h1>Byte-sized Story Generator</h1>
    <button onclick="generateStory()">Generate Story</button>
    <div id="story"></div>

    <script>
        function generateStory() {
            const nouns = ['cat', 'moon', 'door', 'dream'];
            const verbs = ['slept', 'flew', 'danced', 'whispered'];
            const adjectives = ['silent', 'bright', 'ancient', 'whimsical'];
            const stories = [
                'The {adjective} {noun} {verb} under the {noun}.',
                'A {adjective} {noun} {verb} through the {noun}.
            ];
            
            const story = stories[Math.floor(Math.random() * stories.length)];
            const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
            const noun = nouns[Math.floor(Math.random() * nouns.length)];
            const verb = verbs[Math.floor(Math.random() * verbs.length)];
            
            const formatted = story
                .replace('{adjective}', adjective)
                .replace('{noun}', noun)
                .replace('{verb}', verb);
            
            document.getElementById('story').textContent = formatted;
        }
    </script>
</body>
</html>

## Notes

- Keep the story structure simple and varied to stay within the byte limit.
- Consider using a template engine or string interpolation for dynamic content.
- This project is great for practicing string manipulation and basic randomness in JavaScript.