DEV Community: MkDay

How To Use Extremely Large Numbers in JavaScript - JavaScript BigInt

MkDay — Thu, 08 Dec 2022 07:50:35 +0000

In JavaScript, what if you have to use a number greater than this number, "9007199254740991"? So that is the place where BigInt comes into play.
Let's see how.

How To Convert Binary, Octal, and Hexadecimal into Decimals in JavaScript

MkDay — Wed, 07 Dec 2022 03:20:17 +0000

Are you struggling with an online calculator when converting binary, octal, or hexadecimal into decimals? Try to use #javascript to do the job. Let's see how.

Let's Do Freelancing in a Modern Way - Topcoder Gig Work

MkDay — Sat, 05 Nov 2022 04:24:21 +0000

Let's Become a Modern Freelancer - Topcoder Gig Work

Introduction

Freelancing is the most popular way among developers to get paid. At Topcoder, they offer freelance jobs that they called Gig Work. It's much like traditional freelancing but it has some uniqueness that makes it different from others. One of the differences is they have a good pay rate for a developer who works on Gig Work.

You can sign up for a gig work here.

How to get started?

If you do not have a competition history at Topcoder, that's okay. Before getting started to work with a customer you have to build up your skillset. It's nothing much just you have to prove your skills by participating in their skill builder competitions and build up your profile. Once you become rated and/or show success by either winning challenges or successfully passing review in any competition track you are eligible to participate in Gig Work engagements.

You can learn more about it here.

After becoming eligible

Having an in-depth profile you will be moved higher in the list as they match Gig Work members to customer requests.

What type of talent are they looking for?

Here are a few skills they are always looking for,

Fullstack Developers
Front End Developers
Back End Developers
Designers
Data Engineers
Data Scientists
DevOps Engineers with AWS, Azure, GCP

What should you do if you are interested in Gig Work?

If you are interested in working on freelancer-style work with different customers and projects visit this page. Also, check out open Gigs to see if something fits your talent and experience.

Conclusion

Now you know how to start a Gig Work at Topcoder and earn a good amount of money. Also, you can learn more details about it here.

Photo by cottonbro studio

How to Print Staircase Using Loops - Problem Solving JavaScript NodeJS

MkDay — Fri, 04 Nov 2022 13:12:07 +0000

Do you ever want to print a staircase using code? In this article, we are going to print a staircase into the terminal using loops in NodeJS.

Article: How to Print Staircase Using Loops - Problem Solving JavaScript NodeJS

Let's Create a Questionnaire Using NodeJS process stdin and stdout

MkDay — Thu, 03 Nov 2022 10:07:42 +0000

NodeJS process stdin and stdout

I'm pretty sure you've never used other than console.log() to output something on the terminal while using NodeJS. So it's time to getting know how to take inputs and display outputs into terminal without using front-end template or console.log()

So let's read how to create a questionnaire using process stdin and stdout.

Import and Export Modules in NodeJS

MkDay — Wed, 02 Nov 2022 13:40:15 +0000

Introduction

As we know there are slight differences between core JavaScript and NodeJS. Today we’re going to discuss one of the features that are used differently in JavaScript and NodeJS. Which is import and export modules in NodeJS.

Note: You can learn about Import Export Modules in JavaScript here.

Let’s jump into the topic of how to import and export modules in NodeJS.

In NodeJS, each file is considered a module since Node uses the CommonJS module system. And variables, functions, and classes in a module are private to that particular file (module). If we want to use them outside of the module, we have to export them first and, import them into the place where we want to use them.

Look at the following example.

Here we have two modules.

index.js
/example-folder/first.js (‘first.js’ module in the folder called ‘example-folder’)

/example-folder/first.js:

 const num = 10;

 const greet = (name) => {
    console.log('Hello, ' + name);
 };

 class Student {
    constructor(name, marks) {
        this.name = name;
        this.marks = marks;
    }

    showMarks() {
        console.log('student ' + this.name + ' has ' + this.marks + '   marks.');
    }
 };

 module.exports = {
    num,
    greet,
    Student
 };

index.js:

 const first = require('./example-folder/first');

 console.log(first.num); // 10

 first.greet('Tom'); // Hello, Tom

 const student = new first.Student('Bob', 100);

 student.showMarks(); // student Bob has 100 marks.

There are three types of import-export that can be done in NodeJS.

Core modules
Node_modules
JavaScript files

Let’s explore the above types.

1. Require core modules

For example, if we want to create a server object, we have to import a built-in module for NodeJS called http.

These built-in modules are called core modules in NodeJS and there is a list of them.

The syntax for importing built-in modules is straightforward, just put the name of the module inside quotation marks.

index.js:

 const http = require('http');


 //create a server object:
 http.createServer((req, res) => {
  res.write('Hello World!'); //write a response to the client
  res.end(); //end the response
 }).listen(8080); //the server object listens on port 8080

2. Require Node_Modules

Let’s say we have installed the express package and therefore we have the Node_Modules folder automatically. And we want to import the express package from the Node_Modules folder. Then we use the following syntax.

 const express = require('express');

Here express is not a,

built-in module or
JavaScript file that its path begins with ‘/’ or ‘./’

3. Require JS files

All the modules that we create can be imported using the following two ways.

Using relative path

const first = require('./example-folder/first');

Using absolute path

const first = require('/Home/Documents/blog-code-snippets/example-folder/first.js');

Now we know how to import three types of modules. And let’s talk about how to export items from a module.

4. module.exports

module.exports can be used to export multiple things at once. Let’s look at our starting example. There we export a variable, function, and a class.

We can do so since module.exports is an object. And we can assign properties to it.

 module.exports = {
    num,
    greet,
    Student
 };

5. exports

Also, exports method allows us to export a single item at a time. Unlike module.exports we cannot export multiple items at once using the exports keyword. Look at the following example, in there we have used it for the variable, function, and class separately.

/example-folder/first.js:

 exports.num = 10;

 exports.greet = (name) => {
    console.log('Hello, ' + name);
 };

 exports.Student = class Student {
    constructor(name, marks) {
        this.name = name;
        this.marks = marks;
    }

    showMarks() {
        console.log('student ' + this.name + ' has ' + this.marks + ' marks.');
    }
 };

index.js:

const first = require('./example-folder/first.js');

console.log(first.num); // 10

first.greet('Tom'); // Hello, Tom

const student = new first.Student('Bob', 100);

student.showMarks(); // student Bob has 100 marks.

6. module.exports vs. exports

module.exports and exports both are objects. But it only exports things in the module.exports if we use both of them in the same file.

Look at the following example, here we only export the class Student inside module.exports and it is the only thing that can be exported without getting errors.

/example-folder/first.js:

 exports.num = 10;

 exports.greet = (name) => {
    console.log('Hello, ' + name);
 };

 class Student {
    constructor(name, marks) {
        this.name = name;
        this.marks = marks;
    }

    showMarks() {
        console.log('student ' + this.name + ' has ' + this.marks + ' marks.');
   }
};


 module.exports = { Student };

index.js:

const first = require('./example-folder/first.js');

const student = new first.Student('Bob', 100);

student.showMarks(); // student Bob has 100 marks.

7. ECMA Script Module - import export

This is simply called ESM, it allows you to use JavaScript import & export keywords instead of require and module.exports keywords while importing and exporting items. To use them you have to set the type: module at package.json file.

Here I’m not going to discuss how to use import and export keywords but you can read about it here.

So I hope now you have a better understanding of how to import and export modules in NodeJS and if you want to learn more about it read the NodeJS.org docs.

Happy Coding!

Image by CopyrightFreePictures from Pixabay.

return keyword JavaScript - A hidden hero we do not care about

MkDay — Mon, 24 Jan 2022 01:00:11 +0000

Many of us, including me, do not care about some of the tiny pieces in a programming language that maybe we use more often without even thinking of it.

By considering JavaScript, the return keyword becomes more crucial because every built-in function or custom function may have a return value that defines using this return keyword.

So, let me unwrap things that make the return keyword so important.

1. Always resides inside a function

First of all, it only can be used inside a function. For instance, if we use it in the global scope or inside a loop, we will get an error message like Uncaught SyntaxError: Illegal return statement.

Let us try to return something in the global scope.


/* 
* try to return a value in the global scope,
* and it only gives an error 
*/

console.log("before the return statement");

return 0;

console.log("after the return statement");

/*
output:
Uncaught SyntaxError: Illegal return statement

*/

