Introduction to D3.js Library

Introduction to D3.js Library

D3.js stands for Data-Driven Documents is front-end visualization library in javascript for creating interactive and dynamic web-based data visualizations, it also has an active community behind it for which it is very famous. Read on to learn more about D3.js and how to quickly start coding it.

What is D3.js?

D3.js stands for Data-Driven Documents is front-end visualization library in javascript for creating interactive and dynamic web-based data visualizations, it also has an active community behind it for which it is very famous. It uses HTML, CSS a, and SVG to bring data to life and mainly it is for manipulating DOM objects, focusing on objects and concepts, not just the pre-built charts and graphs. It is mostly compatible with popular web browsers, like Chrome or Firefox.

It can even create different shapes arcs, lines, arcs, rectangles, and points. The essential feature of d3.js that it provides the beautiful fully customized visualizations. It is a suite of small modules for data visualization and analysis. These modules work well together, but we should pick and choose the parts that we only need. D3 most complex concept is selections and if we are using a virtual DOM framework like React (and don’t need transitions), so don’t need selections at all.

A basic Introduction how to use D3.js?

So, we need to create a visualization with d3, set up workspace inside a container, create x and y-axes, process data and draw graphs and charts using functions. We can also add different attributes and styles for datapoints or lines. When creating basic charts and graphs, D3 is not complicated, for customization need to add more code. More complex visualizations need lots of logic, layouts, and data formatting as these are the keys that we want our visualization to speak for.

D3 also can be paired with a WebGL library, which makes more standard capabilities regarding dynamic and interactiveness. We can even animate one element, based on transitions similar to those done in CSS.

Why we use D3.js?

Today different kind of charting libraries and BI tools are available for creating visualizations, so the question arises why to use d3.js for creating visualizations, because of its key features versatility, full customization, and interactive visualization, even the exactly the data visualization that can be made by graphic designers.

Data visualization is very hard then we think. It is easy to draw shapes, but sometimes visualizations require full customization such as a need to bring subtle ticks and different smooth curves between data points. That is where d3.js comes in that allows us to explore the design space quickly. It is also not only a charting library but acts as a versatile coding environment that can be best used for making complex visualizations.

When to use D3.js?

As d3.js becomes complicated sometimes, programming in d3 should be done from scratch and requires a steep learning curve, but due to its significant advantages, we need to use it and get to decide when to use that library. We should use D3.js when our web application is interacting with data. We can explore D3.js for its graphing capabilities and make it more usable. It can be added to the front end of our web application as the backend server will generate the data and front-end part of the application where the user interacts with data use D3.js.

Some of the use cases of D3.js

We above discussed about data visualization basics, d3.js front-end visualization library concepts, where and when to approach d3.js library, now go through some of the use cases of d3 as d3 with complex code also provide reusable code that can be used again in other visualizations, d3 also can be used to react, storytelling with customized and visualizations the most crucial use case can also be achieved with d3. Some of the use cases of the d3 library are discussed below:

Reusable charts with D3.js

During creating visualizations, we also need to take care of reusability of the charts or anything that made in visualization. Let’s discuss how D3.js library provide the reusable charts, and firstly we should know what can be a reusable chart, some of the characteristics that a reusable chart has –

Built charts in an independent way –

We need to make all charts elements associated with data points of dataset independently. This has to do with the way D3 associates data instances with DOM elements.

  • Repeatable – Instantiate the chart more than one time, as chart visualizing chart with different datasets.
  • Modifiable – Source code of charts can be easily be refactored by other developers according to different needs.

Configurable

We need to modify only the appearance and behavior of the graph without changing the code.

Some of the best practices to make reusable charts with d3.js

Built charts in an independent way

To make the chart reusable with d3.js, it should be repeatable, modifiable, configurable and extensible.

To make chart repeatable in d3.js we can use the object-oriented property and approach chart.prototype.render and also use this property during a call the functions.

