Adjust the color of the text within a span element by utilizing JavaScript within a Vue.js application

Question

Adjust the color of the text within a span element by utilizing JavaScript within a Vue.js application

Looking to dynamically change the text color of employee names based on their assigned department in an uploaded roster. The goal is to color-code employees within the same department. Department names are unknown until the spreadsheet upload, but as long as colors are distinct and consistent between departments, any color will do. Colors have been defined as classes but are not currently utilized.


       .kelly-vivid-yellow { color: #FFB300; }
       .kelly-strong-purple { color: #803E75; }
       .kelly-vivid-orange { color: #FF6800; }
       .kelly-very-light-blue { color: #A6BDD7; }
       .kelly-vivid-red { color: #C10020; }
       .kelly-grayish-yellow { color: #CEA262; }
       .kelly-medium-gray { color: #817066; }  
        plus others.

Possible Department Names:


      Admin
      Grounds
      Management
      Staff
      etc

or


    Department One
    Department Two
    Department Three
    etc

Or any other variations.

Considering adding colors to an array like:


    kellyColors = ["#FFB300;","#803E75;","#FF6800;","#A6BDD7;" etc]

Then assign colors to departments using arrays and positions:


       departments = ["Admin","Grounds","Management","Staff"]

       let Admin = kellyColor[0];    
       let Grounds = kellyColor[1];  
        etc

Struggling with changing color attributes in a span element used for regex replacement in a JavaScript function>


             this.pubmedData[index]["publication"] = this.pubmedData[index] 
             ["publication"].replace(new RegExp(Employee_Name), match => {
              return  '<span  style="color:#803E75;"><b>' + match + '</b></span>';             
              });

All suggestions welcome!

FYI-- `this.pubmedData[index]["publication"]` holds information where employee names need to be colored. Example:


       John Smith and Bob Jones had Friday off.

The task is to color code employee names based on their department affiliation.

javascript html css vue.js

Answer 1

Answer №1

In my opinion, a simple way to approach this would be utilizing the HSL color model to dynamically generate N colors and evenly space them out.

With the hue ranging from 0 to 360 degrees (where 0 and 360 are essentially the same), each department could have a calculated hue as follows:

departmentIndex * 360 / departmentsLength

For example, with two departments, you'd have hues 0 and 180. With three departments, hues would be 0, 120, and 240, and so on.

(To avoid division by zero, you could default departmentsLength to 1).

Here's a basic example, using 60% saturation and 40% luminosity:

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        departments: ['sales', 'marketing'],
        newDepartmentName: '',
      }
    },
    methods: {
      addDepartment() {
        if (this.newDepartmentName) {
          this.departments.push(this.newDepartmentName);
        }
        this.newDepartmentName = '';
      },
      colorStyle(deptIndex) {
        return `color:hsl(${this.hueStep*deptIndex} ,60%,40%);`;
      }
    },
    computed: {
      hueStep() {
        return 360 / (this.departments.length || 1);
      },

      filter: function() {
        return this.tarimas.filter(
          tarima => String(tarima.trabajo)
          .includes(this.filtrarTarima)
        );
      }
    }
  });

};

#app {
  padding: 0.5em;
}

#app>div {
  margin: 0.2em;
  border:0.5px solid #eee;
}
#app>div b {
  float:left;
  min-width:60%;
}

#app input {
  border-radius: 3px;
  margin: 0.2em 0;
  padding: 0.4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model="newDepartmentName">
  <button v-on:click='addDepartment'>add Department</button>
  <div v-for="(department,index) of departments" :key="index" :style="colorStyle(index)">
    <b>{{ department}}'s style</b> <small>{{colorStyle(index)}}</small>
  </div>
</div>

You can use the input field and button to add extra departments like human resources or accounting. Each additional department will impact the computed color for the entire array, except the first one that remains at zero hue.

If you're looking for a more advanced example, there are color generators available (e.g. Colorbrewer, d3 diverging scales) that can enhance interaction and customization, though it may extend beyond the scope of this question.

Answer 2

In my opinion, a simple way to approach this would be utilizing the HSL color model to dynamically generate N colors and evenly space them out.