Instead, we can put that block of code inside a function.


function returnSomething() {
  console.log("before the return statement");

  return 0;

  console.log("after the return statement");
}

const returnValue = returnSomething(); 
console.log(returnValue);

/*
output:
"before the return statement"
0
*/

And, let us try to use the return keyword inside a for-loop.


/*
* try to return a value inside a for-loop
* and it is also never going to run
*/

for (let i = 1; i <= 5; i++) {
  if (i === 4) {
    console.log("reach to the value: " + i);
    return i;
  }
  console.log("current value: " + i);
}

console.log("exit from the loop");

/*
output:
Uncaught SyntaxError: Illegal return statement
*/

To solve the problem, wrap it up using a function.


function returnSomething() {
  for (let i = 1; i <= 5; i++) {
    if (i === 4) {
      console.log("reach to the value: " + i);
      return i;
    }
    console.log("current value: " + i);
  }
  console.log("exit from the loop");
}

const returnValue = returnSomething();

console.log(returnValue);

/*
output:

"current value: 1"
"current value: 2"
"current value: 3"
"reach to the value: 4"
4

*/

The function above will never print the last console message. That is,

console.log("exit from the loop").

Because, when the if condition (i === 4) becomes true, it will be immediately returned from the function without executing any further. So, that console message becomes unreacheable code.

In addition, here is how to use the return keyword with the switch-case statement.


function returnSomething() {
  let fruit = "apple";

  switch (fruit) {
    case "banana":
      console.log("banana");
      return;

    case "orange":
      console.log("orange");
      return;

    case "apple":
      console.log("apple");
      return;

    default:
      console.log("no fruits here");
  }
  console.log("outside the switch-case");
}

const returnValue = returnSomething();
console.log(returnValue);

/*
output:
"apple"
undefined
*/

2. Use return with or without a value

It is not compulsory to use the return statement inside every function.

However, still, every function has a return value that is undefined.


function withoutReturn() {
  console.log("no return value for this function");
}

const returnValue = withoutReturn();
console.log(returnValue);

/*
output:

"no return value for this function"
undefined
*/

3. Automatic Semicolon Insertion (ASI)

Javascript does not allow to use line terminator between the return keyword and the return expression. See the below example. It returns undefined instead of a + b value. And, a + b becomes as unreachable code.


function returnSomething(a, b) {
  return
  a + b;
}

const returnValue = returnSomething(4, 5);
console.log(returnValue); // undefined

Instead, we can use parentheses to wrap the return expression.


function returnSomething(a, b) {
  return (
  a + b);
}

const returnValue = returnSomething(4, 5);
console.log(returnValue); // 9

4. Types of return values

We can return a value in any type using the return keyword. For instance, we can return values which are,

in the primitive data types such as string, number, boolean, etc.
in the object types such as arrays, objects, and functions.

Plus, we can return console messages as well.

(1) Primitive types

return undefined:


function returnType() {
  console.log("return value: undefined");
  return undefined;
}

const returnValue = returnType();
console.log(returnValue);

/*
output:

"return value: undefined"
undefined
*/

return null


function returnType() {
  console.log("return value: null");
  return null;
}

const returnValue = returnType();
console.log(returnValue);

/*
output:

"return value: null"
null
*/

return string:


function returnType() {
  console.log("return value: string");
  return "Hello World";
}

const returnValue = returnType();
console.log(returnValue);

/*
output:

"return value: string"
"Hello World"
*/

return number:


function returnType() {
  console.log("return value: number");
  return 5;
}

const returnValue = returnType();
console.log(returnValue);

/*
output:

"return value: number"
5
*/

return boolean:


function returnType() {
  console.log("return value: boolean");
  return false;
}

const returnValue = returnType();
console.log(returnValue);

/*
output:

"return value: boolean"
false
*/

(2) Object types

return an array:


function returnType() {
  let name = "Bob";
  let age = 14;
  let id = 123;
  return [name, age, id];
}

const [name, age, id] = returnType();
console.log(name, age, id);

/*
output:
"Bob" 14 123
*/

return an object:


function returnType() {
  let name = "Bob";
  let age = 14;
  let id = 123;
  return {name, age, id};
}

const {name, age, id} = returnType();
console.log(name, age, id);

/*
output:
"Bob" 14 123
*/

return a function:


function returnType() {
  return function returnFunction(name, age) {
    console.log(name + " is " + age + " years old.");
  };
}

const returnValue = returnType();
returnValue("Bob", 14);

/*
output:

"Bob is 14 years old."
*/

(3) return a console message


function returnType() {
  return console.log("Hello World");
}

const returnValue = returnType();

/*
output:
"Hello World"
*/

5. Difference between break & return

The return keyword that resides inside a loop stops the function execution and immediately exits from the function. So, the code below the loop becomes as unreachable.

However, if we use the break statement instead, we can still get the code below the loop.


function useBreak() {
  for (let i = 1; i <= 5; i++) {
    if (i === 4) {
      console.log("reach to the value: " + i);
      break;
    }
  }
  console.log("outside the loop");
}

useBreak();

/*
output:

"reach to the value: 4"
"outside the loop"
*/


function useReturn() {
  for (let i = 1; i <= 5; i++) {
    if (i === 4) {
      console.log("reach to the value: " + i);
      return;
    }
  }
  console.log("outside the loop");
}

useReturn();

/*
output:

"reach to the value: 4"
*/

Conclusion

Okay, now we have finished talking about the tiny but so important piece of JavaScript. That is the return keyword. So to wrap this up, let me summarize things that we have discussed above.

It only can be used inside a function.
Mainly, it stops the function execution at that point and returns the specified value to the function caller.
When executing the return statement, the code that comes after it becomes as unreachable code.
JavaScript does not allow line terminators between the return keyword and the expression.

I hope you enjoyed this article, and you can support me at ko-fi. I always appreciate your support. It really encourages me to keep going.

Happy Coding!

Weird But Still Useful - CSS not() Selector

MkDay — Mon, 17 Jan 2022 00:30:02 +0000

In CSS, pseudo-classes are very useful and, some of them are widely used. For examples,

:hover
:target
:active

But there are a few other pseudo-classes out there that I found, are not much popular but very useful and very interesting.

One of the useful and I feel much interesting pseudo-class is :not() known as negation pseudo-class.

Unlike other pseudo-classes you are familiar with, it can accept arguments within its parentheses. That is why not() is referred to as a functional pseudo-class.

As you guessed, it selects everything except that inside its parentheses. Either you can include one selector or selector-list inside the parentheses as its arguments.

Syntax:


selector:not(simple-selector) {}

/* OR */

selector:not(<selector-list>) {}

As I mentioned above, you can experiment a lot with it and get some sense of how interesting is it. So let me try some of them.

Here is the HTML code we are going to style using :not() pseudo-class.

In this HTML we have following elements,

<h2 id="heading" class="selected">
<div id="first" class="selected">
<div id="second" class="not-selected">
<div id="third" class="selected special">


<body>

  <h2 id="heading" class="selected">CSS pseudo-class not()</h2>

  <div id="first" class="selected">This is selected</div>
  <div id="second" class="not-selected">This is not selected</div>
  <div id="third" class="selected special">This is selected and Special</div>

</body>

And it has basic CSS styles like below.


body {
  display: flex;
  flex-direction: column;
  juztify-content: center;
  align-items: center;
}

div {
  width: 200px;
  height: 100px;
  border: solid black;
  margin: 0.625rem;
  padding: 0.625rem;
  color: #333;
}

1. with simple selector

Using this CSS rule, div:not(.not-selected) {}, we can select all the div elements except div elements with the class not-selected.

So it selects only the following two elements.

<div id="first" class="selected">
<div id="third" class="selected special">


div:not(.not-selected) {
  color: blue;
  border-color: burlywood;
}

Note:

But, if you use elements with CSS combinators as an argument for the :not() pseudo-class, you may get nothing since CSS combinators are NOT recognized as simple selectors.

In the example below, we target an element using descendant combinator as the argument.


<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>


/* below code are not well supported yet */

body :not(ul li) {
  color: red;
}

2. Select everything on the page except the selector within the parentheses.

:not(.not-selected) {}

The above rule selects everything, including <html> and <body> elements on the page except elements with the class .not-selected.


:not(.not-selected) {
  color: blue;
  border-color: burlywood;
}

3. Exclude multiple selectors

In this case, we want to select all the elements except .not-selected and #heading.

There are two ways to do the job, shown below.

