Associate text with a color from a predetermined list (JavaScript)

As I work on adding tags to my website for blog posts, I have a specific vision in mind. Each tag should be assigned a unique background color selected from a predefined array of theme colors.

My goal is to assign the same background color to tags with identical string values. For example, a tag labeled "educational" should share the same background color as another tag with the label "educational", but may differ from a tag with the label "technology".

Given the following theme:

const COLORS = ['pink', 'purple', 'indigo', 'blue', 'orange', 'red', 'yellow', 'black', 'whitesmoke']

I am seeking guidance on how to develop a function that can hash the string (rather than using just string length and Math.random) to randomly select a color from the COLORS array by calling a simple function like stringToColor(tagName).

While I understand that there might be instances where tags end up having the same color, I am aiming for randomness as much as possible.

javascriptstringtypescriptcolors

Answer №1

If you want to generate a hash for tags, you can do so by converting each character of the string into ASCII code using the charCodeAt method and then summing all of these numbers.

const generateHash = (string) => string
  .split('')
  .map((char) => char.charCodeAt(0))
  .reduce((a, b) => a + b, 0)

You can then use this generated hash number as an index to access elements from an array. This way, you will always get the same element when passing the same word's hash.

const generateColor = (string) => COLORS[generateHash(string) % COLORS.length];

The modulo operator ensures that the hash number is converted to an index within the range of 0 to the length of the COLORS array.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The rendering of graphs in FusionCharts is experiencing delays particularly in Internet Explorer, with Chrome performing more efficiently in comparison

I am currently utilizing FusionCharts to generate and display graphs. My requirement is to load over 60 graphs on a single page. Upon testing the page loading in Internet Explorer 11, it is taking approximately 5 minutes. However, when using Google Chrom ...

javascriptajaxjspfusioncharts

Troubleshooting: Issues with Jquery's has, find, contains functions

As I check whether an element contains another element, I've previously utilized the jquery element.has(secondElement) function. In my angularjs project, I make use of jquery within a directive where I transclude elements through markup using ng-tran ...

javascriptjqueryangularjs

Struggling to link an external JavaScript file to your HTML document?

While attempting to run a firebase app locally, I encountered an error in the chrome console: GET http://localhost:5000/behaviors/signup.js net::ERR_ABORTED 404 (Not Found) Do I need to set firebase.json source and destination under rewrites or add a rout ...

javascriptnode.jshtmlfirebaseexpress

EJS failing to render HTML within script tags

Here is some code that I'm working with: <% // accessing content from a cdn api cloudinary.api.resources( { type: 'upload', prefix: '' }, (error, result) => { const assets = result.r ...

javascriptnode.jsexpressejs

How can I create a jumping animation effect for my <li> element in JQuery?

I have a horizontal navigation bar with a "JOIN" option. My goal is to make the #jump item continuously jump up and down after the page has finished loading. Currently, I have this code which only triggers the jump effect once when hovering over the eleme ...

javascriptjqueryhtml

Transferring data from PHP to JavaScript using AJAX

I'm currently working on a project that involves generating random numbers on both JavaScript and PHP pages, and I need to display them on the HTML page using JavaScript. So far, I have successfully set up both pages to generate random numbers. Howev ...

javascriptphpajax

Using JavaScript to Access PHP Files

Would like to understand the process of calling a php file (test.php) from either "x:" or "y:" in the code below. var example1 = { x: ['giraffes', 'orangutans', 'monkeys'], y: [20, 14, 23], name: 'Most read', ...

javascriptphpvariables

Tips for sharing content within an iframe

Despite my efforts to find a solution, I have been unable to come across one that aligns with my specific situation. I currently have a form for inputting person data. Within this form, there is an iframe containing another form for adding relatives' ...

javascriptphpjquery

How to dynamically update the maximum y-axis value in Vue-Chart.js without having to completely re-render the entire

Currently, I am involved in a project that requires the implementation of various charts from the Vue-Chartjs library. One specific requirement is to dynamically change the maximum value on the Y-axis whenever users apply different filters. To achieve this ...

javascriptdjangovue.jsvue-chartjs

The order of items in MongoDB can be maintained when using the $in operator by integrating Async

It's common knowledge that using {$in: {_id: []}} in MongoDB doesn't maintain order. To address this issue, I am considering utilizing Async.js. Let's consider an example: const ids = [3,1,2]; // Initial ids retrieved from aggregation con ...

javascriptmongodbasync.js

RegEx in JavaScript to identify and match the innerHTML property of all elements

I am currently in the process of developing a Chrome extension that needs to identify specific pages within a website, including the Log In / Sign In page, the Sign Up / Register page, the About page, and the Contact Us page. My approach involves obtainin ...

javascriptregexgoogle-chrome-extension

The mismatch between JSON schema validation for patternProperties and properties causes confusion

Here is the JSON schema I am working with: { "title": "JSON Schema for magazine subscription", "type": "object", "properties": { "lab": { "type": "string" } }, "patternProperties": { "[A-Za-z][A-Za-z_]*[A-Za-z]": { "type" ...

javascriptjsonjsonschema

In TypeScript, both 'module' and 'define' are nowhere to be found

When I transpile my TypeScript using "-m umd" for a project that includes server, client, and shared code, I encounter an issue where the client-side code does not work in the browser. Strangely, no errors are displayed in the browser console, and breakpoi ...

javascripttypescripttypescript1.5es6-module-loaderumd

Explore Angular's ability to transform a nested observable object into a different object

My task involves mapping a field from a sub object in the response JSON to the parent object The response I receive looks like this: { "id": 1, "name": "file-1", "survey": { "identifier": 1, "displayedValue": survey-1 } } I am attempting ...

angulartypescriptrxjs

Removing a specific object from an array in Node.js

Here is the structure of my database.json file: { "opened_tickets": [ { "userid": "4", "ticketid": "customer_info", "opened_timestamp": "1662543404514" }, ...

javascriptnode.jsjsonfilenpm

What is the proper way to include type annotation in a destructured object literal when using the rest operator?

When working with objects, I utilize the spread/rest operator to destructure an object literal. Is there a way to add type annotation specifically to the rest part? I attempted to accomplish this task, but encountered an error when running tsc. const { ...

typescripttypescript2.0

What steps should I take to ensure my three.js project is compatible with iPhone testing?

I recently developed a new AR project that allows users to interact with AR content through their phone camera on a website. However, I am facing an issue where I cannot easily test my website on an iPhone whenever I make changes to the code. Currently, ...

javascripthtmlthree.js

The 'slide.bs.carousel' event in Bootstrap carousel is triggered just once

Take a look at my JavaScript code: $('#carousel-container').bind("slide.bs.carousel", function () { //reset the slideImg $('.slideImg',this).css('min-height', ''); //set the height of the slider var ...

javascriptjqueryhtmlcsstwitter-bootstrap

Attempting to retrieve exclusively the checked records in Vue.js

Currently, I am referring to this library for checkboxes. As I delve into the code, I notice how it is declared and utilized. Initially within the el-table, we have @selection-change="handleSelectionChange". They have initialized an empty array ...

javascriptvue.jsvuejs2

No issues raised by Typescript/tslint regarding this in arrow function

After making some creative adjustments, this is what I came up with: const TopBar = () => ( <Button onPress={this.onPress} // No errors shown /> ) Although all my other rules in tslint.json are functioning properly. Is there a way to ma ...

typescriptreact-nativetslint