Goodies Page

Smooth Page Scrolling

When clicking on an ANCHOR tag (<a>) to move back to the top of the page it would normally jump there instantaneously.

But if you want to do it smoothly add in the <head> section (under the <style> area) the following :-

html {
scroll-behavior: smooth;
}

I actually added it to my MyStyles.css form so it would make EVERY page scroll smoothly.

Using the <a> tag to go to the TOP of the page

To achieve this you can either:-

<a href="#Top">Top</a>
but you will aso need an element at the top with the id="top" set, eg...
<section id="top">

OR
You can just use the anchor tag like this...
<a href="#">Top</a>
and this will automatically take you to the top of your page.

Labels inside Javascript

The label statement allows us to name loops and blocks in JavaScript.
We can then use these labels to refer back to the code later.

A label name is just a label name followed by a colon (:)
(Label names must not be a reserved word)
Eg...
myLabel: is okay but var: is not okay

It's not really used much but may be useful in NESTED LOOPS...
Eg...
first:
for (var i = 0; i < 3; i++) {
   second:    for (var j = 0; j < 3; j++) {
      if (i == 1) continue first;
      if (j == 1) break second;
      console.log(`${i} & ${j}`);
   }
}

Which means if i is 1 then just go back to the first loop and continue on.
and if j is 1 then stop running the second loop.
It will automatically carry on running the first loop.

The result will be - displaying the following values in the console.log :-
0 & 0
2 & 0

Centering a <div> on the page

If you want to center a <div> element on the page (horizontally) then you should set the style...

margin: auto;

(you may also need to set width:100%; if the margin:auto; does not work properly)

Setting a default value for a parameter, eg...

Creating a function where if no parameter is passed to it then default it to be "MY TEST"
function myFunc(a="MY TEST") {...}

so when calling myFunc you can specify a parameter, eg... var myValue = myFunc("ABC") and myValue will = "ABC"
or you can NOT specify a parameter
var myValue = myFunc() and myValue will = "MY TEST"

Difference between var and let

In JavaScript using var or let to declare variables depends on where you are declaring them.

The var command should be used to create a page-wide variable

whereas the let command should be used inside sections of code like loops or functions etc.

Basically the let variable is a variable that will lose its value once you leave the function/loop code but the var would keep its value.
Eg...

var a = 1;
var b = 2;

if (a === 1) {
   var a = 11; // the scope is global
   let b = 22; // the scope is inside the if-block

   console.log(a); // 11
   console.log(b); // 22
}

console.log(a); // 11
console.log(b); // 2

(It is also worth noting that let is a newer command and may not work in all (older) browsers (okay in 2015 onwards I think))

Template Literal

If you want to add the value of a property to a string you could say, eg...
console.log("Some text" + myValue + " a bit more text" + myValue2);

or, using the template literal format you would say, eg...
console.log(`Some text ${myValue} a bit more text ${myValue2}`);

NOTE
The text MUST be enclosed in the `` (the key just before the '1' on my keyboard, don't know what it is called though - maybe 'backticks')

So in that example, where
myValue = 1
and myValue2 = "again"
you will see...

See this Document for more.