body :not(.not-selected, #heading) {}
body :not(.not-selected):not(#heading) {}

The first method is not well supported in all the browsers yet. However, we can use the second way instead.


/* select anything that is not class="not-selected" or id="heading" */

body :not(.not-selected):not(#heading) {
  color: blue;
  border-color: burlywood;
}

/* below code are not well supported yet */

/*

body :not(.not-selected, #heading) {
  color: blue;
  border-color: burlywood;
}

*/

4. Sometimes it seems nonsense

If we use universal selector * with :not() like below, it says that do NOT style anything in the document which is meaningless.


:not(*) {
  color: blue;
  border-color: burlywood;
}

5. A pseudo-class as an argument

It doesn't allow to use :not() inside another :not() pseudo-class. In short it doesn't allow nested :not().


/* not allowed */

/*
:not(:not()) {}
*/


/* This code will not work */

body :not(div:not(.selected)) {
  color: blue;
  border-color: burlywood;
}

However, we can still use other pseudo-classes inside parentheses like below.

The code selects everything on the page except the 3rd child. In this case 3rd child of the body is <div id="second" class="not-selected">


body :not(:nth-child(3)) {
  color: blue;
  border-color: burlywood;
}

6. It increases the specificity of an element

At the first glance, the below code looks silly. It selects elements with id="first" except with id="second".

As we know,

one single element cannot have multiple id values.
multiple elements cannot have the same id value.

So our code becomes meaningless.

But when it comes to the specificity, #first:not(#second) {} has higher specificity than #first {}.

That's why #first gets the following styles.

color: blue
border-color: burlywood


/* first box get color: blue and border-color: burlywood */

#first {
  color: red;
  border-color: green;
}

#first:not(#second) {
  color: blue;
  border-color: burlywood;
}

7. Elements with multiple classes

The code below,

selects the elements with the class selected.
doesn't select elements with the class special.

Also, in our example HTML has a div with two class names which is,

<div id="third" class="selected special">

So we can exclude this div when adding styles like this way.


.selected:not(.special) {
  color: blue;
  border-color: burlywood;
}

8. Bring it to the real-life

As I mentioned earlier, the :not() pseudo-class is more interesting, not only because of its weird behaviors but because of its usefulness in some real-world situations.

Let me try some examples.

(1) Style all the buttons on the page except the ones that are disabled

We have a couple of buttons to styles like below.


<button class="btn">Sign in</button>
<button class="btn">Sign out</button>
<button class="btn" disabled>Delete Account</button>

In this case, we want to style only the buttons that are not disabled.


.btn {
  margin: 0.625rem;
  padding: 1rem 2rem;
  cursor: pointer;
}

.btn:not([disabled]) {
 background: #333;
 color: Snow;
 font-weight: bold;
 border: none;
 border-radius: 20px;
}

(2) For improving accessibility

To improve accessibility, it is a good practice to always add the alt attribute to the images of the page.

When we have a large array of images, also, we might forget to add the alt attribute for some of them.

So this is useful in that case too.

There are five images and, two of them don't have the alt attribute assigned to them.


<div>
  <img src="https://images.unsplash.com/photo-1641057273235-50725552d22a?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MjAzOTc2Mw&ixlib=rb-1.2.1&q=85" alt="A red car on a snowy road">
</div>

<div>
  <img src="https://images.unsplash.com/photo-1641057273235-50725552d22a?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MjAzOTc2Mw&ixlib=rb-1.2.1&q=85" alt="A red car on a snowy road">
</div>

<div>
  <img src="https://images.unsplash.com/photo-1641057273235-50725552d22a?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MjAzOTc2Mw&ixlib=rb-1.2.1&q=85">
</div>

<div>
  <img src="https://images.unsplash.com/photo-1641057273235-50725552d22a?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MjAzOTc2Mw&ixlib=rb-1.2.1&q=85">
</div>

<div>
  <img src="https://images.unsplash.com/photo-1641057273235-50725552d22a?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MjAzOTc2Mw&ixlib=rb-1.2.1&q=85" alt="A red car on a snowy road">
</div>

The :not() will set orange-colored dashed borders to the images that don't have the alt attribute.


div {
  width: 300px;
  height: 300px;
  margin: 1rem;
}

img {
  width: 300px;
  height: 300px;
  border: 5px solid burlywood;
}

img:not([alt]) {
  border: dashed 5px orange;
}

Browser compatibility

Conclusion

So this is all about how useful this :not() pseudo-class is. And, there might be more other ways to use it, other than discussed above. So if you have more ideas or some ideas to improve these details, please add them here. It will make this article more useful for someone else.

Also, I hope you enjoyed this article, and you can support me at ko-fi. I always appreciate your support. It really encourages me to keep going.

Happy Coding!

Which one is better - opacity, rgba(), or something else? To blur the background-element

MkDay — Mon, 10 Jan 2022 14:04:12 +0000

Maybe you had a lot of hard times like I had, trying to blur the background element without affecting its inner contents such as child elements, text, borders, etc.

In my case, as the first thought, I turned to the opacity to do the job.

And the next moment, I got a weird result and thought about another option.

Which was rgba() and, it worked for me.

But, it's not the problem. If the alpha value of rgba() can do the job, why do we need the opacity in any way?

It seems there are some questions to be solved, right?

So let's dig into the details.

We have a blue color inner element and orange color background element like below.

And, we want the background element to be blurred, like below.

To get that output, we can try the following options.

Using two separate elements
Using opacity for the parent element
Using rgba() for the parent element
Changing visibility to hidden or color to transparent (to completely hide the background element)

Let's try these options one by one to achieve our requirements.

1. Using two separate elements

Here, we have two separate div called outside-div and inside-div


<body>

 <div id="outside-div"></div>
 <div id="inside-div"></div>

</body>

In the CSS, before doing anything, let's center everything on the screen in the first place.

Here, we use flexbox to do the job.


body {
 display: flex;
 justify-content: center;
 align-items: center;
}

Then, give some width, height and background-color to the outside-div and inside-div.


#outside-div {
 width: 400px;
 height: 400px;
 background: rgb(255, 165, 0);
}


#inside-div {
 width: 200px;
 height: 200px;
 background: rgb(0, 0, 255);
}

And, to drag both div a bit down from the top of the screen, we can use position: absolute and top: 25% for both elements.


#outside-div {
 position: absolute;
 top: 25%;
}


#inside-div {
 position: absolute;
 top: 25%;
}

Next, we have to center the inside-div inside the outside-div.

To do that, we can set the margin-top value like below.

margin-top for the innermost div = ((height of outermost div) - (height of innermost div))/ 2


#inside-div {
 margin-top: 100px;
}

Now, set the opacity as 0.3 of the outside-div.


#outside-div { 
 opacity: 0.3; 
}

And, here is our complete CSS code.


* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

body {
 display: flex;
 justify-content: center;
 align-items: center;
}

#outside-div {
 position: absolute;
 top: 25%;
 width: 400px;
 height: 400px;
 background: rgb(255, 165, 0);
 opacity: 0.3; 
}


#inside-div {
 position: absolute;
 width: 200px;
 height: 200px;
 top: 25%;
 margin-top: 100px;
 background: rgb(0, 0, 255);
}

Oh, it works!

Finally, we're finished with solving the problem!

But hold on, why are we only using two separate elements?

Is there any luck with parent and child elements, or maybe, an element with its pseudo (:before or :after) element instead, where we should have to use them?

Well, the answer is YES!

However, some of them can be a bit tricky.

So let's take a look at how to blur a background element that has a child element/pseudo-element as its inner element.

2. Using opacity for the parent element

One of the ways to blur an element is using the opacity property.

In simple words, the opacity sets the see-through (transparent) level of an element. If its value is,

1 :- which means there's no transparency at all (default value).
0 :- which means it is fully transparent.
0.5 :- which means see-through level is 50%.

So let's try to use opacity.

Here is our HTML code.


<body>

<div id="box"></div>

</body>

Using opacity - 1st Attempt:

So, we have a div element called #box and its pseudo-element (#box:before) in it.


#box { 
 width: 400px;
 height: 400px;
 background: rgb(255, 165, 0);
}

#box:before {
 content: "";
 width: 200px;
 height: 200px;
 background: rgb(0, 0, 255);
}

As the first thing, let us place them neatly.

Also, make the position as absolute of the #box and push it down by 25% away from the screen.


body {
 display: flex;
 justify-content: center;
 align-items: center;
}