To make the modifiable chart make source code with simple transformations with d3.js built-in functions, so that path to modification in the system becomes clear and easy to be modified by the other developers.

Easy modification path can be achieved by using various selection functions .enter(), .exit() and .transition().

enter() selection – When a dataset contains more items than the DOM elements, data items stored in entering the selection.

For example –

We need to make some modification to our dataset. We add one more data item to the array, as our bar chart contains still only four bars of data, that time choose data element from entering the selection.

A room visualization, with several chairs that are DOM elements and guests that are data items, sit on the chairs which are data joined with DOM elements. The enter selection is the waiting area for data items that enter the room but cannot be seated, as there are not enough chairs. As to arrange more chairs, where to create new bar div and add it to DOM is what done by d3 selector enter.

exit() selection – As we discuss how we could add new items to a data set dynamically and update the visualization. In the same way, we can remove items from the data set and allow D3 deal with the corresponding DOM elements or, following our room/chair method, take away those chairs that are not needed anymore because some guests decided to leave. The exit selection does this. It contains only those data items that are about to leave the data set.

Configurable –

Consider the visualization of the bubble chart, to make it reusable, only the size of the chart and input dataset needs to be customized.

Define Size of the chart

   var bubbleChart = function () {
	     var width = 500,
    height = 500;
    function bubblechart(select){
      }
    return chart;
      }

We want to create charts of different sizes without the need to change the code. Create the charts as follows

     bubble.html
     var chart = bubbleChart().width(500).height(500);

Now we will define accessors for the width and height variables in the bubble_chart.js file –

    // bubble_chart.js
    var bubbleChart = function () {
    var width = 500
    height = 500;
    function chart(select){
    }

    chart.width = function(val) {
        if (!argu.len) { return width; }
        width = val;
        return chart;
       }

    chart.height = function(val) {
        if (!argu.len) { return height; }
        height = val;
        return chart;
      }

      return chart;
       }
Role of Data Visualization in D3.js

As over the last few years, data visualization growing more and more in a day to day experience. We see data visualization daily in our social media, news articles and every day at work. Data visualization is that it translates quantitative data into graphic representations using libraries i.e D3.js Library. Data visualization includes tasks of designing, creating and deploying is not just a single profession at all but shows a combination of work of designers, analysts, engineers, and journalists. As for data visualization tasks engineers use different javascript libraries, and analysts use various business intelligence tools.

Nowadays we able to collect and analyze more and more data than ever before. Big data is a hot topic even now and a major to study. But to be able to understand and digest all these kind of numbers, we need visualization and a platform or framework that makes all kinds of visualizations possible, no matter how much data there is need to process, that’s where d3.js and other visualizations tools come in.

Only plotting the charts with visualization libraries and tools is not enough; we need storytelling art here also. As most of the libraries and tools exist here not provides the effective display of quantitative information, where D3.js most successful library comes in that already tells half of the story when we start developing the code for it.

Data Visualization using D3.js with React

As D3 enter, exit and update pattern provides full control to the developer for managing the DOM. We can manage when should element is added to the screen and when it is removed and how to update the element. It is working fine when the updates of data elements are simple, but it gets complex when there exists a lot of data elements to keep track of, and the data elements to update vary from one user action to another. One solution to manage the DOM data elements is manually counted which elements require updates, but it also becomes complex we could not keep the count in our heads, as that is manually defining the DOM tree which is not recommended, so there is need to integrate react and D3 together for complex visualizations.

As react that updates virtual DOM are exactly like D3 enter, exit and update pattern. So let’s use d3 with react, react for what to enter and exit operations and d3 for update patterns. Discuss react with d3 implementation in a few steps –

Drawing Basic Shapes With D3

Let’s start with creating the basic shapes in D3. But we can’t do that just by adding the SVG shapes directly to the HTML page, SVG shapes require an SVG container. All the shapes inside that container can be relatively adjusted henceforth — for example, change in one curve affecting another curve or changes in coordinates changing the shapes of curves or positions of points inside that container.