With the hue ranging from 0 to 360 degrees (where 0 and 360 are essentially the same), each department could have a calculated hue as follows:

departmentIndex * 360 / departmentsLength

For example, with two departments, you'd have hues 0 and 180. With three departments, hues would be 0, 120, and 240, and so on.

(To avoid division by zero, you could default departmentsLength to 1).

Here's a basic example, using 60% saturation and 40% luminosity:

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        departments: ['sales', 'marketing'],
        newDepartmentName: '',
      }
    },
    methods: {
      addDepartment() {
        if (this.newDepartmentName) {
          this.departments.push(this.newDepartmentName);
        }
        this.newDepartmentName = '';
      },
      colorStyle(deptIndex) {
        return `color:hsl(${this.hueStep*deptIndex} ,60%,40%);`;
      }
    },
    computed: {
      hueStep() {
        return 360 / (this.departments.length || 1);
      },

      filter: function() {
        return this.tarimas.filter(
          tarima => String(tarima.trabajo)
          .includes(this.filtrarTarima)
        );
      }
    }
  });

};

#app {
  padding: 0.5em;
}

#app>div {
  margin: 0.2em;
  border:0.5px solid #eee;
}
#app>div b {
  float:left;
  min-width:60%;
}

#app input {
  border-radius: 3px;
  margin: 0.2em 0;
  padding: 0.4em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model="newDepartmentName">
  <button v-on:click='addDepartment'>add Department</button>
  <div v-for="(department,index) of departments" :key="index" :style="colorStyle(index)">
    <b>{{ department}}'s style</b> <small>{{colorStyle(index)}}</small>
  </div>
</div>

You can use the input field and button to add extra departments like human resources or accounting. Each additional department will impact the computed color for the entire array, except the first one that remains at zero hue.

If you're looking for a more advanced example, there are color generators available (e.g. Colorbrewer, d3 diverging scales) that can enhance interaction and customization, though it may extend beyond the scope of this question.

Answer 3

Answer №2

Using department names as simple CSS classes is a convenient approach.

.department1{
color:#ff
}

You can retrieve the employee's department and assign it to the class attribute.

If we had the actual data, you could search for the department value in

this.pubmedData[index]["publication"][department] // Example

Then update the class attribute accordingly.

 return  '<span  class="'+ department +'"><b>' + match + '</b></span>';

Answer 4

Using department names as simple CSS classes is a convenient approach.

.department1{
color:#ff
}

You can retrieve the employee's department and assign it to the class attribute.

If we had the actual data, you could search for the department value in

this.pubmedData[index]["publication"][department] // Example

Then update the class attribute accordingly.

 return  '<span  class="'+ department +'"><b>' + match + '</b></span>';

Adjust the color of the text within a span element by utilizing JavaScript within a Vue.js application

Answer №1

Answer №2

Similar questions

Submitting values using the serialize method and Ajax involves sending placeholders

Scraping content using xpath in a complex html layout

Once a button has been clicked, it is not possible to disable another button

Click the "Add" button to dynamically generate textboxes and copy the contents from each

Displaying a distinct component depending on a specific condition within an iteration

Correctly define the vm function within the Controller As scope

Creating an online store checkout system with JavaScript?

[Vue alert]: Issue with rendering: "Sorry, unable to read property 'correct_answer' as it is undefined"

Pressing the button updates the value in the input field, but the input field continues to

Creating a table in React using an object with nested objects

Incorporating chart.js into a current Django page: a step-by-step guide

Sequelize Authentication is unable to finalize

Angular4 does not correctly collapse the Bootstrap 4 Navbar

Is it possible and advisable to compress the css within an email?

Include numerous values within a hyperlink

The websocket server implemented in Node.js with the use of the "ws" library is exhibiting a peculiar behavior where it disconnects clients at random intervals,

What is the best way to implement external routes.js files in order to avoid defining all routes within app.js?

What could be causing my second ajax call to render the page unresponsive?

Does Vetur have additional undefined types in the type inference of deconstructed props?

Insert a line break element following every 12th character within a given string