#box {
 position: absolute;
 top: 25%;
 display: flex;
 justify-content: center;
 align-items: center; 
}

#box:before {
 content: "";
 position: absolute;
}

As the final thing, set the opacity of the #box as 0.3.


#box {
 opacity: 0.3; 
}

Here is the complete CSS code.


body {
 display: flex;
 justify-content: center;
 align-items: center;
}

#box {
 position: absolute;
 top: 25%;
 width: 400px;
 height: 400px;
 display: flex;
 justify-content: center;
 align-items: center; 
 background: rgb(255, 165, 0);
 opacity: 0.3; 
}

#box:before {
 content: "";
 position: absolute;
 width: 200px;
 height: 200px;
 background: rgb(0, 0, 255);
}

Here is the visual result that we've got.

Okay, I know what you are thinking right now. Because it isn't the result that we expected, right?

We only want to make the opacity of the #box as 0.3 and opacity of the #box:before as 1 (default opacity).

Using opacity - 2nd Attempt:

To fix the problem, let's follow these steps.

Step 1: Swap width and height values between #box and #box:before


 /* step 1 */

#box {
 width: 200px;
 height: 200px;
}

#box:before {
 content: "";
 width: 400px;
 height: 400px;
}

Step 2: Change the top property from top: 25% to top: calc(25% + 100px) of the #box

By doing so, #box:before can be placed exactly 25% down from the screen top.


/* step 2 */

#box {
 position: absolute;
 top: calc(25% + 100px);
}

Step 3: Set z-index

for the #box: z-index: 2
for the #box:before: z-indx: 1

By doing so, #box:before will be pushed behind the #box.


/* step 3 */

#box {
 z-index: 2; 
}

#box:before {
 z-index: 1;
}

Step 4: Set opacity: 0.3 to the #box:before


/* step 4 */

#box:before {
 opacity: 0.3;
}

Complete CSS code is like below.


#box {
 position: absolute;
 top: calc(25% + 100px);
 width: 200px;
 height: 200px;

 display: flex;
 justify-content: center;
 align-items: center;

 background: rgb(0, 0, 255);

 z-index: 2; 
}

#box:before {
 content: "";
 position: absolute;

 width: 400px;
 height: 400px;

 background: rgb(255, 165, 0);

 opacity: 0.3; 

 z-index: 1;
}

Now you'll get the following result as you expected.

3. Using rgba() for the parent element

Let's try another way to get the expected result. And, it is the most simple one.

All you need to do is, remove the opacity: 0.3 from #box and change its background-color as rgba() colors and set your opacity as the fourth value there.


#box {
 position: absolute;
 top: 25%;
 width: 400px;
 height: 400px;
 display: flex;
 justify-content: center;
 align-items: center; 

 /* change rgba() color like this */

 background: rgba(255, 165, 0, 0.3);
}

#box:before {
 content: "";
 position: absolute;
 width: 200px;
 height: 200px;
 background: rgb(0, 0, 255);
}

This is the final result.

4. Changing visibility to hidden or color to transparent (to completely hide the background element)

If your requirement is only to make the background div as invisible, it's better to make the child element/pseudo-element as visible and the background (parent) element as invisible.

You can use this code for it.


#box {
 visibility: hidden;
 position: absolute;
 top: 25%;
 width: 400px;
 height: 400px;
 display: flex;
 justify-content: center;
 align-items: center; 
 background: rgb(255, 165, 0);
}

#box:before {
 visibility: visible;
 content: "";
 position: absolute;
 width: 200px;
 height: 200px;
 background: rgb(0, 0, 255);
}

Or you can use color: transparent for the background (parent) element.


#box {
 background: transparent;
}

#box:before {
 background: rgb(0, 0, 255);
}

Which one is better - opacity or rgba()?

Now, let us turn into the ideal question which one is better?

By looking at methods that used opacity and rgba() that we discussed above, you might be wondering which one is better to use for your specific case.

Well, as always, it depends.

However, let me explain some of the differences between both of them.

The value of opacity applies to the whole element, including its child elements, text, borders, colors, etc.
In the meantime, the alpha value of the rgba() only applies to the color of that particular element.

So that's the reason you got the #box:before as blurred at our 1st attempt where we used opacity to blur only the background element.

Also, for the same reason, you may feel some visual differences between the two results where we got the expected result using opacity and rgba().

In my opinion, it is better to use rgba() if you only want to blur the background element.

Conclusion

As the last thing, let me recap what you exactly got from this article.

a few ways to blur the background element without affecting its inner contents.
some sense of the difference between opacity and rgba()
some sense of where to use opacity and where to use rgba() based on your specific requirement.

I hope you enjoyed this article, and you can support me at ko-fi. I always appreciate your support. It really encourages me to keep going.

Happy Coding!

JavaScript preventDefault() - Does it work as its name suggests?

MkDay — Tue, 04 Jan 2022 19:26:10 +0000

Often, almost everyone on the web doesn't like to use default behaviors which are provided by default.

For instance, as users, we have preferences about the color or font size of the text, themes of a web page (dark or light theme), etc.

In the meantime, as developers, we prefer or need to do different things with some events, like stop navigating through a link, stop submitting forms, etc.

It seems in both cases, we all need the web as much flexible and customizable more than ever!

You, as a developer, might have a much hard time working on it!

Well, if no one on the web needs default behaviors, how do we cancel them out and do something else?

That's the place where the JavaScript Event.preventDefault() comes into play.

Note: the Event.preventDefault() method is not limited to pure JavaScript language. You can also find it in languages like React and Jquery. But for now, let's stick only with pure JavaScript.

Okay, let's prevent from wasting extra time and dive into the topic.

At this point, you may be wondering about these two terms Event and Event.preventDefault() at the first place.

In brief,

Event: it can be something the browser does or something the user does.

preventDefault(): it cancels out the default behavior that belongs to a particular event.

Now you may think you can use it to prevent everything in this world that you want.

Well, you couldn't.

To realize why let's break it down to the following parts,

Real-world usage - where we can use Event.preventDefault().
How to check whether the Event.preventDefault() has been executed or not - Event.defaultPrevented.
Where does we cannot use Event.preventDefault() and some alternatives for it.
- with events that cannot be canceled
- to stop event propagation
- to customize callback functions
  1. customize parameters of callbacks
  2. customize return value of callbacks
Where does the preventDefault() becomes a headache? - passive true/false.

Real-world usage - where we can use Event.preventDefault().

Here is the most common use case where you can use it.

Let's say you have a form to fill and, before submitting it, you might be asked to read and agree to some policy statement.

At that point, the form submission might not happen if you didn't check the checkbox followed by some text like I agree....

And here are some more real-world use cases for the .preventDefault():

to prevent the user from refreshing the page.
to prevent the user from navigating through a link (anchor element with some URL to another page).
to prevent the user from copying content from a web page, etc.

Now let's see some examples to understand how it works.

For instance, the following code shows you how to prevent the user from,

navigating through a link
submitting a form.

In our main HTML code has the following elements.

<a> element with a URL.
<form id="form-submission"> element with three types of input elements as its children.
- <input type="text" id="input-text">
- <input type="checkbox" id="agreement-checkbox">
- <input type="submit" id="submit-btn">

HTML:


<div id="container">
  <h1>JS Event - preventDefault()</h1>

  <a id="link" href="https://www.google.com">Go to the link</a>
  <br><br>

  <form id="form-submission">

   <label for="input-text">username: </label>
    <input type="text" id="input-text" placeholder="Don't type anything here">
    <br><br>

    <input id="agreement-checkbox" type="checkbox">

    <label for="agreement-checkbox">I agree</label>
    <br><br>

    <input id="submit-btn" type="submit" value="Submit">
    <br><br>

  </form>

</div>

Here we select them within JavaScript.


const container = document.querySelector("#container");

const link = document.querySelector("#link");

const form = document.querySelector('#form-submission');

const input = document.querySelector("#input-text");

const checkbox = document.querySelector("#agreement-checkbox");

const btn = document.querySelector("#submit-btn");

CodePen live demo for the HTML & CSS:

And, here is the JavaScript callback functions where we use the preventDefault() method.

JS:


// prevent link

function preventLink(e) {
  e.preventDefault();

  link.textContent = "Link is prevented";

  console.log("Default link behavior is prevented");
}

// prevent submit

function preventSubmit(e) {
  if (!checkbox.checked) {
    e.preventDefault();

    form.innerHTML +=
      "Please check the agreement before submitting the form";

    console.log("Default submit behavior is prevented");
  }
}

