Author: John Au-Yeung

Sometimes, we want to change order of divs with jQuery

In this article, we’ll look at how to change order of divs with jQuery.

How to change order of divs with jQuery?

To change order of divs with jQuery, we can use the insertAfter method.

For instance, we write:

<div class="test one">aaa</div>
<div class="test two">bbb</div>
<div class="test three">ccc</div>

to add 3 divs.

Then we take the first div and insert it after the 3rd with:

const tests = $('.test');
tests.first().insertAfter(tests.last());

We select all 3 divs with class test with $('.test').

Then we get the first of the elements with first.

And we call insertAfter with the element to insert the first element after.

We called it with tests.last() so we insert the first element after the last element.

Therefore, we see:

bbb
ccc
aaa

displayed.

Conclusion

To change order of divs with jQuery, we can use the insertAfter method.

Sometimes, we want to round money amount to the nearest 10 dollars in JavaScript.

In this article, we’ll look at how to round money amount to the nearest 10 dollars in JavaScript.

How to round money amount to the nearest 10 dollars in JavaScript?

To round money amount to the nearest 10 dollars in JavaScript, we can use the Math.round method.

For instance, we write:

const val = 123.45
const rounded = Math.round(val / 10) * 10;
console.log(rounded)

to round val to the nearest 10 dollars.

To do this, we first divide val by 10.

Then we round the quotient to the nearest integer with Math.round.

Finally, we divide the rounded number by 10 to return val rounded to the nearest 10 dollars.

Therefore, val is 120.

Conclusion

To round money amount to the nearest 10 dollars in JavaScript, we can use the Math.round method.

Sometimes, we want to convert a JavaScript object to array.

In this article, we’ll look at how to convert a JavaScript object to array.

How to convert a JavaScript object to array?

To convert a JavaScript object to array, we can use the Object.values method to return the object property values in an array.

For instance, we write:

const o = {
  0: "a",
  1: 'b'
};
const a = Object.values(o);
console.log(a)

To call Object.values with o.

Then we see that a is ['a', 'b'] from the console log.

Conclusion

To convert a JavaScript object to array, we can use the Object.values method to return the object property values in an array.

Sometimes, we want to draw text with an outer stroke with HTML5 canvas and JavaScript.

In this article, we’ll look at how to draw text with an outer stroke with HTML5 canvas and JavaScript.

How to draw text with an outer stroke with HTML5 canvas and JavaScript?

To draw text with an outer stroke with HTML5 canvas and JavaScript, we can use the the strokeText and fillText methods.

For instance, we write:

<canvas widrth='400' height='400'></canvas>

to add a canvas.

Then we write:

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
const text = 'hello'
ctx.font = '80px Sans-serif';
ctx.strokeStyle = 'black';
ctx.lineWidth = 8;
ctx.strokeText(text, 10, 70);
ctx.fillStyle = 'white';
ctx.fillText(text, 10, 70);

to select the canvas with querySelector and the context with getContext.

Then we set the font to the font style we want.

We set `strokeStyle to set the text stroke color.

lineWidth we set to the width of the line.

Then we call strokeText to draw text with an outer stroke.

And finally, we call fillText to add the filling of the text.

Conclusion

To draw text with an outer stroke with HTML5 canvas and JavaScript, we can use the the strokeText and fillText methods.