Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
HTML

How to change the selected option background-color CSS style?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to change the selected option background-color CSS style.

In this article, we’ll look at how to change the selected option background-color CSS style.

How to change the selected option background-color CSS style?

To change the selected option background-color CSS style, we can set the style attribute of the select and option elements.

For instance, we write:

<select style="background: #009966; color: #FFF;">
  <option value='0' style="background: white; color: black;">Protect my email</option>
  <option value='1' style="background: white; color: black;">Show email on advert</option>
</select>

to set the whole select element to background color 009966 and color FFF.

Then we override the the styles in the option elements with style="background: white; color: black;".

As a result, we see that the selected item has a green background and white text and the options have black text and a white background.

Conclusion

To change the selected option background-color CSS style, we can set the style attribute of the select and option elements.

Categories
JavaScript Answers Nodejs

How to call a web service using Node.js and JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to call a web service using Node.js and JavaScript.

In this article, we’ll look at how to call a web service using Node.js and JavaScript.

How to call a web service using Node.js and JavaScript?

To call a web service using Node.js and JavaScript, we can use Axios.

To install it, we run:

npm i axios

Then we can use it by writing:

const axios = require('axios')

const get = async () => {
  const { data } = await axios.get('https://google.com')
  console.log(data)
}
get()

We call axios.get to make a GET request to https://google.com.

And we get the response from data.

Conclusion

To call a web service using Node.js and JavaScript, we can use Axios.

Categories
JavaScript Answers

How to detect browser TLS compatibility with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to detect browser TLS compatibility with JavaScript

In this article, we’ll look at how to detect browser TLS compatibility with JavaScript.

How to detect browser TLS compatibility with JavaScript?

To detect browser TLS compatibility with JavaScript, we can use How’s my SSL.

For instance, we write:

(async () => {
  const res = await fetch(`https://api.allorigins.win/get?url=${encodeURIComponent('http://www.howsmyssl.com/a/check')}`)
  const {
    contents
  } = await res.json()
  const data = JSON.parse(contents)
  const [versionName, versionNum] = data.tls_version.split(' ');
  if (versionName !== 'TLS' || versionNum < 1.2) {
    console.log('not secure')
  } else {
    console.log('secure')
  }
  console.log(data);
})()

We make a GET request to http://www.howsmyssl.com/a/check with fetch.

It doesn’t support CORS, so we’ve to use a CORS proxy to make a request to it.

Next, we get the versionName and versionNum from the data.

If versionName is 'TLS' and versioNum is 1.2 or bigger, then our browser is secure.

Conclusion

To detect browser TLS compatibility with JavaScript, we can use How’s my SSL.

Categories
JavaScript Answers

How to change X and Y axis font color with Chart.js 3 and JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to change X and Y axis font color with Chart.js 3 and JavaScript.

In this article, we’ll look at how to change X and Y axis font color with Chart.js 3 and JavaScript.

How to change X and Y axis font color with Chart.js 3 and JavaScript?

To change X and Y axis font color with Chart.js 3 and JavaScript, we can set the options.scales property.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>

to add the Chart.js script and canvas.

Then we write:

const ctx = document.getElementById('myChart');

const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      fill: true,
      borderWidth: 1,
    }]
  },
  options: {
    scales: {
      x: {
        ticks: {
          color: 'green'
        }
      },
      y: {
        ticks: {
          color: 'red'
        }
      }
    }
  }
});

We select the canvas with document.getElementById.

Then we set the options.scales.x.ticks.color and options.scales.y.ticks.color properties to set the color of the x and y axis labels respectively.

As a result, we should see the the x-axis labels are green and y-axis labels are red.

Conclusion

To change X and Y axis font color with Chart.js 3 and JavaScript, we can set the options.scales property.

Categories
Express JavaScript Answers Nodejs

How to render an error message when page is not found with Node.js and Express?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to render an error message when page is not found with Node.js and Express.

In this article, we’ll look at how to render an error message when page is not found with Node.js and Express.

How to render an error message when page is not found with Node.js and Express?

To render an error message when page is not found with Node.js and Express, we can add a middleware after all the route middlewares are added.

For instance, we write:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.use((req, res, next) => {
  res.send('not found', 404);
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

We add a route with:

app.get('/', (req, res) => {
  res.send('Hello World!')
})

Then we add:

app.use((req, res, next) => {
  res.send('not found', 404);
});

which returns a 404 error for routes other than /.

We call app.use to add any middleware that are used app-wide.

Conclusion

To render an error message when page is not found with Node.js and Express, we can add a middleware after all the route middlewares are added.