Now we're going to use those callbacks with,

.addEventListener()
onclick within JavaScript
inline onclick attribute to give you some more clarity.

(i) addEventListener()


// using addEventListener

link.addEventListener("click", preventLink);

btn.addEventListener("click", preventSubmit);

(ii) onclick within JS


// using onclick within JS

link.onclick = preventLink;

btn.onclick = preventSubmit;

(iii) inline onclick attribute


<div id="container">
  <h1>JS Event - preventDefault()</h1>

  <a id="link" href="https://www.google.com" onclick="preventLink(event)">Go to the link</a>
  <br><br>

  <form id="form-submission">

   <label for="input-text">username: </label>
    <input type="text" id="input-text" placeholder="Don't type anything here">
    <br><br>

    <input id="agreement-checkbox" type="checkbox">

    <label for="agreement-checkbox">I agree</label>
    <br><br>

    <input id="submit-btn" type="submit" value="Submit" onclick="preventSubmit(event)">
    <br><br>

  </form>

</div>

How to check whether the Event.preventDefault() has been executed or not - Event.defaultPrevented

Let's say you have already used the .preventDefalt() method in your code and, you may want to make sure whether it works or not at some point.

That is the place where Event.defaultPrevented comes into the play.

It is a read-only property.
- It returns true if the default behavior of the event has been prevented.
Otherwise, it returns false.


function preventSubmit(e) {
  if (!checkbox.checked) {
    e.preventDefault();

    form.innerHTML +=
      "Please check the agreement before submitting the form";

    console.log("Default submit behavior is prevented");
  }

  console.log(e.defaultPrevented); // true
}

btn.addEventListener('click', preventSubmit);

Where does we cannot use Event.preventDefault() and some alternatives for it.

At this point, we already know how to stop things provided by default.

It's cool, right?

But hold on, can we use it anywhere we want to stop default behaviors of an event?

Actually, we couldn't!

We couldn't use it,

with events that cannot be canceled
to stop event propagation
to customize callback functions
1. customize parameters of callbacks
2. customize return value of callbacks

1. With events that cannot be canceled

For example, if you suppose to prevent the user from typing in a text input field, unfortunately, you cannot use .preventDefault() with the input event since it is not cancelable.

In other words input event is a read-only property. As an alternative, you can use the readonly attribute like below.


<input type="text" id="input-text" placeholder="Don't type anything here" readonly>

So it seems before using .preventDefault() to cancel any event, you should find out whether the event is cancelable or not. If it is not cancelable, you cannot use .preventDefault() to cancel it.

Okay, how do we check if it is cancelable or not?

Check whether an event is cancelable or not - Event.cancelable

The Event.cancelable property returns true if the event is cancelable otherwise returns false.


// check whether an event is cancelable or not

// for input event

input.addEventListener("input", (e) => {
  console.log(e.cancelable); // false
});


// for click event

btn.addEventListener('click', (e) => {
  if (e.cancelable) {
    console.log(e.cancelable); // true
    e.preventDefault();
  }
});

2. To stop event propagation

It is another misunderstanding about the Event.preventDefault() method. You cannot stop Event propagation using just only .preventDefault().

See this example:


form.addEventListener('click', (e) => {
  form.style.borderColor = 'red';
});


function preventSubmit(e) {
  if (!checkbox.checked) {
    e.preventDefault();

form.innerHTML +=
      "Please check the agreement before submitting the form";

    console.log("Default submit behavior is prevented");
  }
}

btn.addEventListener('click', preventSubmit);

In the code above, we attach Event.preventDefault() to the submit button. So it stops submitting the form if the checkbox is unchecked. But, it doesn't stop changing the border-color of the form into the red.

It seems the code works as follows,

checks for the click event of the btn element.
executes the preventDefault() hence, it won't submit the form.
then bubbles up to the parent element (in this case, form).
finds click event there and executes it too.

In simple words, preventDefault() cannot stop event propagation even it is one of the default behaviors of events.

If our requirement is only to stop the event propagation we can use Event.stopPropagation() instead using .preventDefault()

3. To customize callback functions

Now at this point, we know a bit about things that the .preventDefault() method can do or cannot do.

Okay, how about customizing things, like, the number of parameters, types of parameters, and return value of the callback function using .preventDefault()?

For instance,

callback function of the event listener only can have a single parameter which is an object, based on Event that has occurred.
Also, it returns nothing.
If there is some return value, it will be ignored.

So, what if we need more parameters or another type of parameter instead of an object, based on Event?

Also, what if we need our callback function to return something?

Well, the answer is, you cannot customize both behaviors using Event.preventDefault() unless you tend to use the inline onclick attribute.

Let's see it practically.

3.1. Customize parameters of callbacks

(1) Not working ways - callbacks with custom parameters:

If we use callback functions followed by parentheses, it will be immediately invoked even without the event has been occurred. So we cannot use parentheses, which means we cannot have custom parameters other than its default one.

The code below will never work as we expected.


 // prevent link - custom callback

function preventLinkCustom(e, num) {
  console.log(num * 2);

  e.preventDefault();

  link.textContent = "Link is prevented";

  console.log("Default link behavior is prevented");
}

// prevent submit - custom callbacks

function preventSubmitCustom(e, num) {
  console.log(num * 3);

  if (!checkbox.checked) {
    e.preventDefault();

    form.innerHTML +=
      "Please check the agreement before submitting the form";

    console.log("Default submit behavior is prevented");
  }
}

(i) addEventListener()


 // using addEventListener()

/* these callbacks are invalid because they will be immediately invoked when the page is loaded. */

link.addEventListener("click", preventLinkCustom(event, 12));

btn.addEventListener("click", preventSubmitCustom(event, 12)); 

/* output (immediately invoked, got errors, btn isn't executed)

24

Uncaught TypeError: Cannot read property 'preventDefault' of undefined 

*/

(ii) onclick within JS


 // using onclick within JS

 /* these callbacks are invalid because they will be immediately invoked when the page is loaded. */

 link.onclick = preventLinkCustom(event, 12);

btn.onclick = preventSubmitCustom(event, 12);


/* output (immediately invoked, got errors, btn isn't executed)

24

Uncaught TypeError: Cannot read property 'preventDefault' of undefined 

*/

(2) Working ways - callbacks with custom parameters:

However, there are some alternatives to customize parameters of the callback functions.

In each method, we only use the inline-onclick attribute to handle the click event.

Note: it is not recommended to use *inline-onclick attribute to handle an event as a good practice.*

Method 1:

Using inline-onclick attribute in the HTML and .preventDefault() in its callback function, we can achieve this requirement like below.


// inline onclick

<input id="submit-btn" type="submit" value="Submit" onclick="callback(event, customPara)">

// callback with custom parameters and preventDefault()

function callback(e, customPara) {
 // your custom code goes here
 e.preventDefault();
}

JS:


// prevent link - custom callback 

function preventLinkCustom(e, num) { 

  console.log(num * 2); 

  e.preventDefault(); 
  link.textContent = "Link is prevented"; 
  console.log("Default link behavior is prevented");

  } 


// prevent submit - custom callbacks 

function preventSubmitCustom(e, num) { 

  console.log(num * 3);

   if (!checkbox.checked) { 
     e.preventDefault(); 
     container.innerHTML += "Please check the agreement before submitting the form"; 
    console.log("Default submit behavior is prevented"); 

   } 
  }

HTML:


<div id="container">
  <h1>JS Event - preventDefault()</h1>

  <a id="link" href="https://www.google.com" onclick="preventLinkCustom(event, 12)">Go to the link</a>
  <br><br>

  <form id="form-submission">

   <label for="input-text">username: </label>
    <input type="text" id="input-text" placeholder="Don't type anything here">
    <br><br>

    <input id="agreement-checkbox" type="checkbox">

    <label for="agreement-checkbox">I agree</label>
    <br><br>

    <input id="submit-btn" type="submit" value="Submit" onclick="preventSubmitCustom(event, 12)">
    <br><br>

  </form>

</div>

Method 2:

In this method, we use the inline-onclick in the HTML and add there,

a regular function without Event object parameter but your custom parameters.
return false.

// inline onclick

<input id="submit-btn" type="submit" value="Submit" onclick="callback(customPara); return false;">

// regular function without Event object as a parameter

function callback(customPara) {
  // your custom code goes here
}

JS:


 // prevent link - custom callbacks

