
Get the current position of the mouse from a JavaScript event
24/05/2020Lets look at how to get the current clientX and clientY position of the mouse pointer from a JavaScript 'mousemove' event.
String interpolation is fancy ‘programmer’ talk for injecting variables into strings. Most programming languages have a way of doing this and we are going to have a look at JavaScript and Sass/scss in this post.
In JavaScript you are probably used to seeing strings handled like:
const variable1 = 'hello';
const variable2 = 'world';
console.log(variable1 + " " + variable2); // Output: 'hello world'
In ES6 we can use interpolation to make the code more human readable. The above example becomes something like this:
console.log(`${variable1} ${variable2}`); // Output: 'hello world'
Sass is no different to this and it actually becomes fundamental to use interpolation if we want to work with CSS variables.
body {
background-color: var(--some-css-variable, blue);
}
$colour: #fff;
body {
--some-css-variable: #{$colour};
}
This works in the same way if we want to use Sass variables inside of strings:
$themeColour: "red";
body {
background-color: blue;
&[theme="#{$themeColour}"] {
background-color: red;
}
}
Lets look at how to get the current clientX and clientY position of the mouse pointer from a JavaScript 'mousemove' event.
Find out whether a JavaScript array contains single or multiple values by passing an array of values to includes() with the help of some() and every().
Would you like to match the closest number in an array using JavaScript? Find out how to achieve this using both reduce() and sort().
What are web components? Learn about web components, the shadow DOM, styling and lifecycle callbacks in this JavaScript tutorial series.
Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!
Using Bulma but don't know how to integrate it with Nuxt? I'll show you how to load Bulma into your Nuxt project with full control over variables.