{"id":18455472,"url":"https://github.com/danielhaim1/randomutil","last_synced_at":"2026-02-14T12:02:06.692Z","repository":{"id":216168580,"uuid":"740620158","full_name":"danielhaim1/RandomUtil","owner":"danielhaim1","description":"An NPM package for easily populating DOM elements with random data, perfect for testing and prototyping web interfaces. Supports various data types including text, images, and dates.","archived":false,"fork":false,"pushed_at":"2025-02-12T12:44:49.000Z","size":852,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-25T11:47:48.387Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danielhaim1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-01-08T18:04:04.000Z","updated_at":"2025-01-16T12:05:01.000Z","dependencies_parsed_at":"2024-01-17T15:38:02.122Z","dependency_job_id":"315e2250-7e75-42c0-85e6-dcf6e4739f16","html_url":"https://github.com/danielhaim1/RandomUtil","commit_stats":null,"previous_names":["danielhaim1/randomutil"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/danielhaim1/RandomUtil","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2FRandomUtil","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2FRandomUtil/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2FRandomUtil/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2FRandomUtil/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danielhaim1","download_url":"https://codeload.github.com/danielhaim1/RandomUtil/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielhaim1%2FRandomUtil/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29443468,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-14T10:51:12.367Z","status":"ssl_error","status_checked_at":"2026-02-14T10:50:52.088Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T08:08:08.247Z","updated_at":"2026-02-14T12:02:06.672Z","avatar_url":"https://github.com/danielhaim1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"RandomUtil\n==========\n\n[![npm version](https://img.shields.io/npm/v/@danielhaim/randomutil)](https://www.npmjs.com/package/@danielhaim/randomutil)\n[![Downloads](https://img.shields.io/npm/dt/@danielhaim/randomutil.svg)](https://www.npmjs.com/package/@danielhaim/randomutil)\n![GitHub](https://img.shields.io/github/license/danielhaim1/randomutil)\n\nOverview\n--------\n\nThe `RandomUtil` module, accessible as an NPM package in both `amd` and `commonjs` configurations, expedites the prototyping of web interfaces. It adeptly fills `DOM` elements with a variety of random content. The module's versatility extends to numerous data types, encompassing text (encompassing titles, tags, and excerpts), images, tailored dates, and SVG-crafted avatars.\n\n[CodePen Demo](https://codepen.io/danielhaim/pen/BabKOBK/ef5e3e519c58b082797b3fc6b1b744c0)\n\nAPI Documentation\n--------------------\n\nTo initiate, install `RandomUtil` using NPM:\n\n```shell\nnpm i @danielhaim/randomutil\n```\n\n### Module Example ###\n\n```js\nimport RandomUtil from \"@danielhaim/randomutil\";\n\nconst randomContentManager = new RandomUtil.RandomContentManager(1);\nconst randomUtilController = new RandomUtil.RandomUtilController();\n\n// Content Generation\nrandomController.randomTag(randomContent.randomTags);\nrandomController.randomTitle(randomContent.randomTitles);\nrandomController.randomExcerpt(randomContent.randomExcerpts);\n\n// Date \u0026 Time Generation\nrandomController.randomReadTime();\nrandomController.randomDate(\"Y/m/d\");\n\nconst UNSPLASH_ACCESS_KEY = \"YOUR_UNSPLASH_ACCESS_KEY\"; \n// Register API: [Unsplash API](https://unsplash.com/documentation#getting-started)\n// Alternatively, you can use the `.env` file.\n\nconst imageCount = document.querySelectorAll(\"[data-random='img']\").length;\n\n// Image Generation\nrandomUtilController.randomImages({\n  count: imageCount,\n  query: \"nature\",\n  orientation: \"portrait\",\n  accessKey: UNSPLASH_ACCESS_KEY\n});\n\n// Avatar Generation\nrandomUtilController.randomAvatar({ \n  options: { \n    variant: \"default\" // Options: ['pixel', 'abstract', 'smile']\n  } \n});\n```\n\n### Browser Example ###\n\n```html\n\u003cscript src=\"./path/to/dist/randomutil.amd.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nconst randomContent = new window.RandomUtil.RandomContentManager(1);\nconst randomController = new window.RandomUtil.RandomUtilController();\n// ...\n\u003c/script\u003e\n```\n\n### `RandomContentManager()` ###\n\n1. The `RandomContentManager()` manages content distribution from a set of five arrays, while `RandomUtil.Controller()` handles the distribution of this content. Each array focuses on distinct themes\n    1. `Array 1`: Wildlife preservation and conservation content.\n    2. `Array 2`: Global explorations and adventures.\n    3. `Array 3`: Technology and innovation topics.\n    4. `Array 4`: Fashion and beauty-related content.\n    5. `Array 5`: Creative and advertising materials.\n\n```js\n// Initialize a RandomContentManager for Array 3 (Technology and Innovation)\nconst randomContent = new RandomContentManager(3);\n\n// Initialize RandomUtil.Controller for content distribution\nconst randomController = new RandomUtil.Controller();\n\n// Generate and populate elements with content:\nrandomController.generateTag(randomContentManager.tags); // For `[data-random=\"tag\"]` elements\nrandomController.generateTitle(randomContentManager.titles); // For `[data-random=\"title\"]` elements\nrandomController.generateExcerpt(randomContentManager.excerpts); // For `[data-random=\"excerpt\"]` elements\n```\n\n### `RandomUtil.Controller()` ###\n  \nThe `RandomUtil.Controller()` is in charge of content distribution and offers several methods to target specific `DOM` elements:\n\n| Method                              | Target Element                  | Output                                      |\n|-------------------------------------|---------------------------------|---------------------------------------------|\n| `randomTitles(titles)`              | `[data-random=\"title\"]`         | Randomly selects and populates title elements. |\n| `randomTags(tags)`                  | `[data-random=\"tag\"]`           | Assigns random tags to elements.             |\n| `randomExcerpts(excerpts)`          | `[data-random=\"excerpt\"]`       | Fills elements with random excerpts.         |\n| `randomReadTime(text = 'min read')` | `[data-random=\"read-time\"]`     | Generates read time content (e.g., \"8 min read\"). |\n| `randomDate(format)`                | `[data-random=\"date\"]`          | Provides random dates in the specified format (default: `M j, Y`, e.g., Dec 21, 2019). |\n| `randomDate`                        | `[data-random-date=\"l, F jS, Y\"]` | Custom date format support (e.g., \"Saturday, December 21st, 2019\"). |\n| `randomColors({ options })`          | `[data-random=\"color\"]`       | Adds custom CSS variables with hex, rgb.         |\n| `randomImages({ count, query, orientation, accessKey })` | `[data-random=\"img\"]` | Fetches random images (requires Unsplash API Key). |\n| `randomImages({})`                 | `[data-random-img=\"person, face\"]` | Advanced image querying for specific elements. |\n| `randomAvatar({ avatarOptions })`   | `[data-random=\"avatar\"]`        | Provides random avatars with options like 'pixel', 'smile', or 'abstract'. |\n| `randomAvatar({ avatarOptions })`   | `[data-random-avatar=\"pixel\"]`  | More advanced avatar customization.          |\n\n```js\n// Initialize a RandomContentManager for Array 1 (Wildlife preservation and conservation content)\nconst randomContent = new RandomContentManager(1);\n\n// Initialize RandomUtil.Controller for content distribution\nconst randomController = new RandomUtil.Controller();\nrandomController.randomTag(randomContent.randomTags); // For `[data-random=\"tag\"]` elements\nrandomController.randomTitle(randomContent.randomTitles); // For `[data-random=\"title\"]` elements\nrandomController.randomExcerpt(randomContent.randomExcerpts); // For `[data-random=\"excerpt\"]` elements\nrandomController.randomReadTime(); // For `[data-random=\"time\"]` elements\n\nrandomController.randomDate(\"Y/m/d\"); // For `[data-random=\"date\"]` or `[data-random-date]` elements\n\n// For `[data-random=\"img\"]` and `[data-random-img]` elements\nconst randomImageCount = document.querySelectorAll(\"[data-random='img']\").length;\nrandomController.randomImages({ \n    count: randomImageCount, // for caching the API\n    query: \"nature\",\n    orientation: \"portrait\",\n    accessKey: UNSPLASH_ACCESS_KEY \n});\n\n// For `[data-random=\"avatar\"]` and `[data-random-avatar]` elements\nrandomController.randomAvatar({ \n    avatarOptions: { \n      colors: [\"#FF5733\", \"#33FF57\", \"#5733FF\"], // Optional color set\n      variant: \"default\"\n    }\n});\n```\n\n### `randomColor({ options });` ###\n\nDynamically apply a random color to elements specified by the `[data-random=\"color\"]` attribute. It allows for selecting colors from a predefined palette or a custom set of colors, further offering the ability to customize the CSS variable names used for the RGB and hex color values.\n\n```js\nconst randomController = new RandomUtil.Controller();\n\n// Default usage with predefined palette\nrandomController.randomColor();\n\n// Using a custom set of colors\nrandomController.randomColor({\n    customColors: [\n        \"#405de6\",\n        \"#5851db\",\n        \"#833ab4\",\n    ]\n});\n\n// Customizing the CSS variable names\nrandomController.randomColor({\n    varName: 'primary', // Prefix for the CSS variables (--primary-rgb, --primary-hex)\n    customColors: [\n        \"#405de6\",\n        \"#5851db\",\n        \"#833ab4\",\n        \"#c13584\"\n    ]\n});\n```\n\n### `randomDate()` ###\n\nThe `randomDate()` method is designed to populate elements with `[data-random=\"date\"]` and `[data-random-date=\"\"]` attributes. Utilizing the `[data-random-date]` attribute, you gain access to more specific date formats, such as `l, F jS, Y`, which results in a formatted date like \"Saturday, December 21st, 2019.\" This flexibility allows you to tailor the date presentation to your specific needs.\n\n| **Category** | **Format** | **Description** | **Example** |\n|---|---|---|---|\n| Day of Month |\n| d | Numeric, with leading zeros | 01–31 | 01–31 |\n| j | Numeric, without leading zeros | 1–31 | 1–31 |\n| S | The English suffix for the day of the month | st, nd or th in the 1st, 2nd or 15th | st, nd or th in the 1st, 2nd or 15th |\n| Weekday |\n| l | Full name (lowercase ‘L’) | Sunday – Saturday | Sunday – Saturday |\n| D | Three letter name | Mon – Sun | Mon – Sun |\n| Month |\n| m | Numeric, with leading zeros | 01–12 | 01–12 |\n| n | Numeric, without leading zeros | 1–12 | 1–12 |\n| F | Textual full | January – December | January – December |\n| M | Textual three letters | Jan – Dec | Jan – Dec |\n| Year |\n| Y | Numeric, 4 digits | Eg., 1999, 2003 | Eg., 1999, 2003 |\n| y | Numeric, 2 digits | Eg., 99, 03 | Eg., 99, 03 |\n| Time |\n| a | Lowercase | am, pm | am, pm |\n| A | Uppercase | AM, PM | AM, PM |\n| g | Hour, 12-hour, without leading zeros | 1–12 | 1–12 |\n| h | Hour, 12-hour, with leading zeros | 01–12 | 01–12 |\n| G | Hour, 24-hour, without leading zeros | 0-23 | 0-23 |\n| H | Hour, 24-hour, with leading zeros | 00-23 | 00-23 |\n| i | Minutes, with leading zeros | 00-59 | 00-59 |\n| s | Seconds, with leading zeros | 00-59 | 00-59 |\n| T | Timezone abbreviation | Eg., EST, MDT … | Eg., EST, MDT … |\n| Full Date/Time |\n| c | ISO 8601 | 2004-02-12T15:19:21+00:00 | 2004-02-12T15:19:21+00:00 |\n| r | RFC 2822 | Thu, 21 Dec | Thu, 21 Dec |\n| U | Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT) | 1577836800 | 1577836800 |\n| M jS, Y | Custom | Dec 21st, 2019 | Dec 21st, 2019 |\n| l, F jS, Y | Custom | Saturday, December 21st, 2019 | Saturday, December 21st, 2019 |\n\n```js\n// Initialize RandomUtil.Controller for content distribution\nconst randomController = new RandomUtil.Controller();\nrandomController.randomDate(\"Y/m/d\");\n```\n\n```html\n\u003c!-- Input --\u003e\n\u003cspan data-random=\"date\"\u003e\u003c/span\u003e\n\u003cspan data-random-date=\"M jS, Y\"\u003e\u003c/span\u003e\n\n\u003c!-- Output --\u003e\n\u003cspan\u003e2019/01/21\u003c/span\u003e\n\u003cspan\u003eDec 21st, 2019\u003c/span\u003e\n```\n\n### `randomImages()` ###\n\nThis method allows you to fetch images from the Unsplash API. To get started, you can register an Unsplash Application and grab your access key [here](https://unsplash.com/oauth/applications).\n\n1. The `randomImages({ count, query, orientation, accessKey })` constructor:\n  1. `count` (Optional): Number of images to fetch. Default is 12.\n  2. `query` (Optional): The category of images. Default is \"nature\".\n  3. `orientation` (Optional): The orientation of the images. Default is \"landscape\".\n  4. `accessKey` (Optional): Your Unsplash API key. If not provided, it will default to process.env.UNSPLASH_ACCESS_KEY.\n\n```js\nconst UNSPLASH_ACCESS_KEY = 'your-api-key';\n\nconst randomController = new RandomUtil.Controller();\nconst randomImageCount = document.querySelectorAll(\"[data-random='img']\").length;\n\nrandomController.randomImages({ \n    count: randomImageCount, // for caching the API\n    query: \"nature\",\n    orientation: \"portrait\",\n    accessKey: UNSPLASH_ACCESS_KEY \n});\n```\n\n```html\n\u003cimg data-random=\"img\" /\u003e\n\u003cimg data-random=\"img\" data-random-img=\"person, face\" /\u003e\n\u003cimg data-random=\"img\" data-random-img=\"school bus\" /\u003e\n```\n\n### `randomAvatar({})` ###\n\nThe `randomAvatar` method offers the functionality to create diverse and customizable avatars. This implementation draws inspiration from a modified version of [Boring Avatars](https://github.com/boringdesigners/boring-avatars) in vanilla JavaScript.\n\n```js\nconst randomController = new RandomUtil.Controller();\n\nrandomController.randomAvatar({ \n    avatarOptions: { \n      colors: [\"#FF5733\", \"#33FF57\", \"#5733FF\"],\n      variant: \"default\" // [\"smile\", \"pixel\", \"abstract\"]\n    }\n});\n```\n\nLicense\n-------\n\nThis software is released under the [MIT License](LICENSE)\n\nReport Issues or Request a Feature\n----------------------------------\n\nIf you encounter any issues or have suggestions for improvements, please feel free to report them. Your feedback is invaluable in enhancing this software.\n\nFolder Structure\n----------------\n\nHere's an overview of the project's folder structure:\n\n```bash\n.\n├── .env\n├── .gitattributes\n├── .gitignore\n├── .nvmrc\n├── LICENSE\n├── README.md\n├── __test__\n│   └── randomutil.amd.test.js\n├── babel.config.js\n├── demo\n│   ├── demo.css\n│   ├── demo.js\n│   └── index.html\n├── dist\n│   ├── randomutil.amd.js\n│   └── randomutil.module.js\n├── index.js\n├── jest.config.js\n├── package-lock.json\n├── package.json\n├── sets\n│   └── palette.json\n├── src\n│   ├── index.js\n│   ├── util.avatar.js\n│   ├── util.content.js\n│   ├── util.date.js\n│   └── util.image.js\n└── webpack.config.js\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielhaim1%2Frandomutil","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielhaim1%2Frandomutil","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielhaim1%2Frandomutil/lists"}