We can add the container to the body of HTML page with the append() method and then adding shapes to that container. Here, the container is 600px wide and high.

var canvas = d3.select("body")
                   .append("svg")         //SVG container
                   .attr("width",  600)   //Width of the container
                   .attr("height", 600)   //Height of the container

var circle = canvas.append("circle")
                    .attr("cx", 250)      //Circle at the (250,250) coordinates
                    .attr("cy", 250)
                    .attr("r", 60)        //Radius of the circle is 50px
                    .attr("fill", "green")//Fill the circle with red color

var rect = canvas.append("rect")           // By default the shapes are drawn from upper left
                   .attr("width", 300)     //corner of the SVG container
                   .attr("height", 100)
                   .attr("fill", "red");

var line =canvas.append("line")
                   .attr("x1", 0)
                   .attr("y1", 40)
                   .attr("x2", 400)
                   .attr("y2", 400)
                   .attr("stroke", "yellow")
                   .attr("stroke-width", 10);
Binding Data With Visualization

After learning to draw the basic shapes in D3, we need to draw meaningful curves on the screen that are influenced by the data. To do that, we need to bind the data with DOM elements that can visually represent the data in any form (bar chart, pie chart, histogram, geographical graphs, etc.). In the real world, the actual data is large and most probably in a JSON or CSV file, but here, for demo purposes, data is taken in the array of some elements.

var dataArray = [60, 25, 45, 30];

This data array will be used to draw a simple histogram. The process of drawing a histogram is explained line by line. The below code is assumed to be inside the `` tags.

var array = [60, 25, 45, 30];

var canvas = d3.select("body")
               .append("svg")
                 .attr("width", 600)
                 .attr("height", 600);

var bars = canvas.selectAll("rect") //Empty selection
                   .data(array)
                   .enter() //This method holds the placeholder for array elements
                     .append("rect")
                     .attr("width", function(d) { return d*10; })
                     .attr("height", 50)
                     .attr("y", function(d, i) { return i * 51 })

The code written for bars is of more significance, as now it is known how canvas is attained. The line canvas.selectAll(“rect”) is a little confusing because there is no DOM element named rect to make a selection. This line returns the empty selection, which can be used to draw individual bars for our histogram. The .data() method binds our data to whole selection. To fill each bar of the histogram, each element of the array is binded to one empty selection, and it is done with the .enter() method. There is more to explain about the .enter() method, but for now, just go with the flow. After binding each element of the array with the empty bar selection, we give shape to our bars with width and height attributes.

For width, we can use a fixed value, but that behavior won’t work for for us because we want to give width to each bar based on the data elements. To do that, the anonymous function is passed with the element from the array and it returns the width of an individual bar. The height of the bars is fixed. The attribute yis really interesting because, if not given, all the bars will lie over each other. This y attribute gives the vertical position of the bar relative upper-left corner of the canvas.

So now, you know the basics of D3.js. Thank you for reading and happy coding !

JavaScript Tutorial: if-else Statement in JavaScript

JavaScript Tutorial: if-else Statement in JavaScript

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.

Decision Making in programming is similar to decision making in real life. In programming also we face some situations where we want a certain block of code to be executed when some condition is fulfilled.
A programming language uses control statements to control the flow of execution of the program based on certain conditions. These are used to cause the flow of execution to advance and branch based on changes to the state of a program.

JavaScript’s conditional statements:

  • if
  • if-else
  • nested-if
  • if-else-if

These statements allow you to control the flow of your program’s execution based upon conditions known only during run time.

  • if: if statement is the most simple decision making statement. It is used to decide whether a certain statement or block of statements will be executed or not i.e if a certain condition is true then a block of statement is executed otherwise not.
    Syntax:
if(condition) 
{
   // Statements to execute if
   // condition is true
}