function linkCustom(num) {
  console.log(num * 2);

  link.textContent = "Link is prevented";

  console.log("Default link behavior is prevented");
}

// prevent submit - custom callbacks

function submitCustom(num) {
  console.log(num * 3);

  if (!checkbox.checked) {
    container.innerHTML +=
      "Please check the agreement before submitting the form";

    console.log("Default submit behavior is prevented");
  }
}

HTML:


<div id="container">
  <h1>JS Event - preventDefault()</h1>

  <a id="link" href="https://www.google.com" onclick="linkCustom(12); return false;">Go to the link</a>
  <br><br>

  <form id="form-submission">

   <label for="input-text">username: </label>
    <input type="text" id="input-text" placeholder="Don't type anything here">
    <br><br>

    <input id="agreement-checkbox" type="checkbox">

    <label for="agreement-checkbox">I agree</label>
    <br><br>

    <input id="submit-btn" type="submit" value="Submit" onclick="submitCustom(12); return false;">
    <br><br>

  </form>

</div>

Method 3:


// inline onclick

<input id="submit-btn" type="submit" value="Submit" onclick="return callback(customPara);">


// regular function without Event object as a parameter but with a boolean return value

function callback(customPara) {

 // your custom code goes here
 return false;
}

JS:


 // prevent link - custom callbacks

function linkCustom(num) {
  console.log(num * 2);

  link.textContent = "Link is prevented";

  console.log("Default link behavior is prevented");
  return false;
}

// prevent submit - custom callbacks

function submitCustom(num) {
  console.log(num * 3);

  if (!checkbox.checked) {
    container.innerHTML +=
      "Please check the agreement before submitting the form";

    console.log("Default submit behavior is prevented");
    return false;
  }
  return true;
}

HTML:


<div id="container">
  <h1>JS Event - preventDefault()</h1>

  <a id="link" href="https://www.google.com" onclick="return linkCustom(12);">Go to the link</a>
  <br><br>

  <form id="form-submission">

   <label for="input-text">username: </label>
    <input type="text" id="input-text" placeholder="Don't type anything here">
    <br><br>

    <input id="agreement-checkbox" type="checkbox">

    <label for="agreement-checkbox">I agree</label>
    <br><br>

    <input id="submit-btn" type="submit" value="Submit" onclick="return submitCustom(12);">
    <br><br>

  </form>

</div>

You will get this result for all the above methods,


/* output
24
"Default link behavior is prevented"
36
"Default submit behavior is prevented"
*/

3.2. Customize return value of callbacks

As shown above, we cannot modify the number of parameters or type of parameters using .preventDefault() unless we use the inline-onclick to handle the click event. Now let's check whether it can modify the return value that it inherits by default.

By default, the callback function returns nothing. If there is some return value, it will be ignored.


/* no error and no effect by adding return value even using preventDefault() within the callback function */

function preventSubmitCustom(e) {
  if (!checkbox.checked) {
    e.preventDefault();

    container.innerHTML +=
      "Please check the agreement before submitting the form";

    console.log("Default submit behavior is prevented");
    return false;
  }
  return true;
}

btn.addEventListener('click', preventSubmitCustom);

This code makes no sense and has no effect when it adds to an event listener. So it seems our .preventDefault() cannot stop that default behavior too.

However, you can still use inline onclick to handle the click event. In this way, it will work.


<!-- check the return type using typeof keyword -->

<input id="submit-btn" type="submit" value="Submit" onclick="console.log(typeof preventSubmitCustom(event));">

<!--output: "boolean"-->

4. Where does the preventDefault() becomes a headache? - passive true/false

The Event.addEventListener() has two optional parameters and one of them is options.

Syntax

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

The passive is one of the available options.

passive: boolean value that, if true, indicates that the function specified by the listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning. - MDN

It is more useful with touch events on mobile browsers.

For example, suppose we perform a touchstart event on the mobile.

When a touchstart event has occurred,

The browser will check whether there is an Event.preventDefault() method to execute within the callback function.
This checking will happen even you don't use the Event.preventDefault() within the callback.

Also, there will be a small time gap between each two touchstart events. Maybe it is smaller than the execution time of a single touchstart event. It will cause to slow down the web page running.

So this is the place where the .preventDefault() becomes a headache since the event will slow down the page running, just by only checking for the preventDefault() method.

To prevent it, we can use the {passive: true} option.

It tells the browser not to check for the Event.preventDefault() method and prevents the page from slowing down.

Note: *Most of the modern browsers use passive listeners by default for mobile touch events. So you don't need to use {passive: true} there. However, it's still good to use while considering all browsers.


document.addEventListener('touchstart', (e) => {
  console.log('before: ' + e.defaultPrevented); // "before: false"
  e.preventDefault();
  console.log('after: ' + e.defaultPrevented); // "after: false"
}, { passive: true});

Conclusion

Finally, I hope, now you have some sense of preventing default behaviors of an event. To wrap this out, let me summarize what we discussed in this article.

to use preventDefault() method, the event should be cancelable - Event.cancelable=true
it cannot stop the event propagation.
it cannot modify default parameters and return values of a callback function.
sometimes it becomes a headache even where we haven't used it. To overcome it, use {passive: true} as an option within the event listener.
use the Event.defaultPrevented property to check whether the default behavior of an event is prevented or not.

Photo Credits: Greg Rakozy on Unsplash

If you enjoyed this article, you can support me at ko-fi. I always appreciate your support, it really encourages me to keep going.

Happy Coding!

Stop Scrolling, Do Something Useful Instead - JS Scroll Event

MkDay — Mon, 27 Dec 2021 23:52:17 +0000

You've probably scrolled down through your DEV feed, found this article, stopped and, immediately realized you were scrolling for a while without even thinking about it. Right?

So welcome here then!

We're not here to fight upon scrolling all day is a good or bad habit but, as developers, it is our job to provide a good experience with scrolling itself. Also, it is crucial when it comes to user experience.

So let's scroll down to the topic.

The followings are the parts we're going to cover in this article:

Set scrolling.
Check the page/element has a scrollbar.
Detect the scrolling event.
Manipulate scrolling event.
1. Keep the focus to the bottom of the page/ element every time.
2. Scroll to the top/bottom using scroll() and scrollTo()
3. Scroll the page/element in a specific amount at a time using scrollBy()
4. Align the page/element to the start, center, or end using scrollIntoView()
Get the scrolling direction.
window vs. documentElement vs. Element

Also, the followings are the concepts that we're going to discuss along with the examples in brief:

scrollHeight
scrollTop
clientHeight
scroll() & scrollTo()
scrollBy()
scrollIntoView()
scrollY

Okay. Here is a brief about the HTML and CSS we use to demonstrate the magic of the scroll event.

In the HTML, we have four <div> with the same content and, each <div> has the same structure as follows. The page and the contents of each <div> are long enough to make them scrollable.




<div class="container">

  <div class="content">

   Some long dummy paragraphs

  </div>
</div>

Also, there's a <button id="btn"> to manipulate some scroll events that we will discuss later.

In the CSS, when we specify some width and height for <div> elements, you can see that the contents of each <div> are not fit in their containers.

1. Set Scrolling

To fix the above problem, we can set the below line of code in the CSS. It will get all the content into its container and allow the user to scroll down to see overflowed content.




/* to scroll the page vertically */
body {
 overflow-y: scroll;
}

/* to scroll an element vertically */
#container {
 overflow-y: scroll;
}

Note: Here, we use overflow-y to demonstrate only the vertical scrolling. And you can learn more about CSS overflow here.

Well, now we are all set to take control of the scroll event. So let's scroll down to the JavaScript code.

In JavaScript, we select all the <div> elements using their class name and select the <button> using its id.




const container = document.querySelectorAll(".container");
const btn = document.querySelector("#btn");

2. Check the page/element has a scrollbar

As we have seen, the scrollbar already appears in the browser window and each <div> element.

Also, we can prove it in our code using the following two properties as well.

1) Element.scrollHeight:

it gives the full height of an element (visible height + height of the overflowed content)
includes padding, height of pseudo-elements (if any).
doesn't include margins, borders, horizontal scrollbar.
a read-only property (cannot set values to it).
returns an integer value.

2) Element.clientHeight:

which gives the visible height of an element.
includes padding, height of pseudo-elements (if any).
doesn't include margins, borders, horizontal scrollbar.
a read-only property (cannot set values to it).
returns an integer value.

