🎲 Random Integers Saga
Generating and characterizing random numbers is a 'bread and butter' process in computer science. We wanted to show the evolution of this process through various stages of development, culminating with an AI-suggested 'refactored' version of the last version we wrote.
The Saga:
| Stage | Description |
|---|---|
| Stage ½ | Using the DOM, we targeted an element in the web page (an 'object') and filled it with a value created by the JavaScript Math.random() function. Be sure to see the breadcrumbs in the console! |
| Stage 0 | A basic functional button that generates a random integer within a specified range when clicked, but only in the console. 'Breadcrumbs' show the process logic. |
| Stage 1 | As integers are generated, they are added to an unordered list, courtesy of 'the DOM.' It's not pretty, but it works, but boy does that list get long! |
| Stage 2 | An enhanced version that displays the generated random integers in a styled list format, along with the range of numbers being generated. |
| Stage 3 | A more advanced version that not only generates random integers but also tracks their frequency and displays this data in a table. |
| Stage 3 AI‑Upgrade | A refactored version of Stage 3, incorporating modern web development best practices suggested by an AI assistant (Claude Sonnet 4.5). An AI-Generated chatlog outlines the improvements. |
| Stage 4 AI‑Upgrade | A refactored version of the Stage 3 upgrade, where the user can specify how many random integers they want to generate with each button click using a select menu. |
| Stage 5 AI‑Upgrade | A refactored version of Stage 4 with the ability to copy the generated random integers to the clipboard and clear the list and data table |
| Stage 6 AI‑Upgrade | A refactored version of Stage 5 with the ability to select the maximum value for the random integers generated, and the identification and placement of the longest string of consecutive identical integers. |
Each stage builds upon the previous one, showcasing the evolution of the application from a simple console-based tool to a more sophisticated web application with enhanced user experience and data visualization. The ideas in this saga led to the development of our Rock, Paper, Scissors Game.