Here, condition after evaluation will be either true or false. if statement accepts boolean values – if the value is true then it will execute the block of statements under it.
If we do not provide the curly braces ‘{‘ and ‘}’ after if( condition ) then by default if statement will consider the immediate one statement to be inside its block. For example,

if(condition)
   statement1;
   statement2;

// Here if the condition is true, if block 
// will consider only statement1 to be inside 
// its block.

Flow chart:

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If statement 

var i = 10; 

if (i > 15) 
document.write("10 is less than 15"); 

// This statement will be executed 
// as if considers one statement by default 
document.write("I am Not in if"); 

< /script> 

Output:

I am Not in if
  • if-else: The if statement alone tells us that if a condition is true it will execute a block of statements and if the condition is false it won’t. But what if we want to do something else if the condition is false. Here comes the else statement. We can use the else statement with if statement to execute a block of code when the condition is false.
    Syntax:
if (condition)
{
    // Executes this block if
    // condition is true
}
else
{
    // Executes this block if
    // condition is false
}


Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate If-else statement 

var i = 10; 

if (i < 15) 
document.write("10 is less than 15"); 
else
document.write("I am Not in if"); 

< /script> 

Output:

i is smaller than 15
  • nested-if A nested if is an if statement that is the target of another if or else. Nested if statements means an if statement inside an if statement. Yes, JavaScript allows us to nest if statements within if statements. i.e, we can place an if statement inside another if statement.
    Syntax:
if (condition1) 
{
   // Executes when condition1 is true
   if (condition2) 
   {
      // Executes when condition2 is true
   }
}

Example:

<script type = "text/javaScript"> 

// JavaScript program to illustrate nested-if statement 

var i = 10; 

if (i == 10) { 

// First if statement 
if (i < 15) 
	document.write("i is smaller than 15"); 

// Nested - if statement 
// Will only be executed if statement above 
// it is true 
if (i < 12) 
	document.write("i is smaller than 12 too"); 
else
	document.write("i is greater than 15"); 
} 
< /script> 

Output:

i is smaller than 15
i is smaller than 12 too
  • if-else-if ladder Here, a user can decide among multiple options.The if statements are executed from the top down. As soon as one of the conditions controlling the if is true, the statement associated with that if is executed, and the rest of the ladder is bypassed. If none of the conditions is true, then the final else statement will be executed.
if (condition)
    statement;
else if (condition)
    statement;
.
.
else
    statement;


Example:

<script type = "text/javaScript"> 
// JavaScript program to illustrate nested-if statement 

var i = 20; 

if (i == 10) 
document.wrte("i is 10"); 
else if (i == 15) 
document.wrte("i is 15"); 
else if (i == 20) 
document.wrte("i is 20"); 
else
document.wrte("i is not present"); 
< /script> 

Output:

i is 20

Learn JavaScript Crash Course | Best Javascript Tutorial

Learn JavaScript Crash Course | Best Javascript Tutorial

Take the first steps to mastering JavaScript, one of the fastest growing languages globally today. Because of its flexibility, it is there everywhere today: be it the web, mobile and or the desktop. Want to be one of the over 50,000 people who have benefited from this course? Join the learning fun!

Description
So you need to learn Javascript and learn it fast!

Are you a designer who's now adding JavaScript to your knowledge arsenal? Are you a student who needs a fast and high-quality JavaScript course? Are you a traditional developer trying to learn the basics? Are you applying for a job that requires JavaScript.

JavaScript is not only emerging as the most important language to know, it's flexibility is unique. With JavaScript being deployed on the web, mobile and even the desktop this is the one language that all technologists need to know. As a JavaScript developer you'll find opportunity around every corner!

This is a crash course meaning it moves quick. Every meaningful lecture is chock full of information that you can immediately apply to your coding work. Taught by a master instructor, you'll find that Javascript: Crash Course is a extremely efficient way to learn.

Each lecture course lecture includes the actual code developed by the master instructor during the lecture. No more staring at a blank screen when figuring out how to practice use the included code as a starting point.