So if there's no vertical scrollbar, Element.scrollHeight equal to Element.clientHeight.




// check the page has a scrollbar

btn.addEventListener("click", (e) => {
  if (document.documentElement.scrollHeight >
    document.documentElement.clientHeight) {
    console.log("page has a scrollbar!");
  } else {
    console.log("page does not have a scrollbar!");
  }
});

// check the first container has a scrollbar

btn.addEventListener("click", (e) => {
  if (container[0].scrollHeight > container[0].clientHeight) {
    console.log("1st container has a scrollbar!");
  } else {
    console.log("1st container does not have a scrollbar!");
  }
});

3. Detect the scrolling event

Attaching an EventListener to the page/ element we can detect the scroll event like below.




// detect page scrolling

window.addEventListener('scroll', (e) => {
 console.log('page is scrolled!');
});


// detect scrolling of the first container

container[0].addEventListener('scroll', (e) => {
 console.log('1st container is scrolled!');
});

4. Manipulate scrolling event

Now we know how to check if the page/ element has a scrollbar and, we know how to detect the scroll event using EventListener.

But that isn't the end of the world. We can manipulate it as well. Let's see how.

(4.1) Keep the focus to the bottom of the page/ element every time

We can always display the bottom of the page/element even when adding new content to the page/ element dynamically using the following method.

Element.scrollTop = Element.scrollHeight




window.addEventListener("load", (e) => {

  // show bottom of the page when the page is loading

  document.documentElement.scrollTop = document.documentElement.scrollHeight;


  // show bottom of the 1st container when the page is loading

  container[0].scrollTop = container[0].scrollHeight;
});

Here is the brief of the Element.scrollTop.

Element.scrollTop:

it gives the number of pixels that the content of an element has scrolled vertically.
Element.scrollTop = distance between element's top and top of the visible content.
if there's no vertical scrollbar, Element.scrollTop = 0.
it could be a value from 0 to maximum of an element's height inclusively.

(4.2) Scroll to the top/bottom/center using scroll() or scrollTo()

The two methods that we can use here are scroll() & scrollTo().

Element.scroll() and Element.scrollTo():

scrolls the document/ element to a particular set of coordinates.
both are effectively same.



Syntax: 

Element.scroll(x-coord, y-coord)
Element.scroll(options)

Element.scrollTo(x-coord, y-coord)
Element.scrollTo(options)

x-coord: the pixel along the X-axis of the document/ element you want to display in the upper-left.
y-coord: the pixel along the Y-axis of the document/ element you want to display in the upper-left.
options:
- top: number of pixels to scroll along the Y-axis.
- left: number of pixels to scroll along the X-axis.
- behavior: smooth/ auto/ instant

The code below demonstrates the way of scrollTo() method works.

In this case, we talk about only how to scroll to the top and center.

Here is how the code works.

scroll to the top:

if the user clicks the button, it checks if the user has scrolled the page/ element (so the scrollTop won't be zero)
if so, it will scroll the page/element back to the top.




 /* ======= The page ======= */


btn.addEventListener("click", (e) => {

  // scroll to top 

  if (document.documentElement.scrollTop !== 0) {

    document.documentElement.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth"
    });
  }

});



/* ======The 1st container ======== */


btn.addEventListener("click", (e) => {

  // scroll to top 

  if (container[0].scrollTop !== 0) {

    container[0].scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth"
    });
 }

});

scroll to the center:

if the user clicks the button, it scrolls to the center of the page/ element.




 /* ======= The page ======= */


btn.addEventListener("click", (e) => {

  // scroll to the center

  document.documentElement.scrollTo({
    top: document.documentElement.scrollHeight / 2,
    left: 0,
    behavior: "smooth"
  });

});



/* ======The 1st container ======== */


btn.addEventListener("click", (e) => {


  // scroll to the center

  container[0].scrollTo({
    top: container[0].scrollHeight / 2,
    left: 0,
    behavior: "smooth"
  });

});

(4.3) Scroll the page/element by specific amount at a time using scrollBy()

Using the scrollBy() method we can scroll the document/ element by specific amount at a time.



Syntax:

Element.scrollBy(x-coord, y-coord)
Element.scrollBy(options)

x-coord: pixel value you want to scroll by horizontally.
y-coord: pixel value you want to scroll by vertically.
options:
- top: number of pixels along the Y-axis to scroll by.
- left: number of pixels along the X-axis to scroll by.
- behavior: smooth/ auto/ instant.

The following code shows how to scroll down the document/ element by 100px each time the user clicks the button.




btn.addEventListener("click", (e) => {

  // scroll the page to the bottom by 100px at a time

  document.documentElement.scrollBy({
    top: 100,
    left: 0,
    behavior: 'smooth'
  });


  // scroll the 1st container to the bottom by 100px at a time

  container[0].scrollBy({
    top: 100,
    left: 0,
    behavior: "smooth"
  });
});

(4.4) Align the page/element to the start, center or end using scrollIntoView()

The scrollIntoView() method can take two types of parameters and, both are optional.



Syntax:

Element.scrollIntoView();

Element.scrollIntoView(alignToTop); // Boolean parameter

Element.scrollIntoView(scrollIntoViewOptions); // Object parameter

alignToTop:

It's a boolean value.

if true: the top of an element will be aligned to the top of the visible area of the scrollable ancestor (Default).
if false: the bottom of an element will be aligned to the bottom of the visible area of the scrollable ancestor.

scrollIntoViewOptions:

It's an object with three optional properties.

behavior: smooth/ auto (Default: auto)
block: defines vertical alignment (start/ center/ end/ nearest) Default: start.
inline: defines horizontal alignment (start/ center/ end/ nearest) Default: nearest.

Also,

scrollIntoView({block: "start", inline: "nearest"}) corresponds to true value.

scrollIntoView({block: "end", inline: "nearest"}) corresponds to false value.




btn.addEventListener('click', (e) => {

  // align the page to the end 

  document.documentElement.scrollIntoView({
    behavior: 'smooth',
    block: 'end'
  });

  // align the 1st container to the center

  container[0].scrollIntoView({
    behavior: 'smooth',
    block: 'center'
  });

});

5. Get the scrolling direction

Here, we get the direction of the page/ element that the user is scrolling.

We have a variable called prevScrollY to store the number of pixels that the user previously scrolled the page/ element vertically.

If (the current number of pixels > the previous number of pixels)
Then the page/ element has scrolled downward. Otherwise upwards.




/* The page: */

let prevScrollY = window.scrollY;

window.addEventListener('scroll', (e) => {
  if(window.scrollY > prevScrollY) {
    console.log('page is scrolling downwards');
  }
  else {
    console.log('page is scrolling upwards');
  }
  prevScrollY = window.scrollY;
});


/* The 1st container: */

let prevScrollY = container[0].scrollTop;

container[0].addEventListener('scroll', (e) => {
  if(container[0].scrollTop > prevScrollY) {
    console.log('1st container is scrolling downwards');
  }
  else {
    console.log('1st container is scrolling upwards');
  }
  prevScrollY = container[0].scrollTop;
});

6. window vs. documentElement vs. Element

While reading this article, you may wonder about some weirdnesses of the above keywords. For instance, we attached the EventListener to the window but, we don't use something like window.scrollHeight or window.scrollTop.

So then, this is the right section to clear them out. Here are some cases where they have some differences from each other.

(i) Getting the distance that the document is currently scrolled vertically for the window and the element

In this case, the Window interface has two properties and, both give the distance that the window has scrolled. One is newer than the other.

pageYOffset (older)
scrollY (newer)

In the meantime, Element has scrollTop to do the job.

(ii) window.onscroll and *document.body.onscroll*

These two are interchangeable, which means if one of them gets changed, the other one inherits those changes as well.




window.onscroll = () => {
  console.log('scrolled!!');
};

console.log(window.onscroll === document.body.onscroll); // true

(iii) manipulate scroll event of the window

To scroll an element by a given amount of pixels vertically, we can use,




element.scrollTop = 2500;

But for the window, we cannot use window.scrollY since it is a read-only property.

Also, we cannot use something like document.body.scrollTop either. Because the scrollbar that the browser renders for the document belongs to the <html> element, NOT to the <body> element.




// these both ways aren't valid

window.addEventListener('load', () => {

  // window.scrollY = 2500;
  // document.body.scrollTop = 2500;
});

At this point, documentElement comes into the scene. It returns the root element of the document. In this case, it is <html> element.




