What are some techniques for styling individual letters within a string?

Question

What are some techniques for styling individual letters within a string?

If I were to receive a summary of the latest matches for a specific team from an API, let's consider how it could be presented.

For example, the response might look like this: LLWWWWLWDWDWLW

I would like this information to be displayed in a div with a unique style.

The letter L should have a background color of red (in a square shape), while the letter W should have a green background. Each character should be slightly separated from one another.

Users should also have the option to switch to a different team to view their recent matches.

This project is being developed using Vue.js.

javascript css vue.js vuejs3 styling

Answer 1

Answer №1

Here is a simple solution using the v-for directive:

const mapColors = new Map([['W', 'green'], ['L', 'red'], ['D', 'yellow'])
const app = Vue.createApp({
  data() {
    return {
      matches: [{team: 'team 1', games: 'LLWWWWLWDWDWLW'}, {team: 'team 2', games: 'WWWWLWDLLWWWDW'}]
    };
  },
  methods: {
    setColor(c) {
      return mapColors.get(c)
    }
  }
})
app.mount('#demo')

.green {
  background: limegreen;
}
.red {
  background: lightcoral;
}
.yellow {
  background: gold;
}
.games {
  width: 1.2em;
  display: inline-block;
  text-align: center;
  margin: .1em;
}
.match {
  margin-right: .5em;
  font-weight: 600;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(match, idx) in matches" :key="idx">
    <span class="match">{{ match.team }}</span>
    <span v-for="(game, i) in match.games" :key="i">
      <span class="games" :class="setColor(game)">
        {{ game }}
      </span>
    </span>
  </div>
</div>

Answer 2

Here is a simple solution using the v-for directive:

const mapColors = new Map([['W', 'green'], ['L', 'red'], ['D', 'yellow'])
const app = Vue.createApp({
  data() {
    return {
      matches: [{team: 'team 1', games: 'LLWWWWLWDWDWLW'}, {team: 'team 2', games: 'WWWWLWDLLWWWDW'}]
    };
  },
  methods: {
    setColor(c) {
      return mapColors.get(c)
    }
  }
})
app.mount('#demo')

.green {
  background: limegreen;
}
.red {
  background: lightcoral;
}
.yellow {
  background: gold;
}
.games {
  width: 1.2em;
  display: inline-block;
  text-align: center;
  margin: .1em;
}
.match {
  margin-right: .5em;
  font-weight: 600;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(match, idx) in matches" :key="idx">
    <span class="match">{{ match.team }}</span>
    <span v-for="(game, i) in match.games" :key="i">
      <span class="games" :class="setColor(game)">
        {{ game }}
      </span>
    </span>
  </div>
</div>

What are some techniques for styling individual letters within a string?

Answer №1

Similar questions

Angular collapsible panels and floating pop-up windows

Struggle JS/jQuery conflict

What causes images to be omitted from a PDF file when using mywindow.print()?

What is the method for identifying modules that rely on a specific module?

Ensure that the second y-axis in charts.js consistently shows the 100% tick

Positioning text too far to the left causes it to become disorganized and difficult

Tips on handling jsonp responses in CakePHP without using the .json extension

Unable to access request body data from API - value not defined

Tips for utilizing the find function with nested documents in MongoDB in conjunction with Next.js?

Running time assessment for JavaScript executions

Struggling to send a POST request to my API using AJAX and jQuery

Removing a style attribute by adding a new class

How can you prevent an element from overflowing when employing window.pageYOffset and using a switch case to alter the background color at specified pixel thresholds?

Preventing CSS shapes from overlapping with the next DIV

Display or conceal the grid template row for content that is empty or if the grid area is not displaying

What is preventing this.form.post(URI) from accessing all API resource routes, beyond just one specific route?

Is there a way to show a progress bar that functions as the background for a table row

Creating a custom JavaScript clock based on stored database values

A guide on updating a boolean field in the database using ajax

React Router is updating the URL without actually rendering the view