The course culminates with developing a full quiz application called Trivia. You'll learn from building out this application yourself and modifying it and making it your own!

Join the over 500,000 learners who've enjoyed LearnToProgram courses. At LearnToProgram, we're teaching the world to code!

Who is the target audience?

Newbies Who Want to Learn Javascript Quickly
Current Programmers who need a Crash Course in Javascript
Those with Limited Time who Want to Learn Alot
Teacher and Students
Designers and Developers who Want to Learn JavaScript Efficiently
Basic knowledge
Foundational HTML
Text editor
Web Browser
What will you learn
Understand and write Javascript Code
Run Javascript Code in a Browser
Choose and Utilize Tools Used by Professional Javascript Developers
Understand the Purpose of Javascript Variables
Declare and Initialize Javascript Variables
User Variables with Strings and Numbers
Perform Mathematical Operations with Javascript
Obtain input from the User via Alert Boxes
Obtain input from the User via Forms
Understand Simple Conditionals with If
Create Complex Conditionals with If Else If
Create While Loops
Create For Loops
Understand the Purpose and Power of Javascript Objects
Use Event Objects to Track Events that Occur
Use the Javscript Date Object to Track Dates
Use the Javascript String Object to Manipulate Strings
Include Audio and Video Content with the Media API
Use the XMLHttpRequest() Object to Exchange Data
Create a Basic Ajax Request
Parse JSON code

How to Send Emails From Javascript

How to Send Emails From Javascript

Sending an email through your web app is some times a hectic process for beginners. In this article, I will walk you through a simple JavaScript task assignment app.

Sending an email through your web app is some times a hectic process for beginners. In this article, I will walk you through a simple JavaScript task assignment app. The user can add the assignee name, email and task description and can simply send email to the assignee with task details using a library called email.js. I will also explain how you can persist the task using local storage.

Prerequisites

In order to follow the article, you should be familiar with HTML, Bootstrap and JavaScript. You can use any code editor to follow along.

Learning outcomes
  • JavaScript DOM Traversal
  • Using JavaScript Library
  • Local Storage
Final Look of the app

Bootstrap 4 cdn

I will be using Bootstrap 4’s CDN for the app. You can either use it or may use some other way to add it to your app.

 <!-- Add this in <head> element-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Add this before closing body tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 
Developing app’s front-end

Create a file named index.html and add the following piece of code.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>JS Email</title>
</head>

<body>
    <header class="jumbotron">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 text-center">
                    <h1>Send Email through JavaScript</h1>
                </div>
            </div>
        </div>
    </header>
    <div class="container-fluid">
        <div class="row">
            <div class="col col-sm"></div>
            <div class="col-sm-6 col-12">
                <label for="task">Task Description: </label>
                <input type="text" id="task" class="form-control" required>
                <div class="row">
                    <div class="col-sm-6 col-12">
                        <label for="assigneeName">Assignee Name: </label>
                        <input type="text" id="assigneeName" class="form-control" required>
                    </div>
                    <div class="col-sm-6 col-12">
                        <label for="assigneeEmail">Assignee Email:</label>
                        <input type="email" id="assigneeEmail" class="form-control" required>
                    </div>
                </div>

                <label for="dueDate">Due Date: </label>
                <input type="date" id="dueDate" class="form-control" required>
                <button type="button" class="btn btn-success mt-1">Add Task</button>
            </div>
            <div class="col col-sm"></div>
        </div>
        <hr>
        <div class="row">

        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 
</body>

</html>

The above given code snippet setups the layout of the app. Now let us add the functionality. After filling the required information, when the user clicks on the Add Task button, the task should be added to the DOM (Document Object Model) as a Bootstrap card. For this purpose, let’s write JavaScript code first.

Adding JavaScript

Let’s add the JavaScript to bring life to the app. Create a file named app.js and add the code given below.

