Category: JavaScript Answers

Categories
Express JavaScript Answers

How to Get Query String Variables in Express.js on Node.js?

To get query string variables in Express.js on Node.js, we can use the req.query property.

For instance, we can write:

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

app.get('/', (req, res) => {
  res.json(req.query)
})

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

to return the req.query object as the response in the / route.

Then when we add ?foo=bar at the of the URL as the query string, we should see:

{
  "foo": "bar"
}

returned as the response.

Categories
JavaScript Answers

How to Invert the Colors of an Image in CSS or JavaScript?

short-coated white and beige puppy on the floor

To invert the colors of an image in CSS, we can use the filter CSS property.

To invert the colors of an image in JavaScript, we can set the style.filter property of the element to the same value.

For instance, we can write:

<img src="https://picsum.photos/200/300">

to add an image.

Then we can invert the colors of the image with the following CSS:

img {  
  -webkit-filter: invert(1);  
  filter: invert(1);  
}

We just set the -webkit-filter and filter properties to invert(1) to invert the colors of the image.

To do the same thing with JavaScript, we write:

document.querySelector("img").style.filter = "invert(1)";

Conclusion

To invert the colors of an image in CSS, we can use the filter CSS property.

To invert the colors of an image in JavaScript, we can set the style.filter property of the element to the same value.

Categories
JavaScript Answers jQuery

How to Handle Tab Key Presses in a Text Area with jQuery?

black short coated dog on persons hand

To handle tab key presses in a text area with jQuery, we can detect when the tab key is pressed in the text area.

Then if it’s pressed, we can call e.preventDefault on it to prevent the default behavior.

For instance, if we have the following text area:

<textarea></textarea>

Then we can listen to the keydown event to listen for tab key presses:

$("textarea").keydown((e) => {
  if (e.keyCode === 9) {
    const start = e.target.selectionStart;
    const end = e.target.selectionEnd;
    const $this = $(e.target);
    const value = $this.val();
    $this.val(`${value.substring(0, start)}\t${value.substring(end)}`);
    $this.selectionStart = $this.selectionEnd = start + 1;
    e.preventDefault();
  }
});

We get the text area with $(“textarea”) .

Then we call keydown to listen to the keydown event.

We pass in a callback to the keydown method.

In the callback, we check e.keyCode to check if it’s 9 to see if we pressed on tab or not.

If it’s true , then we pressed on tab.

In the if block, we get the start and end of the text selection with:

const start = e.target.selectionStart;
const end = e.target.selectionEnd;

Then assign the textarea element to $this with:

const $this = $(e.target);

We get the input value wit:

const value = $this.val();

And then we update the value of the text area by writing:

$this.val(`${value.substring(0, start)}t${value.substring(end)}`);

to insert a tab at the position where the selection is made.

Finally, we set the selection range with:

$this.selectionStart = $this.selectionEnd = start + 1;

to move the cursor to the end.

And finally, we call e.preventDefault to stop the default behavior, which is to move focus away from the text area.

Categories
JavaScript Answers jQuery

How to Disable Right-Click on Images Using jQuery?

yellow Labrador retriever lying on sofa

To disable right-click on images using jQuery, we can listen to the contextmenu event on the image element.

Then in the event handler callback, we can return false to prevent right-clicks on images.

For instance, if we have the following image:

<img src='https://picsum.photos/200/300'>

Then we can write:

$('img').bind('contextmenu', (e) => {  
  return false;  
});

to get all image elements with $(‘img’) .

Then we call bind with 'contextmenu' to listen to the contextmenu event.

And in the event handler callback, we return false .

Now when we right-click on the image, we shouldn’t see any context menu displayed.

Categories
JavaScript Answers

How to Draw Rotated Text on an HTML5 Canvas?

red and white happy birthday card

To draw rotated text on an HTML5 canvas, we can use the canvas context’s rotate method to rotate the contents.

For instance, we can write the following HTML to create the canvas:

<canvas style='width: 300px; height: 200px'></canvas>

Then we write:

const canvas = document.querySelector("canvas");  
const ctx = canvas.getContext("2d");  
ctx.rotate(Math.PI / 4);  
ctx.font = "30px Arial";  
ctx.fillText("Hello World", 50, 0);

to create the canvas content.

We get the canvas element with document.querySelector .

Then we get the context with canvas.getContext .

Next, we call rotate with the angle to rotate in radians.

Then we set the font to draw the text by assigning a value to the font property.

Finally, we call fillText to draw the text with the given string and x and y coordinates of the top left corner.