// correct way to manipulate scroll event for the window

 window.addEventListener('load', () => {

  document.documentElement.scrollTop = 2500;

});

(iv) window.innerHeight and document.documentElement.clientHeight

(a) window.innerHeight:

it returns interior height of the window in pixels.
it includes height of the horizontal scrollbar (if present)

(b) document.documentElement.clientHeight:

it returns visible height of the element.
includes padding, height of pseudo elements (if any).
doesn't include margins, borders, horizontal scrollbar.
a read-only property (cannot set values to it).
returns an integer value.

So it is a good idea to choose document.documentElement to get the visible height of the window.

(v) why window.onscroll not document.documentElement.onscroll?

Another weird thing is we cannot attach the onscroll event to the documentElement even it is inheriting the scrollbar. We have to use window.onscroll in this case.

Here is the main takeaway of these three things:

to get the scrolled distance:
- for the document: window.scrollX (or window.pageXOffset) & window.scrollY (or window.pageYOffset)
- for the element: element.scrollLeft & element.scrollTop
to set the scroll position:
- document.documentElement.scrollLeft & document.documentElement.scrollTop works.
- window.scrollX & window.scrollY can't be used.
- document.body.scrollLeft & document.body.scrollTop can't be used.
onscroll event:
- window.onscroll and document.body.onscroll works.
- window.onscroll and document.body.onscroll are interchangeable.
- but document.documentElement.onscroll doesn't work.

Conclusion

Okay, we reached the end of the article. Now we know a bit about the scroll event and how to manipulate it.

So you may feel like scrolling isn't so bad as they say, and yes, you can say that it is the smartest feature that makes the web awesome.

Happy Coding!

Image Credits: Mike Juarez on Unsplash

PS: Thanks for scrolling down so far to the end and, if you enjoyed this article, you can support me @ko-fi. I always appreciate your support. It encourages me to keep going.

Measure Distance Between Two Points In An Image Using JavsScript

MkDay — Mon, 20 Dec 2021 11:51:57 +0000

It's not about complex astrophysics but we all love the sky, Right? Also, we like images of stars, nebulae, galaxies, etc.

So that's why I came up with this idea: what if we can measure the distance (only for fun) between two stars that appear in an image?

Well, It might not be about the stars in an image but could be anything such as two cities on the map, whichever we can measure the distance between them with this simple beginner-friendly project.

In my opinion, it is a good idea to use this project to practice basic knowledge of HTML, CSS and, JavaScript. Most importantly, you don't want to use HTML canvas here.

Okay, what does this project do in the first place?

There is an image of the starry night sky on the page, so the user can measure the distance between two or more stars that appear on the image by clicking on them.

So let's break down this project into smaller parts.

1. HTML:

Create div elements for,

Image container: <div id="container">
Result container to display calculated distance: <div id="results">


<body>
  <h1>Measure Distance</h1>

  <div id="container"></div>

  <h3>Results</h3>

  <div id="results">

    <div id="current-result"></div>

    <div id="total-result"></div>

  </div>

  <input id="reset" type="button" value="Reset" onclick="document.location.reload()">

</body>

2. CSS:

Set our starry night sky image as background-image of the image container.


#container {
 width: 500px;
 height: 400px;
 border: 2px solid BurlyWood;

 background-image: url(https://images.unsplash.com/photo-1629898145005-5f0ff3ee4eed?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzOTk5NzM3MQ&ixlib=rb-1.2.1&q=85); 
 background-position: center; 
 background-repeat: no-repeat; 
 background-size: cover; 
}

Create and style two class selectors .points and .lines which we will create later in the JavaScript.
Make the position: absolute; for the both .points and .lines.


.points {
 position: absolute;
 border: 2px solid red;
 border-radius: 50%;
 opacity: 1;
}

.lines {
 position: absolute;
 border: 1px solid white;
 height: 0;
 opacity: 1;
}

Add additional styling as your taste.

3. JavaScript:

(1) create variables

select #container and #results using DOM.
create an object with two arrays to store X and Y coordinates of the user's click points.
create two arrays to store created div elements points and lines.


let container = document.querySelector("#container");

let results = document.querySelector("#results");
let currentResult = document.querySelector("#current-result");
let totalResult = document.querySelector("#total-result");

let coordinates = {
  coordX: [],
  coordY: []
};

let points = [];
let lines = [];

(2) addEventListener() to the container

store X and Y coordinates in the coordinates object.
call the functions createPoints() then createLines() within the callback function.


container.addEventListener("click", (e) => {
  coordinates.coordX.push(e.x);
  coordinates.coordY.push(e.y);

  createPoints(e.x, e.y);

  let prevX = coordinates.coordX[coordinates.coordX.length - 2];

  let prevY = coordinates.coordY[coordinates.coordY.length - 2];

  if (coordinates.coordX.length > 1) {
    createLines(prevX, prevY, e.x, e.y);
  }
});

(3) createPoints() function

Create a for-loop that runs from 0 to the number of clicked points.
Create a div in each iteration inside the loop.
Set its className as points.
Set left and top coordinates of the div (e.x and e.y)
Append it to the #container


function createPoints(posX, posY) {
  for (let i = 0; i < coordinates.coordX.length; i++) {
    points[i] = document.createElement("div");
    points[i].className = "points";
    points[i].style.left = `${coordinates.coordX[i]}px`;
    points[i].style.top = `${coordinates.coordY[i]}px`;

    container.appendChild(points[i]);
  }
}

(4) createLines() function

Okay, We reach the more important part of this project. Because here we have to use some math! I don't suppose to be your math teacher, but these are the steps we're going to follow.

Get the distance between the two points.


  let distance = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));

Find the middle point of the two points.


// X and Y coordinates of the middle point

    let midX = (x1+x2)/2;
    let midY = (y1+y2)/2;

Draw a horizontal line of that distance across the midpoint.


 lines[i].style.width = `${distance}px`;
 lines[i].style.left = `${(midX - (distance/2))}px`;
 lines[i].style.top = `${midY}px`;

Calculate the angle to rotate it around the middle point to fit it into the actual two points.


/* get the inclination in radian unit and then convert it into degree */

 let inclinationInRadian = Math.atan2(y1-y2, x1-x2);
 let inclinationInDegree = (inclinationInRadian * 180)/ Math.PI;

Rotate the line.


  lines[i].style.transform = 'rotate('+inclinationInDegree +'deg)';

Here is the complete createLines() function.


function createLines(x1, y1, x2, y2) {
  let distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));

  let midX = (x1 + x2) / 2;
  let midY = (y1 + y2) / 2;

  let inclinationInRadian = Math.atan2(y1 - y2, x1 - x2);
  let inclinationInDegree = (inclinationInRadian * 180) / Math.PI;

  for (let i = 0; i < coordinates.coordX.length; i++) {
    lines[i] = document.createElement("div");
    lines[i].className = "lines";

    lines[i].style.width = `${distance}px`;
    lines[i].style.left = `${midX - distance / 2}px`;
    lines[i].style.top = `${midY}px`;
    lines[i].style.transform = "rotate(" + inclinationInDegree + "deg)";

    container.appendChild(lines[i]);
  }

  currentResult.innerHTML = `<strong>Current Result:-</strong> <br>`;

  totalResult.innerHTML = `<strong>Total Result:-</strong> <br>`;

  getDistance(distance);
}

(5) getDistance() function

Now we have the distance in pixels, so we should convert it to the centimeter.

1 pixels = 0.0264583333cm
Distance in centimeter = distance in pixels × 0.0264583333


function getDistance(distance) {
  let pixelToCm = distance * 0.0264583333;
  pixelToCm = Number(pixelToCm.toFixed(2));

  totalDistance += pixelToCm;
  totalDistance = Number(totalDistance.toFixed(2));

  currentPath += `Line ${++lineCounter}:- ${pixelToCm}cm<br>`;

  totalPath += `${totalDistance}cm<br>`;

  currentResult.innerHTML += currentPath;

  totalResult.innerHTML += totalPath;

  results.scrollTop = results.scrollHeight;
}

Below is the live demo @CodePen.

NOTE:
This project described above only can be used for practicing purposes, so it might not cover all the cases which come with real web projects such as, responsiveness, browser compatibility.

Conclusion

Congrats! we have finished with the project and, now only remains is to measure the distance between your favorite stars!

So count stars, measure distance and have fun.

PS: if you enjoy this article, you can support me at ko-fi. I always appreciate your support and, it encourages me to keep going.

Happy Coding!