//add button
const addBtn = document.querySelector('button');
//the row where cards will be appended
const taskDiv = document.querySelectorAll('div.row')[3];
//Retrieve from Local Storage 
taskDiv.innerHTML = localStorage.getItem('tasks');
//task description input element
const taskDescription = document.querySelector('#task');
//assignee name input element 
const assigneeName = document.querySelector('#assigneeName');
//assignee emal input element
const assigneEmail = document.querySelector('#assigneeEmail');
//due date input element
const dueDate = document.querySelector('#dueDate');

//Click listener for add button
addBtn.addEventListener('click', () => {
    //Create a new div
    let div = document.createElement('div');
    //Add class to div
    div.className = 'col-12 col-sm-4 mt-1';
    //Create a div for bootstrap card
    let card = document.createElement('div');
    //Add card class
    card.className = 'card';
    //Create card head
    let cardHead = document.createElement('div');
    //add card header class 
    cardHead.className = 'card-header';
    //create card body
    let cardBody = document.createElement('div');
    cardBody.className = 'card-body';
    //create card footer
    let cardFoot = document.createElement('div');
    cardFoot.className = 'card-footer';
    //Append the card components to the card div
    card.appendChild(cardHead);
    card.appendChild(cardBody);
    card.appendChild(cardFoot);
    //Create h2 Element for assignee name display
    let name = document.createElement('h2');
    //get value from name input field
    name.className = 'name';
    //due date element
    let datee = document.createElement('h3');
    //get value from date input field
    datee = dueDate.value;
    //Set assignee name and date
    name.innerHTML = assigneeName.value + '<small class="text-danger pl-1">Due: ' + datee + '</small>';
    cardHead.appendChild(name);
    //Create element for p which is task description
    let desc = document.createElement('p');
    desc.textContent = taskDescription.value;
    //Append the description to card body element
    cardBody.appendChild(desc);
    //Create a button for card to send email
    let sendBtn = document.createElement('button');
    sendBtn.className = 'btn btn-info';
    sendBtn.textContent = 'Send Mail';
    //Assign the data-email attribute to store the email value
    sendBtn.setAttribute('data-email', assigneEmail.value);
    cardFoot.appendChild(sendBtn);
    div.appendChild(card);
    taskDiv.appendChild(div);
    //store to local storage
    localStorage.setItem('tasks', taskDiv.innerHTML);
});
});

The above piece of code is doing the following things:

  • It gets the values from the input fields.
  • A click listener is written for click event of Add Task button.
  • The click listener dynamically adds the new task card.
Setting Up the emailjs account for sending email

Sign up for the account here.

Add the Personal Email Gmail as service and Connect your account.

Provide the required details

Click on the Email Templates tab and Add New Template with name Task.

Set the email template as shown in the figure below:

Click on the Installation option as shown in the picture below and add the code snippet to **** of your index.html file.

Also add the app.js file to your index.html file before the closing tag of body.

Now, in your app.js file, add the following piece of code:

taskDiv.addEventListener('click', function() {
    if (event.target.tagName == 'BUTTON') {
        let p = event.target.parentElement.parentElement;
        let n = p.firstElementChild.textContent;
        let nm = (n.substr(0, n.indexOf("Due:")));
        let t = p.children[1].firstElementChild.textContent;
        console.log(t);
        var templateParams = {
            email: event.target.getAttribute('data-email'),
            name: nm,
            task: t
        };
        emailjs.send('default_service', 'task', templateParams);
    }
});

The above given code sets the email parameters to be sent.

This is how your index.html and app.js file will look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        (function() {
            emailjs.init("YOUR USER ID");
        })();
    </script>
    <title>JS Email</title>
</head>

<body>
    <header class="jumbotron">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 text-center">
                    <h1>Send Email through JavaScript</h1>
                </div>
            </div>
        </div>
    </header>
    <div class="container-fluid">
        <div class="row">
            <div class="col col-sm"></div>
            <div class="col-sm-6 col-12">
                <label for="task">Task Description: </label>
                <input type="text" id="task" class="form-control" required>
                <div class="row">
                    <div class="col-sm-6 col-12">
                        <label for="assigneeName">Assignee Name: </label>
                        <input type="text" id="assigneeName" class="form-control" required>
                    </div>
                    <div class="col-sm-6 col-12">
                        <label for="assigneeEmail">Assignee Email:</label>
                        <input type="email" id="assigneeEmail" class="form-control" required>
                    </div>
                </div>

                <label for="dueDate">Due Date: </label>
                <input type="date" id="dueDate" class="form-control" required>
                <button type="button" class="btn btn-success mt-1">Add Task</button>
            </div>
            <div class="col col-sm"></div>
        </div>
        <hr>
        <div class="row">

        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script> 
    <script src = "app.js"></script>
</body>
</html>

app.js

//add button
const addBtn = document.querySelector('button');
//the row where cards will be appended
const taskDiv = document.querySelectorAll('div.row')[3];
//Retrieve from Local Storage 
taskDiv.innerHTML = localStorage.getItem('tasks');
//task description input element
const taskDescription = document.querySelector('#task');
//assignee name input element 
const assigneeName = document.querySelector('#assigneeName');
//assignee emal input element
const assigneEmail = document.querySelector('#assigneeEmail');
//due date input element
const dueDate = document.querySelector('#dueDate');

//Click listener for add button
addBtn.addEventListener('click', () => {
    //Create a new div
    let div = document.createElement('div');
    //Add class to div
    div.className = 'col-12 col-sm-4 mt-1';
    //Create a div for bootstrap card
    let card = document.createElement('div');
    //Add card class
    card.className = 'card';
    //Create card head
    let cardHead = document.createElement('div');
    //add card header class 
    cardHead.className = 'card-header';
    //create card body
    let cardBody = document.createElement('div');
    cardBody.className = 'card-body';
    //create card footer
    let cardFoot = document.createElement('div');
    cardFoot.className = 'card-footer';
    //Append the card components to the card div
    card.appendChild(cardHead);
    card.appendChild(cardBody);
    card.appendChild(cardFoot);
    //Create h2 Element for assignee name display
    let name = document.createElement('h2');
    //get value from name input field
    name.className = 'name';
    //due date element
    let datee = document.createElement('h3');
    //get value from date input field
    datee = dueDate.value;
    //Set assignee name and date
    name.innerHTML = assigneeName.value + '<small class="text-danger pl-1">Due: ' + datee + '</small>';
    cardHead.appendChild(name);
    //Create element for p which is task description
    let desc = document.createElement('p');
    desc.textContent = taskDescription.value;
    //Append the description to card body element
    cardBody.appendChild(desc);
    //Create a button for card to send email
    let sendBtn = document.createElement('button');
    sendBtn.className = 'btn btn-info';
    sendBtn.textContent = 'Send Mail';
    //Assign the data-email attribute to store the email value
    sendBtn.setAttribute('data-email', assigneEmail.value);
    cardFoot.appendChild(sendBtn);
    div.appendChild(card);
    taskDiv.appendChild(div);
    //store to local storage
    localStorage.setItem('tasks', taskDiv.innerHTML);
});

taskDiv.addEventListener('click', function() {
    if (event.target.tagName == 'BUTTON') {
        let p = event.target.parentElement.parentElement;
        let n = p.firstElementChild.textContent;
        let nm = (n.substr(0, n.indexOf("Due:")));
        let t = p.children[1].firstElementChild.textContent;
        console.log(t);
        var templateParams = {
            email: event.target.getAttribute('data-email'),
            name: nm,
            task: t
        };
        emailjs.send('default_service', 'task', templateParams);
    }
});

Create a new task and add the task. Like the following:

Click on Send Mail and the email will be sent to the user with the task details.

Thank you for reading, please comment if you have any question.