Writing better and high-quality code is essential. Better code makes software stable and seamless. Better written codes are also scalable and maintainable. And to write better code, code review is one of the most critical tasks. Code review is an excellent opportunity of improving code quality. In code review, developers ask for feedback before merging or deploying code to production. Getting a look by another pair of eyes into your code helps eliminate the blind spots left by one, and it also helps to find vulnerabilities before the code moves into production.

But when reviewing someone else's code, you always don't have to be an expert. Having experience with the programming language and a checklist can help you get started. Here is a list of things to keep in mind during code review.

Readability

Readable code is one of the essential features of good code. If a code is easy to read, it is easy to understand, making it easy to debug and maintain. Readable code means understanding what the piece of code does in the big picture by seeing the input and output of the code.

Unreadable code can make the work of finding a bug or maintaining a codebase lot more complicated. It is a huge technical debt. It can consume a lot of time for a developer or a team. In the long run, to make the codebase more readable, aka understandable, it is possible that they either break the system unintentionally while changing the code or delete the whole code and start from scratch.

Breaking down the codebase into smaller chunks can be a great way to start making a codebase understandable—separate codes by concerns. Long classes, functions, or methods can be tough to understand and hard to maintain. Break long classes, methods, or functions into smaller chunks of codes.

Another way to make code more readable is to naming correctly. Naming the methods or functions, classes or variables is a crucial thing to do. Names should be self-explanatory. It makes the code more understandable. If you are using abbreviations for any of your variables, ensure proper feedback is left for that.

Functionality

Functionality is another major important thing. The code has to do what it is intended to do. If the code is not doing what was intended, there is no reason to keep the unnecessary code. When we write code, it is essential to keep in mind that the end-user is both the developer and the user. Because, in the future, the developer is also going to use the code.

When reading through the code, it is essential to care about the edge cases and check if any bug is visible to the naked eyes.

It is tough to understand just by reading a code when a code has user-facing changes, like UI changes. In such cases, it is good to ask for a demonstration of the code change.

It is also essential to think about functionality when some parallel programming is going on. Because, in such cases, that could cause deadlocks or race conditions. These kinds of issues are hard to find just by reading the code. It is important to think through such cases carefully and make sure that these cases are not introduced.

Security

A security-centered mindset when writing code is very important. Prioritizing application security is very important. When reviewing the application code, check if the code covers the OWASP top ten. Vulnerabilities can also be introduced through third-party libraries or modules. You have to be aware of that too. Don't use out-of-date tools or tools that have known security issues. A small security bug can cost a lot of harm to a company's reputation.

Security itself is a huge topic. And putting yourself in someone else's shoes can help here. You have to think about what paths you would've chosen to steal data from the application. Thinking in such a way can help you find vulnerabilities in the code when reviewing. Make sure you also check for some proper security handling like

• Proper exception handling
• Security Logging
• If data encryption is handled correctly or not

Maintainability

The IEEE Standard Glossary of Software Engineering Terminology defines maintainability as,

The ease with which a software system or component can be modified to correct faults, improve performance or other attributes, or adapt to a changed environment.

Maintainable software makes it easy to remove bugs or add features without introducing new bugs to it. Maintainable code improves usability. In the long run, if the codebase needs to be learned by a new developer, an unmaintained codebase can cost a huge amount of time and can add a lot of technical debt.

Maintainable code means it also implements architectural principles like DRY, SOLID, etc. And it also uses design patterns and known algorithms to solve appropriate problems.

A maintainable code has to be well-documented. Check if the code README or the changelog is updated properly. If proper comments are utilized. When using comments, it is important to remember that comments must express why a piece of code exists rather than what the code does. The comments should always be made as simple as possible. However, in cases of exceptions like regular expressions or complex algorithms, we have to break this rule and explain the code. It is also essential to look for unnecessary comments that need to be removed.

Consistency is another thing to notice during the check of maintainability. Consistent code is maintainable. Check with the style guide of the company and be consistent with it. Consider the style guide as the absolute authority. And the code change should be followed by that. Though, there may be some cases where the style guide makes recommendations rather than declaring requirements. In such cases, it is good to be biased towards the style guide. And, if no rule is applied, then the code change should be made consistent with the existing code.

Performance

Checking for all the performance optimization is another important thing to have in your code review checklist. Performance has become one of the top-most priorities in building modern apps.

The first thing to check is, whether the code change is negatively impacting the performance of the existing code. Long database queries, unoptimized resources, or multiple unnecessary API calls can make the performance slower. Enabling lazy loading whenever possible is another performance optimization check. Also, caching should be properly used and optimized. You should also clearly check that none of the resources that are not used, is loaded, checking other than that make sure the code change relies on third-party-libraries as low as possible. Also, when working with the DOM, make sure the DOM reflow is minimized. Check the code for memory leaks. Memory leaks can be a huge contributor to performance issues. Loops are also a great contributor to performance. Making simple changes like calculating the array length outside a loop can help to boost performance. Look for such improvement areas.

Also, using tools like profilers can help to check for performance optimization checks.

Anti-patterns

An anti-pattern is a common response to a recurring problem that is usually ineffective and risks being highly counterproductive. The term, coined in 1995 by computer programmer Andrew Koenig, was inspired by the book Design Patterns, which highlights a number of design patterns in software development that its authors considered to be highly reliable and effective. (Wikipedia)

When working with junior developers, anti-patterns is a common pitfall that they fall for. Anti-patterns, as opposed to design patterns, is considered as bad practice in programming. For example, polluting the global namespace is an anti-pattern. When reviewing code change, you make sure that the code has no global variables. Polluting the global namespace can result in name collision. When the codebase becomes large, this can create a huge issue.

Extending the Object prototype in JavaScript is considered another bad anti-pattern. Extending the Object.prototype may seem helpful at times but when multiple teams start to manage the codebase, it becomes complicated and can create unknown side effects.

Knowing the possible anti-patterns in JavaScript can be really beneficial during code review.

Reliability

Reliability describes how fault-tolerant the code is. When things go south, reliable code shields the user experience from being ruined as much as possible. When writing code, we have to keep in mind that things will fail, resources will not load properly, API requests may return 500 requests occasionally. Writing codes keeping faults in mind can help build fault-tolerant code.

Reusability

Code reuse is a development process geared towards reusing existing code. This reused-based development process has gained popularity because it can lower the maintenance cost and increase the code quality.

Code reusability has multiple benefits. Like, fast development speed. Reusable components can be easily used across the codebase that can increase the development speed.

Dependability is another benefit of having a reusable code. A reusable code component must be well tested and its bugs and faults have been fixed over time.

Though, having its own benefits, it's always not a good idea to make every component reusable. Abstraction only when necessary is very important otherwise making a component that is not reused can increase the maintainability burden. It also takes more time to build a reusable component. Keeping all this in mind, check if the code change has only necessary reusable code components, or if there is any scope to make a reusable component.

Tests

Testing plays a significant role in making a product successful. Because of this, writing good tests is extremely important. A flawed test can be more dangerous than carrying no tests. Passing tests makes a developer feel more confident to push the new code to the production repo. But it is important to check if the tests are written properly. There may be cases when the code is passing the test for the wrong reasons.

And when writing tests, the rules that apply for code review also apply. The tests should be readable, well-documented, maintainable, performant, and should follow patterns.

Also, don't just think about the test cases that are written. There may be edge cases for which test cases have been missed. Think about that too when reviewing.

Conclusion

Reviewing code properly is an important task because the code quality depends a lot on it. Following this checklist can help you better review the code. And also, appreciate the good things that you see in the code change. Tell the developer when they address your comments in a great way. Code reviewing should not just focus on mistakes, but also focus on appreciation and encouragement.

What Will We Learn?

• How to add CSS Variables
• How to add CSS styles using JavaScript
• Real-life use of the forEach function

The first step to start building our game is to build the markup. The markup styles are very basic. We will also not be focusing much on the CSS part because our main target from this article is to understand the JavaScript concepts behind it.

Tic Tac Toe Game - HTML Code:

I will not be discussing each markup style here.

<!DOCTYPE html>
<html lang="en">
   <head>        
      <meta charset="UTF-8">          
      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <title>Tic Tac Toe</title>

      <link rel="stylesheet" href="./styles.css">          
      <link rel="preconnect" href="https://fonts.gstatic.com">         
      <link href="https://fonts.googleapis.com/css2?family=Nerko+One&display=swap" rel="stylesheet">
      <script src="./script.js" defer></script>
   </head>
   <body>

      <div class="container">

         <h1 id="heading">Play</h1>               
         <h2 id="strategy"></h2>
         <button id="restart">Restart</button>

         <div id="board">                      
            <div class="box" id="0"></div>                     
            <div class="box" id="1"></div>                        
            <div class="box" id="2"></div>                        
            <div class="box" id="3"></div>                        
            <div class="box" id="4"></div>                        
            <div class="box" id="5"></div>                        
            <div class="box" id="6"></div>                        
            <div class="box" id="7"></div>                        
            <div class="box" id="8"></div>                    
         </div>

      </div>
   </body>
</html>

As you can see, we are integrating the styles.css file and a google font at the head section. We are also adding the script file with the defer keyword so that the javascript loads after the HTML completes loading. We are using two headings that will show when a player wins a game and using which combination he/she won. After the heading, we are adding a restart button that will restart the board. The cells of a Tic Tac Toe are built using nine div tags. All the div tags are grouped into a single div tag with id board. We are also assigning an ID to each of the cells. We are using 0 based indexing here. You will understand the reason when we jump to the JavaScript section. So, this is it with our HTML. Now, let's jump to the CSS Part.

Tic Tac Toe Game - CSS Code

Before we start writing any CSS code, you have to know about CSS custom property. CSS3 provides us the ability to declare custom properties and use them at multiple places in the CSS file. Any name starting with two hyphens(--) will be counted as a custom property in CSS. We can assign a value on the right-hand side of a custom property. It is like declaring variables and using their values at places. All the custom properties are declared in the root selector. For example,

:root {
  --text: #dbdfac;
  --bg: #2a1e5c;
  --btn-bg: #d7f171;
}

We are declaring all the custom properties here. You can see that all the properties start with two hyphens in front of them. Now to use these variables in our CSS file, we use the var() function to use them. See the snippet below to understand it.

h4 {
  color: var(--text);
  background-color: var(--bg);
}

You can see that we are passing the variable name inside the var function. Using this style, we can use CSS variables.

Now that you have understood what are CSS custom properties and how to use them, le's start styling the page.

:root {
  --text: #dbdfac;
  --bg: #2a1e5c;
  --btn-bg: #d7f171;
}

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

As you can see from the above code, we are first declaring the colors in the root selector. We are also resetting the margin and padding of our document. After declaring the variables, we are using the box-sizing: border-box property in our universal selector. The border-box property helps us when working with boxes in CSS. It prevents the horizontal and vertical scrollbars. After we are done with resetting our document, we will move to style the rest of the document.

We are using a google font of Nerko One as you may have noticed before. Our next target is to style the body of the document. The styling is very simple. We will just add a background-color, a text color, and a font-family in this section.

body {
  color: var(--text);
  background-color: var(--bg);
  font-family: 'Nerko One', cursive;
}

We are using our custom CSS properties here for the colors of the text and background color.

The next thing that we are going to style is the first heading. I will just paste the styles below and you will get an idea about what they do.

h1 {
  font-size: 80px;
  margin-bottom: 0;
  text-transform: uppercase;
}

The text-transform:uppercase property will convert the text into uppercase characters. Let's jump to the container section now. The container section holds all the text, buttons and divs of our document.

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

We are giving the container a height and a width of 100vh and 100vw respectively so that the container covers the complete viewport height and width. Then, to center everything inside it, we are using CSS flexbox. The display:flex will invoke the flexbox. The justify-content:center, and align-items:center will center all the elements horizontally and vertically in the viewport.

But, after applying up to this style, you'll find that all the elements are set up aligned with the horizontal line. To correct it, the flex-direction: column property is used. It will align the items along the column.

The next element that we have to style is the board ID. The board ID consists of all the boxes inside it. Our strategy here to position only three boxes in a row is to give the board ID a width. Whenever the boxes reach the width, it’ll wrap the next boxes in a new line. The width of the board will be divided by three to get the width required by each box.

#board {
  width: 60vw;
  display: flex;
  flex-wrap: wrap;
  font-size: 100px;
  margin-top: 40px;
}

As you can see, we are giving the board, a width of 60 viewport. We are using display: flex and flex-wrap: wrap so that the boxes wrap after reaching the width. We are also giving a font-size and a margin for the top here.

Now comes the interesting part - the boxes. As I have just told you, we have to divide the total width of the board by three. So, dividing 60 by 3 will give us 20. This 20 will be the height and width of each box of our board. We are also specifying the height because otherwise, it'll look odd.

.box {
  height: 20vh;
  width: 20vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text);
}

Here are the styles. Pretty similar to the container styles. I hope you get it. I know you can't see any output on the screen. For the lines, we will use JavaScript because it'll take less amount of time. The only thing that is left in styling our document is the restart button. I am not adding any hover effect or complicated styles. You can always edit and add your styles.

#restart {
  padding: 10px 20px;
  background-color: var(--btn-bg);
  border: none;
  border-radius: 20px;
  color: var(--bg);
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
}

I hope you understand what the above styles do. We have completed our CSS stylings. Now let's jump to the most important part of our game, the JavaScript section.

Tic Tac Toe Game - JavaScript Code

The first thing about writing our JavaScript file is to access the DOM elements in JavaScript. We will need a few things that will be manipulated in the game. Let's access the DOM.

const boxes = document.querySelectorAll('.box');
const text = document.querySelector('#heading');
const strategy = document.querySelector('#strategy');
const restartBtn = document.querySelector('#restart');

These four elements will be manipulated in our JavaScript. Now, let's move on to building our Tic Tac Toe board. Our aim to build the board is to add borders to the boxes. Now, which box should have which border? We will implement it using some logic.

In the first line of the above code, you can see that we are using the querySelectorAll property to access all the boxes. The querySelectorAll property returns an array of the elements. We will loop through each of the elements in the array and depending on some conditions we will add the borders to it. As you know, array indexes are zero-based. We will be creating a function that draws the board.

Let's call the function drawBoard. This function will not take any argument. It will add a bottom border to the elements whose indexes are less than 3. A right border will be added to those elements which are completely divisible by 3(index position 3, 6). The function will add a left border to those elements which give a modulus of 2(index position 2, 5, 8) and a top border will be added to all the elements that have an index position greater than 5. Now, if you look closely at the logic, you'll find that all of our required borders are covered using this theory. As I have mentioned earlier, we are going to create a function that will loop through each of the array elements. For this example, we will be using the forEach loop. We are using a forEach loop because while using a forEach loop to loop through an array, we can add a callback function to the loop. It can take three parameters. The first parameter is the current value, which is a required parameter, the second and third ones are the index and array.

const drawBoard = () => {
  boxes.forEach((box, i) => {
    let styleString = '';
    if (i < 3) {
      styleString += 'border-bottom: 3px solid var(--text);';
    }
    if (i % 3 === 0) {
      styleString += 'border-right: 3px solid var(--text);';
    }
    if (i % 3 === 2) {
      styleString += 'border-left: 3px solid var(--text);';
    }
    if (i > 5) {
      styleString += 'border-top: 3px solid var(--text);';
    }
    box.style = styleString;
    box.addEventListener('click', boxClicked);
  });
};

In our loop, we are passing the current value using the box parameter and the index using the i parameter. After each iteration, we are resetting the value of a variable called styleString. This styleString variable will be used to add the CSS styles. You can see that we are using some if conditions to check our logic. Depending on the logic, we are adding borders. The styles are stored inside the styleString variable. And after a box meets a condition, the CSS style is added using the box.style method. The style method in JavaScript is used to add CSS styles from JavaScript. Now, after calling your function if you reload your document, you will find that our board now looks like a tic tac toe board. We also have to add an event listener for the boxes. So, we will add box.addEventListener('click', boxClicked); this line before our forEach loop closes. We are listening to a click event and whenever the event is listened to, we call the boxClicked function. We will be creating this function now.

Before moving to build the boxClicked event, we have to define a few more variables on the top of our script file.

const spaces = [];
const tick_circle = 'O';
const tick_x = 'X';
let currentPlayer = tick_circle;

Here are the rest of the variables that we need now. The spaces variable is an empty array. You'll understand why we are declaring it in a little bit. Tic Tac Toe usually has an X and an O for playing. We are defining those two inside two separate variables. And a variable called currentPlayer that sets the currentPlayer to O at the start of a game.

Now, let's jump into building our boxClicked function. The boxClicked function will take the event as an argument. Let me first paste the code for you, then I'll explain it.

const boxClicked = (e) => {
  const id = e.target.id;
  if (!spaces[id]) {
    spaces[id] = currentPlayer;
    e.target.innerText = currentPlayer;

    if (playerWon()) {
      text.innerText = `${currentPlayer} has won!`;
      restart();
      return;
    }

    if (playerDraw()) {
      return;
    }
    currentPlayer = currentPlayer === tick_circle ? tick_x : tick_circle;
  }
};

So, first of all, we are assigning a variable called id, which will store the ID of the clicked box. The event.target.id gives us the ID of the div.

Then we are checking if the box is already filled. The !spaces[id] checks if the position is empty. And if it returns true, which means that the position is empty.

After finding that the position is empty, we assign the currentPlayer value to space. And then, inside the box, we assign the currentPlayer icon which can be "X" or "O". Once this condition is done, we check for another. This time we pass a function called playerWon inside the if statement, if the function returns true then we change the heading innerText depending on which player has won.

Then we call another function to restart our board. The return statement will take us out of the condition. Similarly, we also check depending on another function called playeDraw. In the last line of this function, we are just changing the currentPlayer icon depending on the last icon. It is checking if the currentPlayer icon is the circle, then we change it to "X", otherwise "O".

Let's now build the playerWon function. I have shown all the possible winning conditions in a Tic Tac Toe board.

We will be using these combinations to check if the player has won. So, for the first image our 0th index becomes constant. Then we can check if the player is also on index

• 0, 1 and 2
• 0, 3 and 6
• 0, 4 and 8

For the second image, the index position 8 becomes constant and the possible combinations will be

• 2,5 and 8
• 6, 7 and 8
• 0, 4 and 8 is already covered

And finally, for the index position 4, the combinations are

• 2, 4 and 6
• 1, 4 and 7
• 3, 4 and 5

Let's see the function now.

const playerWon = () => {
  if (spaces[0] === currentPlayer) {
    if (spaces[1] === currentPlayer && spaces[2] === currentPlayer) {
      strategy.innerText = `${currentPlayer} wins up to top`;
      return true;
    }
    if (spaces[3] === currentPlayer && spaces[6] === currentPlayer) {
      strategy.innerText = `${currentPlayer} wins on the left`;
      return true;
    }
    if (spaces[4] === currentPlayer && spaces[8] === currentPlayer) {
      strategy.innerText = `${currentPlayer} wins diagonally`;
      return true;
    }
  }
  if (spaces[8] === currentPlayer) {
    if (spaces[2] === currentPlayer && spaces[5] === currentPlayer) {
      strategy.innerText = `${currentPlayer} wins on the right`;
      return true;
    }
    if (spaces[6] === currentPlayer && spaces[7] === currentPlayer) {
      strategy.innerText = `${currentPlayer} wins on the bottom`;
      return true;
    }
  }
  if (spaces[4] === currentPlayer) {
    if (spaces[1] === currentPlayer && spaces[7] === currentPlayer) {
      strategy.innerText = `${currentPlayer} wins vertically on middle`;
      return true;
    }
    if (spaces[3] === currentPlayer && spaces[5] === currentPlayer) {
      strategy.innerText = `${currentPlayer} wins horizontally on the middle`;
      return true;
    }
    if (spaces[2] === currentPlayer && spaces[6] === currentPlayer) {
      strategy.innerText = `${currentPlayer} wins diagonally`;
      return true;
    }
  }
};

As you can see, we are checking each of the conditions that I mentioned before. If a condition satisfies, then we are setting the H2 value with the condition by which a game is won and finally we are returning true. Thereturn true value is important. Because, if you see the boxClicked function, we wait for the return value in our conditional statement.

Now let's create the draw function. The draw function that we are using here is very simple. If all the boxes are filled and no winning condition satisfies, then only we say that the match is drawn. I am using a different approach for this function. I am using a variable that will increment after each box is clicked. Because we have 8 boxes in total, if the counter becomes equal to 8, then we say that the match is drawn.

const playerDraw = () => {
  let draw = 0;
  spaces.forEach((space, i) => {
    if (spaces[i] !== null) draw++;
  });
  if (draw === 9) {
    text.innerText = `Draw`;
    restart();
  }
};

I think I don't have to explain any further here. The only thing that is left to our code now, is the restart function.

const restart = () => {
  setTimeout(() => {
    spaces.forEach((space, i) => {
      spaces[i] = null;
    });
    boxes.forEach((box) => {
      box.innerText = '';
    });
    text.innerText = `Play`;
    strategy.innerText = ``;
  }, 1000);
};

Here is our restart function. I am wrapping all the code inside the function into a setTimeout method. The setTimeout function waits for a defined amount of time and then executes whatever function is created inside it. So, how do we restart our board? We assign all the spaces with a null value. This is done using a forEach loop here. You can also use a for or for-of loop. The next thing is to change all the box values to blank. This is also done using a forEach loop. And finally, we are changing the h1 and h4 text. The 1000 at the end will make sure that this function executes after one second.

We will add this restart function to the restart button also. The only downside is that it'll even after clicking the restart button, it'll execute after a second. This can be solved by using the setTimeout function individually to the restart function. But I won't be doing so here.

restartBtn.addEventListener('click', restart);
restart();
drawBoard();

After adding the function to a click event listener in the restart button, we are done. Finally, we are just calling the created functions.

• Codepen

The complete code is also available on this Github repo.

Conclusion

The approach for this can be multiple. We can also create a complete array of possible combinations and then loop through and check if it satisfies any. You can also try to implement your logic for this game. In another article, we will be building a tic tac toe game that will give us an experience of playing against the computer.

If you liked this article or you have any suggestions, please leave a comment below.

Also checkout:

• Creating a Piano using JavaScript
• Build a Weather App with JavaScript

In this article, we are going to build exactly a counter like this.

Prerequisites:

• Basic HTML
• Basic CSS(including flexbox)
• Basic JavaScript

This article is going to be a shorter one. So, without wasting any more time, let’s get started.

The Markup (HTML)

The markup for this example has one container. All our elements are going to be inside a parent container. All the individual counter elements, including the icons, text, and time, will be under another container. Let’s see the markup.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading Counter</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;900&display=swap" rel="stylesheet">
    <script src="script.js" defer></script>
</head>

<body>
    <div class="container">
        <div class="heading">
            Counting Upto the Limit
        </div>
        <div class="counter-container">
            <div class="counter">
                <img src="./icons/iconmonstr-time-19.svg" alt="timer" srcset="" class="icon">
                <h3 data-target="15000" class="count">0</h3>
                <h6>Work Hours</h6>
            </div>
            <div class="counter">
                <img src="./icons/iconmonstr-coffee-11.svg" alt="Coffee" srcset="" class="icon">
                <h3 data-target="1200" class="count">0</h3>
                <h6>Cups of Coffee</h6>
            </div>
            <div class="counter">
                <img src="./icons/iconmonstr-weather-112.svg" alt="night" srcset="" class="icon">
                <h3 data-target="500" class="count">0</h3>
                <h6>Sleepless Nights</h6>
            </div>
        </div>
    </div>
</body>

</html>

As you can see, at the top, we include our stylesheet file and the scripts file. The defer tag in the script tag will ensure that the javascript loads after the HTML completes the loading. We are using the Nunito google font. All the icons in this tutorial are from iconmonstr. I have downloaded these three icons for the sake of this tutorial. Inside the container div, we are adding a div that will hold the heading. We are calling this div heading. Then, we are creating another div called counter-container, that will keep all our counters. Each counter has a counter div. The counter div holds icon, an H3 tag with 0 inside it, and an H6 tag with some text inside. Look closely at the H3 tag. This tag has a class of countand an attribute called data-target. The data-* attribute allows us to store extra information. Any user-defined name that starts with data- in front of it will be counted as a non-standard attribute.

These values can be used in JavaScript. Reading these values in JavaScript is also very simple. We can use the getAttribute method to read them. You’ll see it when we access it in JavaScript. In our code, these data-target attributes will say how much we want to count. For example, 15000 in the first attribute will count from 0 to 15000. Because our base value is zero, this is why we are adding 0 to the H3s.

So, our markup is done. Now, let’s jump to the CSS part.

Styling the Counter (CSS)

For this example, we are going to use extremely simple styles. Just a few flexboxes to get the positions we want.

Like all the other tutorials, our first thing in styling this is to reset the default values and change the box-sizing to border-box.

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

Because we are going to use a google font Nunito, we have to define it in the body of our document. I am also going to add a background color.

body {
    font-family: 'Nunito', sans-serif;
    background: #fbf7f4;
}

The next thing is the container.

.container {
    width: 80%;
    margin: auto;
}

These styles will restrict the container to a width of 80% of the parent. The automargin will center the container. Now, let’s style the heading.

.heading {
    text-align: center;
    font-size: 3.5rem;
    font-weight: bold;
    padding: 5rem 0;
}

I don’t think that I have to explain anything here. The styles are pretty self-explanatory. Let’s move on to styling the counter-container now.

.counter-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

We want all the counters to be centered. To do this, we will take the help of flexbox. If you don’t know about flexboxes, here is a two-part article for you,

• Complete Guide to CSS Flexbox - Part I
• Complete Guide to CSS Flexbox - Part II

Our counters are now centered. Let's center the texts inside the counters. We can use the text-align property here. Each counter is inside the counter div. Let's target the div and center the texts.

.counter {
    text-align: center;
}

Now let's style the headings inside the counters. It is also very simple. I am going to paster the codes below.

.counter h3 {
    padding: 0.5rem 0;
    font-size: 2.5rem;
    font-weight: 800;
}

.counter h6 {
    font-size: 2rem;
    padding-bottom: 1rem;
}

Finally, let's increase the icon size.

.icon {
    height: 5rem;
    width: auto;
}

We are extending the height only and setting the width to auto to adjust the width automatically.

And we are done with the CSS part.

The JavaScript

Inside our JavaScript, we only need to target a single DOM. If you go back to the HTML and check the counter H3, you’ll see that we have a class inside the H3 tag. It is the count tag and is available on every counter header. So, in JavaScript, to target this DOM we can use the querySelectorAll property. This property will select all the count classes. Another thing that we need in our JavaScript is the speed variable. A speed variable will be used to control the counter’s speed, i.e., how fast it counts.

const counters = document.querySelectorAll('.count');
const speed = 200;

Now, we will loop through each of the counters and execute a function. This function will do all the counting. Because we are going to run a function inside the loop, we can use the forEach loop. We have to pass in at least one parameter in a forEach loop. This element is the current value of the loop. Let’s say it counter for our app.

Inside the forEach loop, we will create a function that will do all the work. Let’s call this function updateCount.

counters.forEach((counter) => {
  const updateCount = () => {
    const target = parseInt(counter.getAttribute('data-target'));
    const count = parseInt(counter.innerText);
    const increment = Math.trunc(target / speed);


  };
  updateCount();
});

Let’s first understand the code up to the above part. The target variable will hold the target that is defined using the data- attribute in our HTML. As you can see, to get the data values, we use the getAttribute method. And inside the method, we pass in the attribute's complete name, including data- tag. The parseInt in front of it will convert the value into an integer because, by default, the return value is of string type. Then we take the value of the text that is inside our H3. At the start, this value will be 0. So, why are we not using it directly? Because the way our counter works is that it adds a number to the inner text of the H3 until it reaches the target value. For this, we have to keep track of the value that is generated each time by adding the increment value. We are also converting it to an integer. We can also use a + sign in place of the parseInt. The increment variable holds the number that is to be added after a specified time. We calculate it by dividing the target by speed. The Math.trunc will round off the value that we get by dividing. In JavaScript, there are multiple ways to round off a value. Here’s an article that talks about the different rounding methods.

The next thing is to check if we have reached the target value. And if the current value is less than the target value then we add up our increment value until we reach the target. This is a simple if-else statement.

if (count < target) {
      counter.innerText = count + increment;
      setTimeout(updateCount, 1);
    } else {
      count.innerText = target;
    }

First, we are adding our incrementvalue to the counter and changing the DOM value using counter.innerText. We are passing two parameters inside the setTimeout function. The setTimeout function executes a specific function after a given period of time. In our case, the first parameter is the updateCount function, and the 1 represents one millisecond. So, it will execute the updateCount function after every one millisecond until the count value is less than the target value. Otherwise, we set the inner text to the target value. The only step that is left, is to call our updateCount function. So, the complete JavaScript will look like this,

const counters = document.querySelectorAll('.count');
const speed = 200;

counters.forEach((counter) => {
  const updateCount = () => {
    const target = parseInt(counter.getAttribute('data-target'));
    const count = parseInt(counter.innerText);
    const increment = Math.trunc(target / speed);

    if (count < target) {
      counter.innerText = count + increment;
      setTimeout(updateCount, 1);
    } else {
      counter.innerText = target;
    }
  };
  updateCount();
});

And our counter is done. Here is a complete working version of our counter.

You can also find the complete code on this Github repo.

Conclusion

So, this was a pretty easy tutorial. It is a great one to practice your basic JavaScript knowledge. I hope you enjoyed building this one. Here are two more such projects that will help you to grow your JavaScript knowledge.

• Building a Password Generator with JavaScript
• Build a Piano App using JavaScript

For more such tutorials and projects, keep visiting nemotivity.dev.

🖼 What Will We Learn?

• What is an ASCII Character table
• The createElementmethod
• Flooring a decimal value
• The execCommand method

🥼 Writing the Markup

Before beginning to write any code, let’s first check the application itself. As you can see from the above GIF, the application has an area where the generated password is shown. It also contains a copy button that can be used to copy the password to the clipboard. Below that, we have a few options. The first one is a length property, which can be used to specify the password’s length. The next few options are to add or remove uppercase characters, numbers, or symbols. And finally, a button to generate the password. It seems easy, right? Now that we have a basic understanding of how we want to style our page we can start writing the page’s markup.

<!DOCTYPE html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
    <script src="./generator.js" defer></script>
    <title>Password Generator with JavaScript</title>
</head>

<body>
    <form id="passwordGeneratorForm">
        <div class="container">
            <h2>Password Generator</h2>
            <div class="result__container">
                <span id="result"></span>
                <button id="copy">Copy</button>
            </div>
            <div class="options">
                <div class="option">
                    <label>Length</label>
                    <input type="number" id="length" min="4" max="20" value="10">
                </div>
                <div class="option">
                    <label>Include Uppercase</label>
                    <input type="checkbox" id="uppercase" checked>
                </div>
                <div class="option">
                    <label>Include Numbers</label>
                    <input type="checkbox" id="numbers" checked>
                </div>
                <div class="option">
                    <label>Include Symbols</label>
                    <input type="checkbox" id="symbols" checked>
                </div>
            </div>
            <button class="btn" id="generate" type="submit">Generate Password</button>
        </div>
    </form>
</body>

</html>

As we can see, the markup is very straightforward. We are adding a google font to beautify the page. We are using the Oswald Google font. Other than that, we are linking our styles.css file and the JavaScript file that is named generator.js. The defer keyword in the script source makes sure that the JavaScript script is executed after the browser parses it.

Inside the bodytag, we are wrapping the complete password generator inside a form. We can also achieve the same functionalities using a div. But, we would use a form here. We are also giving a passwordGeneratorForm ID to the form. Inside the form, we are wrapping the whole block inside a divcalled container. A heading is also added. We are using H2here for the title. Now, for the place where we want to show the password, a result__container class is added. This result__container has two items. The first one is aspan with an ID of result, and the second one is a button with a text Copy in it. This button will be used as a copy to the clipboard button.

After closing the result__container div, we use a parent div of optionsto show the options. Each option inside the optionsclass is wrapped under a div of option.

The first option in our form is the password length. The inputtag in HTML is used for it. It’ll have a label of Length and an input type of number. An ID of lengthis also given to it for accessing it through JavaScript. Themin=”4” max=”20” value=”10” represents that the input will be of a minimum value of 4 and a maximum value of 20. The default value of the input will be 10.

The second option that we have in our app is to check if our password contains uppercase letters. Checking it will generate a password with uppercase characters. It has a label of Include Uppercase. The checkbox is an HTML input tag with a type of checkboxand an ID of uppercase. The checkedat the end of the input type means that by default, the box is checked. The include numbers and include symbols are the same as the include uppercase. All of these have different IDs according to their functionality.

Finally, after closing the options div, we add a button with a class btnand an ID of generate. The button will also have a type of submit. The button has a label of Generate Password. By clicking this button, the password will be generated. And we are done with the HTML.

Now we can move on to the CSS part. As you can see, the whole form is horizontally and vertically centered. This is achieved by using the CSS flexbox. If you are unfamiliar with CSS Flexbox, check the two-part CSS flexbox series.

• CSS Flexbox Part I
• CSS Flexbox Part II

✨ Styling the Document

The first thing that we do in every project is to clear the default formatting of the document. We will do the same here.

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

The next thing is to specify the height and width of the body element. We will set the height and width to 100vh and 100vw. The vh and vw are the viewport height and width. The viewport height and viewport width resolve a percentage of the viewport. For example, 10vwwill set 10% of the current viewport width. So, the 100vh and 100vw will take 100% of the current viewport height and width. These units were introduced to CSS between 2011 and 2015. Because all the elements have to be centered vertically and horizontally, we will be using flexbox here. Also, we will add thefont-family property in the body. A background-colour is also specified here. The * is a global selector in CSS. The above styles will clear the default page style.

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: 'Oswald', sans-serif;
  background-color: #9dc5bb;
}

Now comes the container div section. This section has no complicated styling. It only has a padding property, a border property, a width property, and a background-color property. The 1rem represents 16 pixels by default.

.container {
  padding: 1rem 1.5rem;
  border: 1px solid black;
  width: 350px;
  background-color: #bcf4f5;
}

The Password Generator heading is the next element to style. It should be centered, so we go for the text-align: center property. The padding of the top and bottom is also added to make some room for the heading.

h2 {
  text-align: center;
  padding: 15px 0;
}

We have the optionclass in our document that wraps up the various options. We're going to be styling it next. Here the flexbox will also be used to space the checkbox and the label. There are also some paddings added here.

.option {
  display: flex;
  justify-content: space-between;
  padding: 4px;
}

Now, we will style the password box. The password box has a result__container div. A height and width will be given first to this box. Then we will use flexbox here to space the password area and the copy button.

.result__container {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid black;
  padding: 0 5px;
}

The justify-content:space-between will push the elements to both ends. The align-items:center will center the elements on the cross-axis. A border and padding are also added to make proper spacing. The span where the password will be added will have only two properties. The first one is the word-wrap property. The word-wrap: reak-word will wrap the words inside the span. And a max-width property with the calc function is also added to adjust the maximum width. It is also fine if you don’t want to specify the max-width.

.result-container #result {
  word-wrap: break-word;
  max-width: calc(100% - 40px);
}

Now, we will be styling the copy button. The styling is very easy. I’ll just paste the styles below and you will get an understanding.

.result__container #copy {
  height: 40px;
  width: 40px;
  background-color: #5bc0be;
  color: #ffffff;
  border: none;
  cursor: pointer;
  outline: none;
}

.result__container #copy:hover {
  background-color: #1c2541;
  color: #ffffff;
}

We are specifying a height and width for the button. The cursor is changed to a pointer because we want to point that the button is clickable. The outline:none property will remove the border that is shown when the button is clicked. We are also setting the border to none. And, for the hover effect, we are changing the background color.

The only thing that is left now is the generate button. This is also similar to the above styles. We are just adding a border-radius extra here.

#generate {
  height: 40px;
  width: 100%;
  border-radius: 10px;
  border: none;
  background-color: #0b132b;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
}
#generate:hover {
  background-color: #5bc0be;
  color: #ffffff;
}

Now comes the tricky part - the JavaScript section. The JavaScript part is the heart of this app. All the interactivity is achieved using JavaScript. Let’s move on to JavaScript.

🎩 The JavaScript Part

Before writing the codes straight, let’s get an understanding of the ASCII character table. All the characters that we have on our keyboard have different codes assigned to them.

Image Source: https://bournetocode.com/projects/GCSE_Computing_Fundamentals/pages/3-3-5-ascii.html

The codes are in different number systems. If you see the ASCII column in the above image, the uppercase ASCII A has a value of 65. And if you increase the values with one, we’ll eventually get all the 26 uppercase characters. Similarly, the lowercase starts at decimal 97 and keeps going up to 122. The decimal numbers start at 48 and end at 57. The symbols are at various places. We will use these decimal values to generate different password combinations. This might seem confusing until now, but we’ll eventually understand what we are going to do with these codes.

Let’s complete the tedious task first. Linking the different HTML elements in the JavaScript seems the most tedious task to me. However, it is one of the most important things to do. All our different options, buttons, and the password box have different IDs assigned to them. Let’s grab them using their IDs.

// Getting the DOM Eleements
const resultDOM = document.getElementById('result');
const copybtnDOM = document.getElementById('copy');
const lengthDOM = document.getElementById('length');
const uppercaseDOM = document.getElementById('uppercase');
const numbersDOM = document.getElementById('numbers');
const symbolsDOM = document.getElementById('symbols');
const generatebtn = document.getElementById('generate');
const form = document.getElementById('passwordGeneratorForm');

There is nothing much to explain here. So, we will jump to the next part.

As you have seen, all characters have a unique decimal value assigned to them. JavaScript has a particular method called fromCharCode. This method returns a string corresponding to the decimal value that we pass.

It is a static method of the String object, and for this, we always have to use the String.fromCharCode(value) syntax. So, now we have understood that we can generate the characters from codes. Now, we need such a function that will create all the characters. To achieve this, we’ll create a function that generates the decimal values of the characters. And in the end, we will convert all these values to characters using this method.

// Character Code Generating Function
let arrayFromLowToHigh = (low, high) => {
  const array = [];
  for (let i = low; i <= high; i++) {
    array.push(i);
  }
  return array;
};

This function will take two inputs, one for the smallest value and one for the highest value. It is an effortless function. It just increments until the highest value is achieved. All the incremented values are pushed to an array, and finally, the function returns the array.

This function can be used to generate decimal values of the characters.

// Generating Character Codes
const UPPERCASE_CODES = arrayFromLowToHigh(65, 90);
const LOWERCASE_CODES = arrayFromLowToHigh(97, 122);
const NUMBER_CODES = arrayFromLowToHigh(48, 57);
const SYMBOL_CODES = arrayFromLowToHigh(33, 47)
  .concat(arrayFromLowToHigh(58, 64))
  .concat(arrayFromLowToHigh(91, 96))
  .concat(arrayFromLowToHigh(123, 126));

As you can see, for the uppercase codes, we are passing the low of 65 i.e, the value of uppercase A, and the high value of 90 i.e., the uppercase Z. Similarly, we are doing this for the lowecase characters and the numbers. Generating the character codes of the symbols are little different. Because they are distributed in the various corners of the table, we need to use the concat function to combine them into a single array. The symbols starts at 33 and increments up to 47 and then again continues at 58 and so on.

The concatmethod in JavaScript allows the concatenation of strings and arrays. Calling concaton a string or array and passing another string or array inside the concatfunction will concatenate the strings or arrays.

Syntax**:

str.concat(string2, string3, string4,......, stringN)

Where str is the base string, and the parameters are the strings that we want to concatenate. Here’s an example to help you understand the method better.

So, calling the arrayFromLowToHigh function with different ranges inside the concat method will create a complete array consisting of all the standard symbols’ decimal values.

// Generating Character Codes
const UPPERCASE_CODES = arrayFromLowToHigh(65, 90);
const LOWERCASE_CODES = arrayFromLowToHigh(97, 122);
const NUMBER_CODES = arrayFromLowToHigh(48, 57);
const SYMBOL_CODES = arrayFromLowToHigh(33, 47)
  .concat(arrayFromLowToHigh(58, 64))
  .concat(arrayFromLowToHigh(91, 96))
  .concat(arrayFromLowToHigh(123, 126));

By console logging all the arrays, you’ll be able to see that we have the arrays with decimal codes of the different characters.

We’ll be now moving on to making the Generate Password button working. We’ll target the button using the submit event listener. Until this point, if you click the button, you’ll find that the page is reloading. The first thing that we need to do is to disable this reloading behavior. JavaScript has a web API called preventDefault. The preventDefault method will make sure that the default behavior is not taken as it usually would be. To understand more about this method, I’d suggest you check this article.

// Checking the options that are selected and setting the password
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const characterAmount = lengthDOM.value;
  const includeUppercase = uppercaseDOM.checked;
  const includeNumbers = numbersDOM.checked;
  const includeSymbols = symbolsDOM.checked;
  const password = generatePassword(
    characterAmount,
    includeUppercase,
    includeNumbers,
    includeSymbols
  );
  resultDOM.innerText = password;
});

In the above code, you can see that we are listening to the submit event. Getting the event, we are passing it to a function. We are using arrow functions here. The e is representing the event. Thee.preventDefault() is restricting the default behavior. Then, we are checking the multiple options. We can access the value inside the password length field by using the .value getter method that returns the input value. The .checkedgetter will return true if the checkboxes are selected. Otherwise, it’ll return false. The values that we are getting from the options are stored inside separate variables. We are also creating a variable called password. This variable will store the value returned by the generatePassword function that we’ll create soon. The generatePassword function takes four arguments because we have four options to select from. The arguments are the values stored by the variables that we declared above. Finally, with the innerText method’s help, we target the text inside resultDOM and change with the generated password.

The generatePassword function is the most crucial function here. Because the password that we are getting is generated using this function. We’ll be building this function now.

In the above code, we have seen that the generatePassword function takes four arguments. So, we also have to pass in the four parameters when creating the function. We will be using arrow functions again here.

let generatePassword = (
characterAmount,
includeUppercase,
includeNumbers,
includeSymbols
) => {
}

We want the password to be lowercase if no option is checked. Inside our function, we will create a variable that will store an array of the character codes. We’ll initially assign the lowercase character codes inside it.

  let charCodes = LOWERCASE_CODES;

After that, we will check the options if they are true or not. We’ll use conditional statements for this.

  if (includeUppercase) charCodes = charCodes.concat(UPPERCASE_CODES);
  if (includeSymbols) charCodes = charCodes.concat(SYMBOL_CODES);
  if (includeNumbers) charCodes = charCodes.concat(NUMBER_CODES);

Depending on the options that are selected, we will concatenate the values to the charCodes variable. Now, for the password that will be generated, we create an empty array first. For this example, we will call it passwordCharacters. Then, we will create a loop that will loop until it reaches the number of characters we want. Inside the loop, we generate random character codes from the values that are available in the charCodesarray. And finally, we convert the characters from the character codes and push it into the passwordCharacters array. Let’s see the complete generatePassword function now.

// Password Generating Function
let generatePassword = (
  characterAmount,
  includeUppercase,
  includeNumbers,
  includeSymbols
) => {
  let charCodes = LOWERCASE_CODES;
  if (includeUppercase) charCodes = charCodes.concat(UPPERCASE_CODES);
  if (includeSymbols) charCodes = charCodes.concat(SYMBOL_CODES);
  if (includeNumbers) charCodes = charCodes.concat(NUMBER_CODES);
  const passwordCharacters = [];
  for (let i = 0; i < characterAmount; i++) {
    const characterCode =
      charCodes[Math.floor(Math.random() * charCodes.length)];
    passwordCharacters.push(String.fromCharCode(characterCode));
  }
  return passwordCharacters.join('');
};

So, we loop till the characterAmount that we are getting from the input field in our app. The charCodes variable has all the character codes depending on the options selected. We will then generate a random index position of the array using the Math.random() method. We are multiplying it with charCodes.length to restrict it to generate numbers up to the highest index position only. The Math.floor will round-off the number that is generated.

The String.fromCharCode(characterCode) will generate the string from the character code, and thepasswordCharacters.push() will finally push the character to the array. The return passwordCharacters.join(‘’) will convert the array to a string and return it.

And we are almost done. The only thing that is left is the copy to clipboard functionality. It may seem complicated, but actually, it is not. The copy to clipboard functionality can be achieved with just a few lines of JavaScript code. The simplest way to achieve it is by following the below steps.

1. Create a textarea element
2. Set it’s value to the value we want to copy
3. Append the textarea to the HTML document
4. Select the value using the select() method
5. Execute the execCommand(‘copy’) method
6. Remove the textarea

And we are done. Let’s see how we can integrate it within our code. We have a copybtnDOMbutton. We will listen to the click event on this element. When the event is triggered, we’ll execute a function. Inside the function, the first thing we will do is to create a textarea element. We can create HTML elements from JavaScript using the createElement method by passing the element we want to create.

const textarea = document.createElement('textarea');

We will create a variable now that will store the value that is to be copied. We can get the value using theresultDOM.innerText because the text inside the resultDOM holds our generated password.

  const passwordToCopy = resultDOM.innerText;

If the passwordToCopy variable is empty, we will just return the function.

  // Edge Case when Password is Empty
  if (!passwordToCopy) return;

The next step is to set the textarea value with the value that we want to copy.

  textarea.value = passwordToCopy;

Now, we will append it to the body of our document using the appendChild method. The appendChild method adds a node to the end of the list of children of a specified parent node.

document.body.appendChild(textarea);

So, the above code will create a children node of textarea inside the body parent.

To select the elements that we want to copy, we execute textarea.select(); method.

To copy the elements, we execute document.execCommand('copy'); method. The execCommand() method executes the specified command for the selected part of an editable section; for this app, the editable section is the textarea. The copycommand inside it will copy the values of the editable section.

After copying is done, we have to remove the textarea. It can be removed using textarea.remove();. And finally, to give the user a notification that the password is successfully copied, we will use a simple alert.

alert('Password Copied to Clipboard');

So, the final copy to clipboard functionality will look like this,

// Copy Password
copybtnDOM.addEventListener('click', () => {
  const textarea = document.createElement('textarea');
  const passwordToCopy = resultDOM.innerText;

  // Edge Case when Password is Empty
  if (!passwordToCopy) return;

  // Copy Functionality
  textarea.value = passwordToCopy;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  textarea.remove();
  alert('Password Copied to Clipboard');
});

And we are done. We have successfully made our working password generator app. Finally, the complete JavaScript code looks like this,

// Getting the DOM Eleements
const resultDOM = document.getElementById('result');
const copybtnDOM = document.getElementById('copy');
const lengthDOM = document.getElementById('length');
const uppercaseDOM = document.getElementById('uppercase');
const numbersDOM = document.getElementById('numbers');
const symbolsDOM = document.getElementById('symbols');
const generatebtn = document.getElementById('generate');
const form = document.getElementById('passwordGeneratorForm');

// Generating Character Codes
const UPPERCASE_CODES = arrayFromLowToHigh(65, 90);
const LOWERCASE_CODES = arrayFromLowToHigh(97, 122);
const NUMBER_CODES = arrayFromLowToHigh(48, 57);
const SYMBOL_CODES = arrayFromLowToHigh(33, 47)
  .concat(arrayFromLowToHigh(58, 64))
  .concat(arrayFromLowToHigh(91, 96))
  .concat(arrayFromLowToHigh(123, 126));

// Copy Password
copybtnDOM.addEventListener('click', () => {
  const textarea = document.createElement('textarea');
  const passwordToCopy = resultDOM.innerText;

  // Edge Case when Password is Empty
  if (!passwordToCopy) return;

  // Copy Functionality
  textarea.value = passwordToCopy;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  textarea.remove();
  alert('Password Copied to Clipboard');
});

// Checking the options that are selected and setting the password
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const characterAmount = lengthDOM.value;
  const includeUppercase = uppercaseDOM.checked;
  const includeNumbers = numbersDOM.checked;
  const includeSymbols = symbolsDOM.checked;
  const password = generatePassword(
    characterAmount,
    includeUppercase,
    includeNumbers,
    includeSymbols
  );
  resultDOM.innerText = password;
});

// Password Generating Function
let generatePassword = (
  characterAmount,
  includeUppercase,
  includeNumbers,
  includeSymbols
) => {
  let charCodes = LOWERCASE_CODES;
  if (includeUppercase) charCodes = charCodes.concat(UPPERCASE_CODES);
  if (includeSymbols) charCodes = charCodes.concat(SYMBOL_CODES);
  if (includeNumbers) charCodes = charCodes.concat(NUMBER_CODES);
  const passwordCharacters = [];
  for (let i = 0; i < characterAmount; i++) {
    const characterCode =
      charCodes[Math.floor(Math.random() * charCodes.length)];
    passwordCharacters.push(String.fromCharCode(characterCode));
  }
  return passwordCharacters.join('');
};

// Character Code Generating Function
function arrayFromLowToHigh(low, high) {
  const array = [];
  for (let i = low; i <= high; i++) {
    array.push(i);
  }
  return array;
}

🧶 Conclusion

This app is just one way to generate passwords. Many other ways can be explored to achieve the same functionality. I hope you liked building our cool little password generator. If you have any doubt or suggestions, please comment below.

The complete code can also be found at this GitHub repo.

In this tutorial, we'll be building a geolocation-based weather app that will show us the current weather data depending on the user's location.

Prerequisites for this tutorial:

• Basic HTML
• Basic CSS (including CSS Flexbox)
• Basic JavaScript (knowing Javascript promise is a plus)

What will we learn? By building this app, we'll learn some stuff like,

• Interacting with the DOM
• The use of Fetch API
• The navigator object of JavaScript
• How to use a third-party API service and more

Now that we have understood the prerequisites and other vital information let's jump into coding our app.

Markup of the App

The markup or HTML of the app is straightforward. You can see the image below of the final output to get an idea about our markup style.

We have an image that will change according to the weather. The location will be based on the user's geolocation. Below it is the summary of the weather, the temperature is in both Celcius and Fahrenheit. And in the end, we are showing the sunrise and sunset time. We are also using the Lora google font.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Weather app</title>
    <link rel="stylesheet" href="styles.css" />
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,700;1,600&display=swap" rel="stylesheet">
</head>

<body>
    <div class="container">
        <img src="" alt="" srcset="" id="weather-icon">
        <div id="location">Unable to Fetch Weather</div>
        <div class="desc">No Information Available.</div>
        <div class="weather">
            <div class="c">Error</div>
            <div class="circle"></div>
            <div class="f">Error</div>
        </div>
        <div class="info">
            <h4>Sunrise: <span class="sunrise">No Information Available</span></h4>
            <h4>Sunset: <span class="sunset">No Information Available</span></h4>
        </div>

    </div>
    <script src="scripts.js"></script>
</body>

</html>

In the above code, you can see we are using multiple divs with classes and IDs. The classes and IDs are important because we will be using those to interact with the DOM. In the HTML file, we link the CSS file called styles.css and the JavaScript file called scripts.js. The whole information section is wrapped under a div named container. The container contains an image tag with a blank src attribute, another div with an ID of location. The div has a text saying "Unable to fetch weather". A desc class is added under the location that will show the summary of the weather. And then, we are wrapping the temperatures inside a div called weather. The weather class consists of three classes to show Celcius's temperature, Fahrenheit, and a div to separate them. Finally, two divs are used to indicate sunrise and sunset timing.

All the div's text will be shown when the browser cannot get the users' geolocation.

Up to this point, our markup will look like this, if you open the above HTML file in browser,

Styling the Markup

Now it's time to style our app. The styling is also effortless. But before we start styling our app, please make sure you know about CSS flexbox. If you are not familiar with flexbox, check our two-part flexbox series.

• CSS Flexbox Part 1
• CSS Flexbox Part 2

Before starting to style our project, we will reset the default margins and paddings of the page.

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

We will use the Lora font for the whole document. We will add the font-family into the body section. The asterisk(*) is a global selector that selects all the elements, and after selecting all the elements, we are setting the margin and padding to 0. The box-sizing:border-box makes working with flexbox easier.

body {
  font-family: 'Lora', serif;
}

The serif font is a fallback to the Lora google font. Now let's start designing the container. First of all, we need to set up a height and a width. We'll be using 100 viewport height and 100 viewport width for the container. Then, to center the elements in our app, we'll take the help of CSS flexbox. To invoke flexbox, we need to specify display:flex in the container first. To center the elements along the main-axis, we use justify-content:center, and to center along the cross-axis, we use align-items:center. We also use the flex-direction: column here to align the items along the vertical axis. For the background, I am using a radial gradient background. To speed up the process, I am using an online gradient generator tool. The final container styling is pasted below.

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgb(251, 242, 133);
  background: radial-gradient(
    circle,
    rgba(251, 242, 133, 0.6334908963585435) 0%,
    rgba(224, 196, 91, 0.8407738095238095) 35%,
    rgba(230, 224, 113, 1) 100%
  );
}

We will design the temperature section now. It is inside a weather class div. We are using a flexbox here also.

.weather {
  display: flex; 
  align-items: center;
  margin: 15px 0;
  font-size: 1.5rem;
}

To add some space below and top of the temperature div, we add some top and bottom margins. To style the location, we are using an ID of location. And for the description, a class desc is used.

#location {
  font-size: 3rem;
  font-weight: 800;
  font-style: italic;
}
.desc {
  font-size: 1.25rem;
  text-transform: capitalize;
}

I think the above lines doesn't require any explanation. It is pretty self-explanatory. The text-transform: capitalize property capitalizes the first letter of each word. And we are using rem units here for flexibility. Finally, to create the circle between the two temperatures, we are using a div called circle. We are giving it a height and width of 15px and then adding a border-radius of 50px, making it a circle.

.circle {
  background-color: black;
  border-radius: 50px;
  height: 15px;
  width: 15px;
  margin: 0 15px;
}

Our styling for the app is done. Now it is time for the fun part. Before directly jumping to the JavaScript part, let’s first understand a few basic concepts.

Getting Data from API

The first thing to understand is how do we get the weather data? To get the data, we are dependent on a third-party service. We will use a website called OpenWeatherMap. OpenWeatherMap is a service that provides various weather data through API. We can integrate the API into our app and can use the data on our website. An API is like a waiter, it works as a medium between the server and the client to serve the data to the client according to the client's request.

OpenWeatherMap is free up to a certain number of requests. After that, it charges money. To use the API, we need an API key. Let's see how we can get our API key:

Step 1: Open OpenWeatherMap and click on Sign In:

Step 2: Click on "Not Registered? Create an account", if you don't have an account,

Step 3: Fill out the form and click on sign up to create your account.

Step 4: Click on API on the menu

Step 5: Because we need the current weather data, we will need to subscribe to the Current Weather Data API subscription. It is the first option you will see in the menu. Click on Subscribe.

Step 6: Now, the pricings window will open. We don't need any paid plan for this hobby project. So, select the free option here, and we are almost done.

Step 7: After subscribing to it, in the top right corner, where your profile name appears, click on it, and select My API Keys

Step 8: You will find your API key here. Keep it safe, and do not share it publicly with anyone.

Now that we have our API key, we can move forward to building our app again.

In this app, we get the user's geolocation to show weather data according to the user's place. To get the geolocation data, we first have to know about the navigator object in JavaScript. The navigator object in JavaScript is used to fetch information related to the user agent or the browser. This object has a property called geolocation. By using this property, we can get the user's latitude and longitude. To know more about the navigator object, check out this awesome article here.

Also Read: Build a Piano App using JavaScript

The JavaScript Part

The first thing that we need to do in our scripts.js file is to create a variable to store the API key.

// OpenWeatherMap API. Do not share it publicly.
const api = '66869939e0b182ac2d6***********'; //Replace with your API

I am creating a variable called api and storing my API key there. The next step is to create an event listener that will fire up when the page loads. So, the event we are looking for is load here. And when the page loads, it will execute some function that we define.

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

As you can see, we are using an arrow function here. Inside the function, we will create two variables called lat and long to store the user's latitude and longitude. And then, we will use the navigator object to get the latitude and longitude of the user. We will use an if statement here because many browsers do not allow access to the location. If you want, you can also add an else statement for cases when the location is not available. But for the sake of simplicity, I’ll only use the if statement in this tutorial.

window.addEventListener('load', () => {
  let long;
  let lat;
  // Accessing Geolocation of User
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {

    });
  }
});

The if(navigator.geolocation) method will check if the object is available in the browser. If it is available, then we will call a method called getCurrentPosition which is available on geolocation property. We pass in an argument of position inside the getCurrentPosition method. We can name anything for the argument that we are passing. Now, if we console log the position, we will be able to see that we are getting the latitude and longitude. But before showing the values, the browser will ask for our permission to allow the location access.

If you allow your browser to access the location, the console will show your location.

It throws multiple values. But we only need the latitude and longitude values for our app. So, we'll store these two values inside the variables that we declared before.

window.addEventListener('load', () => {
  let long;
  let lat;
  // Accesing Geolocation of User
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
      // Storing Longitude and Latitude in variables
      long = position.coords.longitude;
      lat = position.coords.latitude;
    });
  }
});

Every API has a base URL. By giving some arguments to that URL returns the information that we need. For OpenWeatherMap, this URL is https://api.openweathermap.org/data/2.5/weather?, after the question mark(?), we provide some information to the URL, and it returns the values in JSON format. All the API calls are well described in the official documentation of OpenWeatherMap. You can visit their page here. To get the data for a particular latitude and longitude, the below format is used.

https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${api}&units=metric`

Where ${lat} is the latitude of the user, ${long} is the longitude of the user, ${api} is the API key provided by OWM, and at the end, units=metric is to get the weather data in celsius. We need to store the complete URL inside some variable. For this tutorial, we are storing it inside a variable called base. After storing it into a variable, if you console log it, you will get a proper URL in return. Now, if you open the URL, you can see all the different information available to you.

Now somehow, we need to extract all these data and show it into our app. Here comes the use of promises and object destructuring. Javascript Promise in itself a vast topic.

Now it is time to use the JavaScript Fetch API. The fetch API enables us to call and get data from API services. We will pass in the base variable inside it. The value that is returned after passing the base URL needs to be converted into JSON format so that we can use it in our app. So, after the first call, we return the response by transforming it to JSON.

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
      // Storing Longitude and Latitude in variables
      long = position.coords.longitude;
      lat = position.coords.latitude;
      const base = `https://api.openweathermap.org/data/2.5/weatherlat=${lat}&lon=${long}&appid=${api}&units=metric`;
      console.log(base);
      fetch(base).then((response) => {
        return response.json();
      });
    });
  }

The return response.json(); converts the response to a JSON object. After we get the JSON object, we will extract the values we need for our app. This is done by using JavaScript object destructuring. A brief article about object destructuring can be found here.

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
      // Storing Longitude and Latitude in variables
      long = position.coords.longitude;
      lat = position.coords.latitude;
      const base = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${api}&units=metric`;

      // Using fetch to get data
      fetch(base)
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          const { temp } = data.main;
          const place = data.name;
          const { description, icon } = data.weather[0];
          const { sunrise, sunset } = data.sys;
        });
    });
  }

So, after getting the data in JSON format, we extract the values that we are going to use. If you console log the data now, you'll be able to see we are getting all the data that was previously shown through the base URL. We are extracting the temp from the main object and storing it into a variable of the same name temp. We are getting the name of the place from the name key of the object. The description and icon code is available in the weather array inside the object. We only have one array. So, we are accessing that array to get the two values. And finally, the sys object stores the sunrise and sunset time. We are also storing them into variables of the same name. If you console log the different values now, you’ll be able to see it. But you might get confused about two things, the first one is the sunrise and sunset time and the second one is the icon. Let's first talk about the icon code. OpenWeatherMap provides icons depending on various weather conditions. And, to show the icons, it gives some icon code. Providing the icon code in a particular URL will return the image. You can see all the icons here. The icon URL is http://openweathermap.org/img/wn/${icon}@2x.png; if we replace the ${icon} with the icon code, we'll get the icon according to the weather condition. Now, let's talk about time. The time that is returned by the API is in epoch format. So, to make it human-readable, we need to convert it to GMT time first. The formula to convert epoch time to GMT using JavaScript is,

const timeInGMT = new Date(epochTime * 1000);

So, we are getting two different times that are to be converted into GMT. Let’s create two variables, one for the sunrise and the other one for the sunset time. And, let’s also create an icon URL that we will put inside the blank imgtag that we created before. And one more thing that we have to do is, convert the Celcius to Fahrenheit because we want to show the temperature in both the degrees. To convert the celsius to Fahrenheit, we use the formula,

fahrenheit = (celcius * 9) / 5 + 32

Now our code will look something like this,

window.addEventListener('load', () => {
  let long;
  let lat;
  // Accesing Geolocation of User
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
      // Storing Longitude and Latitude in variables
      long = position.coords.longitude;
      lat = position.coords.latitude;
      const base = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${api}&units=metric`;

      // Using fetch to get data
      fetch(base)
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          console.log(data);
          const { temp } = data.main;
          const place = data.name;
          const { description, icon } = data.weather[0];
          const { sunrise, sunset } = data.sys;

          const iconUrl = `http://openweathermap.org/img/wn/${icon}@2x.png`;
          const fahrenheit = (temp * 9) / 5 + 32;

          // Converting Epoch(Unix) time to GMT
          const sunriseGMT = new Date(sunrise * 1000);
          const sunsetGMT = new Date(sunset * 1000);
        });
    });
  }
});

And we are almost done. We have all the data that we need to show. The only thing that is left, is to access the DOM elements using JavaScript and changing the values. I am pasting the code for selecting the elements below. I think the code do not need any explanation.

const iconImg = document.getElementById('weather-icon');
const loc = document.querySelector('#location');
const tempC = document.querySelector('.c');
const tempF = document.querySelector('.f');
const desc = document.querySelector('.desc');
const sunriseDOM = document.querySelector('.sunrise');
const sunsetDOM = document.querySelector('.sunset');

We are just accessing the DOM elements and storing them into separate variables. We are doing this outside the eventListener function.

Now, to change the src tag of an image, we access the image element using a selector, here we are selecting using the ID of weather-icon, now if we use the .src property over it, we can easily change the image source.

iconImg.src = iconUrl;

We are changing the image URL with the icon URL that we stored before. Rest of the code is very simple.

loc.textContent = `${place}`;
desc.textContent = `${description}`;
tempC.textContent = `${temp.toFixed(2)} °C`;
tempF.textContent = `${fahrenheit.toFixed(2)} °F`;
sunriseDOM.textContent = `${sunriseGMT.toLocaleDateString()}, ${sunriseGMT.toLocaleTimeString()}`;
sunsetDOM.textContent = `${sunsetGMT.toLocaleDateString()}, ${sunsetGMT.toLocaleTimeString()}`;

We are using template literals. The toFixed(2) method is used so that the degree shows up to two decimal places only. The toLocaleDateString() and toLocaleTimeString() methods are used to convert the GMT time and date to local time and date. The .textContent property sets the inside text with the values passed on the right side. And we are done. The complete JavaScript code will look like this,

// Openweathermap API. Do not share it publicly.
const api = '66869939e0b182ac2d6************'; //Replace with your API

const iconImg = document.getElementById('weather-icon');
const loc = document.querySelector('#location');
const tempC = document.querySelector('.c');
const tempF = document.querySelector('.f');
const desc = document.querySelector('.desc');
const sunriseDOM = document.querySelector('.sunrise');
const sunsetDOM = document.querySelector('.sunset');

window.addEventListener('load', () => {
  let long;
  let lat;
  // Accesing Geolocation of User
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((position) => {
      // Storing Longitude and Latitude in variables
      long = position.coords.longitude;
      lat = position.coords.latitude;
      const base = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${api}&units=metric`;

      // Using fetch to get data
      fetch(base)
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          const { temp } = data.main;
          const place = data.name;
          const { description, icon } = data.weather[0];
          const { sunrise, sunset } = data.sys;

          const iconUrl = `http://openweathermap.org/img/wn/${icon}@2x.png`;
          const fahrenheit = (temp * 9) / 5 + 32;

          // Converting Epoch(Unix) time to GMT
          const sunriseGMT = new Date(sunrise * 1000);
          const sunsetGMT = new Date(sunset * 1000);

          // Interacting with DOM to show data
          iconImg.src = iconUrl;
          loc.textContent = `${place}`;
          desc.textContent = `${description}`;
          tempC.textContent = `${temp.toFixed(2)} °C`;
          tempF.textContent = `${fahrenheit.toFixed(2)} °F`;
          sunriseDOM.textContent = `${sunriseGMT.toLocaleDateString()}, ${sunriseGMT.toLocaleTimeString()}`;
          sunsetDOM.textContent = `${sunsetGMT.toLocaleDateString()}, ${sunsetGMT.toLocaleTimeString()}`;
        });
    });
  }
});

The complete source code can be found in this Github repo.

Conclusion

This was our complete weather app from scratch. You can modify it with your styles and preference. This was an attempt to break all the pieces and explain them accordingly. I hope you find it helpful. If you want to build something more using APIs, we have another article about creating a Covid tracker using JavaScript - Create a Javascript Covid 19 Tracker

Our aim in this article is to learn and apply the available properties to the flexbox items.

So, we've already discussed these properties before (In part 1 of this series - Basics of CSS Flexbox):

1. Flex container and flex item
2. Main axis and Cross axis
3. The display:flex property
4. Flex-wrap
5. Flex-direction
6. Flex-flow
7. Justify-content
8. Align-items
9. Align-content

Let's start discussing the topics that are left.

1. flex-order Property:

The flex-order property is used to define the order of the flex-items.

Here is the syntax:

.flex-item {
    order: 0 | -1 | 4;
}

The default value for all the items is zero. If we apply any value greater than zero to a flex-item, the flex-item will be pushed to the end of all the items. For example, if you look at the embed below, you'll find that the item-1 class has an order of 4, pushing it to the end. And as you might have guessed, any value which is less than 0 will push the element to the first. The item-4 class has a flex-order value of -1, which is pushing it to the first.

2. flex-grow Property:

The flex-grow property is used to make a flex-item grow if sufficient space is available in the parent container. The flex-grow takes a unitless value and uses it as a proportion.

Here is the syntax:

.flex-item {
    flex-grow: 2 | inherit | initial;
}

This property will specify how much available free space should be assigned to a flex item. There are few things to note when using the flex-grow.

It assigns the space open in the flex-container to the flex-items. And the proportion is determined by the number of flex-grow values we have in the flex-items.

For example, if we have a flex-grow: 2; value in the first item and a flex-grow: 1; value in the second item, flexbox will divide the total available space by 3 and will add 2/3 of the available space to the first item and 1/3 to the second item. The initial value will set its value to the default and will inherit the value from its parent.

3. flex:shrink Property:

This property is the opposite of the flex-grow property. It determines how much one element will shrink if necessary.

Here is the syntax:

.flex-item {
    flex-shrink: 2 | initial | inherit;
}

The flex-shrink property is not much used, and also, the calculation of flex-shrink is more complicated than flex-grow. We’ll not be discussing it in-depth in this article. For now, keep that in mind that the higher the shrink value, the more the item shrinks. To get an idea about it, open the below embed in fullscreen and resize it. You'll notice that the flex-item having flex-shrink value 2, shrinks more than the other items.

It also takes the initial and inherit values. The initial will set the value to default, and inherit will inherit the parent container value.

The default value of flex-shrink is 1.

4. flex:basis Property:

Setting the flex-basis property is like setting an initial width to the items. So why don’t we use the min-width property? Because the min-width property will make our code non-responsive if we reach a smaller size than the size specified in min-width. Also, the browser first checks for the flex-basis property. If it's not available, then it starts searching for the width and calculates the flex-basis value, which we don't want. So, it is always a good idea to use the flex-basis property.

Here is the syntax:

.flex-item {
    flex-basis: 250px | 50% | auto;
}

5. The flex Property:

The flex property is the shorthand for the flex-grow, flex-shrink, and flex-basis property.

Here is the syntax:

.flex-item {
    flex: flex-grow flex-shrink flex-basis;
}

The second and third parameters are optional. The default value of flex is 0 1 auto. Because we know the default flex-grow value is 0, the flex-shrink value is 1 and flex-basis is auto. However, we can set values according to our needs.

For example, in the above code, we set the flex value 2 2 auto to the first flex item.

If you resize the output, you'll find that the first element is growing and shrinking more than the other items. At the same time, the second item is not at all shrinking because its flex-shrink value is set to zero. Try resizing the output to view it in action.

6. align-self Property:

The align-self property overrides the align-items property assigned on the flex-container. We use this to set up the alignment on individual items. To understand the align-self property, you must know the align-items property available in the flex-container (check the first part of the article). The align-self takes the same values that are used in align-items, i.e.,

• Flex-start
• Flex-end
• Center
• Stretch
• Baseline

Here's the image from our previous article to help you understand the values,

I don't think I’ve to explain the values again here. Check out the code snippet, and you'll get an idea.

So this was all about properties that can be applied to the flex-items.

I hope you liked this two-part guide to the flexbox. Leave a comment if you have any doubts or suggestions. 😊 And, here is another article suggestion for you. 😄

For the Hashnode HarperDB hackathon, I built a Twitter thread saver. What does my Twitter saver do though? I should explain it first. Let me show you a demo:

As you can see from the above video, when a specific command is used on a Twitter thread, it gets saved to the database, and then it is rendered to the frontend site. Seems simple? You can check the frontend version here. And here are the repo links,

• Backend GitHub repo
• Frontend GitHub repo

🕊 Inspiration and Real-world Usage

The Twitter tech community is awesome. People like Jessica Carter, Pratham, @DThompsonDev, and many other developers share their awesome content through Twitter threads. I always wanted to build something using which I can save and read the threads later. This is how I got the idea of building a thread saver. It was a long time plan to building such a thing but I couldn't get started. The Hashnode HarperDB hackathon pushed me to start building it. Till now, the app is in, I should say, the alpha version. I have a lot of plans with this app which I'll talk about in this article.

❌ Challenges

At first, when I started researching, I found that readwise.io works the same and in a much better way. Readwise worked as an inspiration to me.

Challenge 1: Choosing what I need

Now that I got an idea about what I want to build, I needed to explore the Twitter API and needed to know which API functionalities I exactly need. The Twitter stream API seemed perfect for me. Because I work more with JavaScript, JavaScript was my first choice. But I am thinking of building the whole backend with Golang in the future. I chose the twitter npm library to talk with the API.

Challenge 2: Writing functions to achieve what I need

My main target was to save a whole thread to the database, but the Twitter API doesn't send back the whole thread to which the tweets are replied to, rather it sends only the parent tweet's ID to which a tweet is replied. And also, I needed to know what is the first tweet of a thread and what a reply is. After finding the parent tweet and a child tweet, I needed to write a recursive function(if you don't know what a recursive function is, check this link 😉) that could go from a last replied thread to the top until it reaches the parent. This was the toughest part for me. I got confused a lot, but somehow I managed to write the functions that I needed.

Challenge 3: Connecting the Database

I shouldn't say connecting a database was a real challenge. HarperDB was my choice here. It is effortless to use a HarperDB database. For the server-side, I used the Harperive npm package. I could have used the API with Axios also, but I used the package here to explore a little more. You can check the backend repo here.

Challenge 4: Deploying

I am still a student and I don't have any credit card. I love deploying to Heroku, but because I need an always on server so that I can listen to the streaming data, I needed to use a VPS. I used Vultr for it. Learned a little bit of docker, but finally deployed without Docker to a Vultr linux server. It was also challenging for me to deploy to a VPS.

Challenge 5: Frontend

I prefer to work with pure JavaScript, but I choose Vue for the frontend for this project. I converted a complete HTML repo to a Vue repo. This was also not a challenge, to be honest. Though, few small places took a very long time. I used the HarperDB API with Axios here and used NoSQL queries. One problem with the HarperDB NoSQL query is, I cannot retrieve sorted data based on a specific field. Though it can be achieved in the front end, for now, it's on my to-do list. You can view the working frontend at threadsaver.xyz and the repo are here.

🛣 Future Roadmap

• The app currently lacks one of the most important features, when a thread is saved, the user should be notified either by DM or by a thread reply. Currently, I am working to solve this. This is on my top priority list now.
• Getting data sorted by time is another important thing that I need to implement
• The authentication is not yet implemented on the client-side for this Hackathon so that everyone can view the app. As the hackathon ends, I'll add the authentication service. And after adding authentication, I'll add the option to delete a specific tweet
• The second thing I need to implement is to add OAuth so that the user doesn't have to do anything manually. They just give permission to the app and they are ready to go. In this version, I also want to implement a functionality to set up custom commands.
• The UI needs more work.
• Tag adding for threads is another important feature that I need to implement.

💻 Tech Stack

• Backend: Node.js, deployed to a linux VPS(repo)
• Frontend: Vue.js, deployed to Vercel(repo)

🎋 Conclusion

During building this app, I learned a lot about how APIs work, more about asynchronous functions, working with Axios and VPS, and a lot more. I thank Hashnode and HarperDB for giving this push and opportunity to work on side projects.

Floats were tough. Even a simple header menu would need a lot of work. At the same time, flexboxes are easy to learn and gives a lot more ability to format.

🎁 Flex Containers and Flex Items

To start learning about flexboxes, we have to know about two things.

1. Flex Containers
2. Flex Items

You can get an idea about flex containers and flex items from the above image. The Flex container is used to group a bunch of flex items. And any HTML element that is a direct child of the flex container is a flex item. We use flex containers to determine the layout. However, the flex items can be manipulated individually also. Now, let's start to learn about the syntax of flexbox.

👜 Flex Container Properties

Following are some of the properties of the flex container.

⛳ 1. display:flex; Property

The display:flex; is used to invoke the flexbox. This style goes inside the parent element or the flex container as we say here. When the browser sees this, it will render everything inside the container as a flexbox.

.flex-container {
    display: flex;
}

Now, let's start experiencing the awesomeness of flexbox.

To start, we'll need an HTML file and a CSS file for styles. Let's say we have an HTML file called index.html and a CSS file called styles.css. We'll have a div called flex-container, and all the direct child elements of the flex-container will have a div of flex-item. So, our HTML file will look like this.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./styles.css">
        <title>CSS FLEXBOX</title>
    </head>
    <body>
    <header>
        <!-- Empty header tag -->
    </header>
    <div class="flex-container">
        <div class="flex-item red">1</div>
        <div class="flex-item green">2</div>
        <div class="flex-item blue">3</div>
        <div class="flex-item yellow">4</div>
        <div class="flex-item pink">5</div>
    </div>
    </body>
</html>

The classes red, green, blue, etc. are given to style the particular divs. Now, let's style the file.

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

.flex-item {
  height: 10vh;
  width: 20%;
  margin: 5px;
  padding: 5px;
  font-size: 32px;
}

.red {
  background-color: red;
  color: white;
}

.green {
  background-color: green;
  color: white;
}

.blue {
  background-color: blue;
  color: white;
}

.yellow {
  background-color: yellow;
  color: black;
}

.pink {
  background-color: pink;
  color: black;
}

Here's our styles.css file. We are giving each of the flex items a height of 10 viewports and width of 20% of the parent. So, up until now, the output of our code will be like the below image,

This output is what we were expecting.

Now if we want all this flex items to align horizontally using floats, we'll need a lot of work. But using flexbox, aligning the items horizontally is just a single line of code. Adding the display:flex property to the parent will do the magic.

.flex-container {
    display: flex;
}

The above line will give us the output,

Isn't it awesome?

🥅 2. flex-wrap Property

The flex-wrap property has three options to choose from:

• nowrap
• wrap
• wrap-reverse

The default property is nowrap. If you have ever used Microsoft Excel, then you must know what I am talking about.

The wrap option will add the elements to a new line if it crosses its total width available to it. For example, our flex items have a 20% width plus some margins. So technically, only four flex-items should align in a single line. But our output sets all the five items in a single line. Because by default it is set to nowrap.

The width we assigned here works like a max-width. Now, suppose we set the flex-wrap property to wrap. In that case, it'll take the width size given to the items and only align the maximum number of elements that can be added. And finally, the wrap-reverse property value will wrap all the items in reverse order.

Here is the syntax:

/* Assuming .flex-container is the Parent Container */
.flex-container {
  display: flex;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

You can see how the properties affect the style from the GIF below:

🃏 3. flex-direction Property

As you can see, adding the display:flex property will align all our flex-items horizontally. But what if we don't want to align them in such a way? To control the alignment, we have the flex-direction property. This has four different options:

1. row
2. row-reverse
3. column
4. column-reverse

The default is the row. If we set it to column, our flex items will be aligned vertically. The row-reverse option will set the direction opposite to the text-direction.

Here is the syntax:

/* Assuming .flex-container is the Parent Container */
.flex-container {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

Check the GIF to get some more idea about it.

Below we have a code example:

🧩 4. flex-flow Property

This property is a shorthand for the flex-wrap and flex-direction together. Now we have an idea about both the properties. In flex-flow, we describe the direction of the flex and the wrapping in a single line, like, flex-flow: wrap column-reverse; This will wrap our flexbox and will align the flex-items in the row-reverse order.

Let's take an example:

/* Assuming .flex-container is the Parent Container */
.flex-container {
  display: flex;
  flex-flow: row wrap;
}

⚗ 5. justify-content Property

To understand the justify-content property, first, we have to understand some terminologies that are connected to flexbox. Consider the image below:

• Main Axis: It is the primary axis through which all the flex-items are laid off. It does not have to be horizontal always. It depends on the flex-direction property.
• Cross Axis: It is the axis perpendicular to the main axis. So, if the main axis is the X-axis(flex-direction:row) then it'll be the Y-axis and vice-versa.

Now, let's come back to the justify-content property again. This property specifies the alignment along the main axis. We mostly use these properties with justify-content:

1. Flex-start: Items are packed to the start of the main axis.
2. Center: Items are packed to the center of the main axis.
3. Flex-end: Items are packed flush to the end of the main-axis
4. Space-between: The first item is packed to the start of the main axis; the end item is packed to the end of the main axis. The spacing between the pairs of each adjacent elements is the same.
5. Space-around: The flex-items are evenly distributed along the main-axis. The spacing between each adjacent elements is the same. But the space before the first item and after the last item is half of the spacing between each of the elements.
6. Space-evenly: The spacing between all the adjacent elements and space before the first item and after the last item all are same. All the spacings are evenly distributed here.

The images below show the alignment properties and how the elements align according to the values:

And the next three,

Here is the syntax:

/* Assuming .flex-container is the Parent Container */
.flex-container {
  display: flex;
  justify-content: flex-start | flex-end | center | space-around | space-between | space-evenly;
}

Here, in this GIF, you can see how the flex-items change depending on the justify-content property.

You can also play with this CSS property in the below live HTML/CSS editor:

📖 6. align-items Property

We have seen that the justify-content property helps us to align items in the main axis. To align items in the cross-axis, we have to use the align-items property. Usually, we use the below values with align-items:

1. Flex-start: Aligns the items to the start of the cross axis.

2. Flex-end: Aligns the items to the end of the cross axis.

3. Center: Aligns the items to the center of the cross axis.

4. Stretch: Stretches the items to fill the container

5. Baseline: The baseline will align the flex-items to the baseline of the content. If you are confused about what actually baseline is, wikipedia) describes it as, “The line upon which most letters "sit" and below which descenders extend.” The below image from Wikipedia will clear about it more.

   

Here is an image that pictorially explains the different values:

Here is the syntax:

/* Assuming .flex-container is the Parent Container */
.flex-container {
  display: flex;
  align-items: flex-start | flex-end | baseline | stretch;
}

You can play with it here,

🥏 7. align-content Property:

The align-content property sets and distributes the space between and around the flex-items along the cross axis of the flexbox. It works like the justify-content for the cross-axis. It'll only work if your container is set to flex-wrap: wrap.

The values that align-content property takes are:

1. Flex-start: Aligns items to the start of the cross-axis of the container.
2. Flex-end: Align items to the end of the cross-axis.
3. Center: Align items to the center of the cross-axis.
4. Stretch: Stretches or takes the full space for the flex items.
5. Space-between: Spaces are evenly distributed.
6. Space-around: Items are evenly distributed between all the lines.

Here is the syntax:

/* Assuming .flex-container is the Parent Container */
.flex-container {
  display: flex;
  align-content: flex-start | flex-end | center | stretch | space-between |
    space-around;
}

In this article, we primarily discussed the flexbox properties that can be applied to a flexbox container. In the next article, we’ll discuss the properties that apply to the flexbox items. Until then, try practicing these properties and share your awesome codes with us.

• Basic HTML
• Basic CSS including CSS Flexbox
• Basic JavaScript

What will we learn in this tutorial?

• The HTML audio tag
• The Data attribute
• The keydown Event Listener
• Adding Classes using JavaScript

👲 The HTML Part

First, let's see the output of the piano.

Here is the live version of it. Try it before jumping into the article.

As you can see, the piano will have different black and white keys. The white keys represent the seven notes of a piano(A-B-C-D-E-F-G), and the black keys will represent the sharp or flat notes. Also, for the background, we'll be using linear gradients. Our HTML is very simple. We'll have an individual divs for every piano key. Our piano consists of 12 keys. So, we will add twelve div wrapped into a parent div. Each div will have a unique data attribute. The data attributes will be used to map the div with their audio. Also, our piano keys will have styles according to the key type. The black keys will have an extra class black, and the white keys will have an extra class white. Other than that, all the div for the keys will have a class called key. And, all the keys will be finally wrapped into a div called piano.

Here's our HTML

<!DOCTYPE html>
<html lang="en">

<head> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Piano</title>
</head> 

<body> 
    <div class="piano"> 
        <div class="key white" data-note="C"></div> 
        <div class="key black" data-note="Cs"></div> 
        <div class="key white" data-note="D"></div> 
        <div class="key black" data-note="Ds"></div> 
        <div class="key white" data-note="E"></div> 
        <div class="key white" data-note="F"></div> 
        <div class="key black" data-note="Fs"></div> 
        <div class="key white" data-note="G"></div> 
        <div class="key black" data-note="Gs"></div> 
        <div class="key white" data-note="A"></div> 
        <div class="key black" data-note="As"></div> 
        <div class="key white" data-note="B"></div> 
    </div>
</body> 
</html>

🎩 The data Attribute in JavaScript

The data attribute in HTML5 helps us to store some extra information without any extra work. Any attribute, whose attribute name starts with data- is a data attribute. So, for our piano, we are storing some extra data called note with the help of the data attribute in each of the div. For example, in the first div the data-note="C" stores a piece of information that this key will represent the C note in our piano. The data attributes can be easily targeted in JavaScript using the dataset keyword. We will discuss it more later in this article. To know more about the data attribute, visit the link here.

🎄 Styling the Piano

The first step of styling an HTML page is to reset the default styles. Here also, we are resetting the margin and padding by targeting the global selector. We are also adding box-sizing: border-box because it'll help us to work with flexbox easily.

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

For the background, we'll add a linear gradient. To speed up the process, I've used an online gradient generator called CSS Gradient. Here's our body.

body {
    background: #0f2027;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #2c5364, #203a43, #0f2027);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #2c5364, #203a43, #0f2027);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

Now, comes the tough part, styling the keys of the piano. First of all, let's add a height and a width for the piano. Because we'll be using flexbox, our flexbox will also be invoked here.

.piano {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
}

🎹 Styling the White Keys

The first thing to style the keys is to give them a height and a width. Otherwise, our keys will not be visible at all. We'll also need a border for each element to separate one from the other.

.white {
    width: 9%;
    min-width: 60px;
    height: 70%;
    background-color: white;
    border: 1px solid #ccc;
}

We are giving the white keys a width of 9% of the parent and a height of 70% of the parent. We are also adding a min-height property so that our keys don't become too small. Our white keys will have a background color of white and a solid border of 1px. The border color will be #CCCCCC, which is a darker shade of white. Here's the output of our piano until now,

🎹 Styling the Black Keys

The styling of the black keys is very similar to the white keys. The main difference is that the height of the black keys is smaller than the white keys.

.black {
    width: 8%;
    height: 45%;
    background-color: black;
}

We are giving it a width of 8% of the parent, a height of 45% of the parent and background color of black.

Here's the output after adding the black keys,

This doesn't look like the one we want. How do we bring the black keys on top of the white ones? The easiest idea is to add some negative margins. Because our black keys have a width of 8%, we need to distribute it equally on two white keys. For that, we’ll add a -4% of left margin and a -4% of the right margin. We’ll also need to add a z-index to bring it forward. So, our complete style for the black keys will look like this,

.black {
    width: 8%;
    height: 45%;
    margin-left: -4%;
    margin-right: -4%;
    z-index: 2;
    background-color: black;
}

Now our piano will look similar to the one we wanted.

🎵 The Audio Tag

We have not added one important portion in our HTML document till now. We need to add audio tags for each key into the HTML element.

The HTML audio tag is used to embed sound into webpages. The src attribute into the audio tag will represent the source of the audio. In the Github repo of this project, you will see that we have a folder called notes, inside the notes folder, we have all the mp3 sounds of the individual keys that we are going to use for this tutorial. Our audio src attribute will refer to the location of these sources. Each of the audio tag will also have a unique ID to determine the individual keys. Here's the remaining HTML part:

<audio src="./notes/C4.mp3" id="C"></audio>
<audio src="./notes/Cs4.mp3" id="Cs"></audio>
<audio src="./notes/D4.mp3" id="D"></audio>
<audio src="./notes/Ds4.mp3" id="Ds"></audio>
<audio src="./notes/E4.mp3" id="E"></audio>
<audio src="./notes/F4.mp3" id="F"></audio>
<audio src="./notes/Fs4.mp3" id="Fs"></audio>
<audio src="./notes/G4.mp3" id="G"></audio>
<audio src="./notes/Gs4.mp3" id="Gs"></audio>
<audio src="./notes/A4.mp3" id="A"></audio>
<audio src="./notes/As4.mp3" id="As"></audio>
<audio src="./notes/B4.mp3" id="B"></audio>

Our notes folder has more notes. But for this tutorial, we are only using standard piano keys(C4 to B4).

🧵 Putting the Parts together with JavaScript

Now comes the most important part - JavaScript. We'll start by selecting few elements of the DOM. These elements will be used to manipulate our piano. First of all, we'll need to select all the keys that are available to us. All the keys have a class of key, so targeting the key class will do the job.

const keys = document.querySelectorAll('.key');

We would also need to target the regulars and the sharp keys. As you know, our regulars have a white class and the sharps have a black class. Let's target them now.

const regulars = document.querySelectorAll('.key.white');
const sharps = document.querySelectorAll('.key.black');

Now that we have selected the elements, the next thing we will do is to add a function to each of the keys.

keys.forEach((key) => {
  key.addEventListener('click', () => playNote(key));
});

Here, we are binding a function with the click event. For each click, the playNote function will be executed. The playNote function takes a single parameter ‘key’, which is the audio of that key. We are using arrow functions here.

Let's move to write the playNote function.

Our function takes a single parameter and that is the key that is pressed. The first thing when writing our function is to identify which key is pressed. How do we do so? Here comes the data attribute in use. At the playNote function call, we are passing the keyparameter. The key parameter is nothing but the divwhich is clicked. So, to start with our function, let's first select the note that is pressed.

let playNote = (key) => {
  const noteSound = document.getElementById(key.dataset.note);
  console.log(noteSound);
};

To access the data attribute, we use the dataset keyword in JavaScript. If we console log the noteSound constant, we will see that it is returning the audio attribute depending on the key that is pressed. Our piano maps the audio id with the data-note attribute of the key to play the correct audio. To play the audio now, we'll use the play method.

let playNote = (key) => {
  const noteSound = document.getElementById(key.dataset.note);
  noteSound.play();
};

Our piano is almost ready. But we can add a few modifications. If you press single key multiple times now, it’ll not play until the audio sound ends completely. We don't want it. We want to play the audio every time the key is clicked. To do so, we have to set the current time to zero each time the key is clicked. Another modification we can do here is to add a class to make it visible which key is pressed. For that, we have to add two classes to our CSS file. One is to show the active white key and another one is to show the active black key. We will just change the background color of the keys.

.white.active {
    background-color: #ccc;
}

.black.active {
    background-color: #333;
}

As you can see, the .white.active class has a darker white background and the .black.active class has lighter black color. To add the colors when keys are pressed, we'll use the classList.add method available in JavaScript.

let playNote = (key) => {
  const noteSound = document.getElementById(key.dataset.note);
  noteSound.currentTime = 0;
  noteSound.play();
  key.classList.add('active');
  noteSound.addEventListener('ended', () => {
    key.classList.remove('active');
  });
};

We are adding the class using the key.classList.add('active') method to a key whenever the key is pressed. And we are removing the class when the audio is completely played. For this, we are listening to an event called ‘ended’ and whenever this event is triggered, we are removing the class using key.classList.remove(‘active’) method.

And we are done building the piano.

🎈 Building the Piano Computer Keyboard Friendly

But, we can stretch our piano further. How about playing our piano using the keyboard? Sounds awesome right? Let's just jump into building it our computer keyboard friendly!

First of all, we have to choose which keys to use. I think the middle layer of the keyboard, i.e., the line of keys with the Caps Lock button is perfect for it, because it has keys in the middle of it above it, just like an original piano. So, we can use the keys from A to J for the regular keys, and keys from W to Y for the sharps.

We will start by adding some CSS to help our users understand which key to press. Inside all the divs, we will add the corresponding keyboard key. So, now our HTML of divs will look like this now,

<div class="piano">
    <div class="key white" data-note="C">A</div>
    <div class="key black" data-note="Cs">W</div>
    <div class="key white" data-note="D">S</div>
    <div class="key black" data-note="Ds">E</div>
    <div class="key white" data-note="E">D</div>
    <div class="key white" data-note="F">F</div>
    <div class="key black" data-note="Fs">R</div>
    <div class="key white" data-note="G">G</div>
    <div class="key black" data-note="Gs">T</div>
    <div class="key white" data-note="A">H</div>
    <div class="key black" data-note="As">Y</div>
    <div class="key white" data-note="B">J</div>
</div>

In the CSS part, we will style the ‘key’ class. The color of the text will be updated in the white and black classes because the colors will be different for the key types. We will use flexbox to position the text. Here’s our complete styling,

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

body {
  background: #0f2027;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #2c5364, #203a43, #0f2027);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #2c5364, #203a43, #0f2027);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.piano {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
}

.key {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 1.2rem;
  font-weight: bold;
  padding-bottom: 20px;
}

.white {
  width: 9%;
  min-width: 60px;
  height: 70%;
  background-color: white;
  border: 1px solid #ccc;
  color: #000;
}

.black {
  width: 8%;
  height: 45%;
  margin-left: -4%;
  margin-right: -4%;
  z-index: 2;
  background-color: black;
  color: #fff;
}

.white.active {
  background-color: #ccc;
}

.black.active {
  background-color: #333;
}

Now, let’s jump back to JavaScript again. We will create two arrays. These arrays will represent the keys. Check the arrays below, and you’ll get an idea.

const whites = ['a', 's', 'd', 'f', 'g', 'h', 'j'];
const blacks = ['w', 'e', 'r', 't', 'y'];

The regular keys will be accessed through the keys a to j, and the sharps will be accessed through the keys w to y.

Now comes the most important section, the logic part. When a key is pressed, a keydown event is triggered. We will use this event to play audio.

document.addEventListener('keydown', (e) => {
  if (e.repeat) return;
  const key = e.key;
  const whiteKeyIndex = whites.indexOf(key);
  const blackKeyIndex = blacks.indexOf(key);

  if (whiteKeyIndex > -1) playNote(regulars[whiteKeyIndex]);
  if (blackKeyIndex > -1) playNote(sharps[blackKeyIndex]);
});

We are adding an event listener to listen to the keydown event. When the event is observed, we pass in a parameter inside the event listener function. To get the key that is pressed, we will use the e.key method. The e.key method will return the key that is pressed. Now, we’ll get the index of the key and will store it inside a variable. To store the white key index, we are using a variable called whiteKeyIndex and for the black key index, we’ll use a blackKeyIndex variable. To get the index, we’ll use theindexOfmethod. Inside the array of whites or blacks, we are checking the index of the key that is pressed using the indexOfmethod. Now that we know the index of the key that is pressed, we will write a condition. The condition is, if a white key is found(-1 means not found, any value larger than it means that the key is found), the playNotefunction will be invoked. And, inside the playNote function, we’ll pass in the key by locating it in the array with regulars[whiteKeyIndex]. We are doing the same step for the black keys also. Please keep in mind, because we are using the array to locate the key, our array should be in the exact order in which we want our piano keys to be set up.

The only thing that is left in our code is that, if you hold a key, the audio will sound ridiculous. Because, when a key is held, the keydownevent gets triggered after every few seconds. To stop this behavior, we’ll check if the key is held down. If it is, then we’ll simply return the function. Returning the function will not execute any code. And this is done by if (e.repeat) return line. And we are done. Our piano is ready.

To check the complete source code, visit the GitHub repo here.

🖼 Conclusion

I hope you enjoyed building this piano. To get such more tutorials, keep visiting nemo.hashnode.dev. Here is another simple JavaScript tutorial about building a covid 19 tracker.

Things we'll implement in building this tracker are

• 👨‍🍳 API
• 🤞 Promises
• 🅱 Bootstrap
• 📉 ChartJS
• 🧠 Brain!

File Structure for the App:

COVID Tracker App

• index.html
• styles.css
• scripts.js

So, let's start.

🦴 Creating the Markup

Our HTML file doesn't contain a lot of code. The only necessary thing we need in the HTML except the boilerplate is the Canvas. The canvas is used by the ChartJS library(which we'll see later) to create a chart.

HTML Markup:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <title>Track Covid Tonight</title>
</head>

<body>
    <div class="container">
        <h1 class="text-center mt-4 heading">Track Covid Tonight</h1>
        <canvas id="myChart"></canvas>
    </div>
    <div class="myList"></div>
    <script src="./scripts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
</body>

</html>

As you can see, our HTML file contains the bootstrap CSS file, a local styles.css file, and the most important scripts.js file. We also need the ChartJS library to display the chart. We have used CDNs(content delivery networks) for bootstrap and the Chart.

The markup has an h1 element which shows the heading and a canvas that renders the chart. We've enclosed both the h1 and the canvas inside the bootstrap class called the container. Now let's see our styles.css file.

🎨Adding Styles

styles.css

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

body {
  height: 100vh;
}

If you want to style the app with your own styles, you can do so. I'd love to see your designs. However, I've kept the app minimal. Our styles.css file resets the default styles and adds height to the body element. We are using CSS vh unit which represents the viewport height. We are setting to 100vhwhich means the body will cover the complete viewport.

🤴 Adding JavaScript Functions

Now, let's jump to the most important file. The scripts.js file. Our scripts.js file contains all the necessary codes to fetch and display the data.

scripts.js

const api = 'https://disease.sh/v3/covid-19/historical/all?lastdays=90';

const getData = async () => {
  const response = await fetch(`${api}`);
  if (response.ok) {
    return await response.json();
  } else {
    return Promise.reject(response.status);
  }
};

const result = getData();
result
  .then((data) => {
    let date = Object.keys(data.cases);
    let total = Object.values(data.cases);
    let deaths = Object.values(data.deaths);
    let recovered = Object.values(data.recovered);

    var ctx = document.getElementById('myChart').getContext('2d');
    let myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: date,
        datasets: [
          {
            label: 'Total Cases',
            data: total,
            borderColor: 'rgba(255, 99, 132)',
            fill: false,
          },
          {
            label: 'Recovered Cases',
            data: recovered,
            borderColor: 'rgba(153, 102, 255, 1)',
            fill: false,
          },
          {
            label: 'Deaths',
            data: deaths,
            borderColor: 'rgba(75, 192, 192, 1)',
            fill: false,
          },
        ],
      },
      options: {
        scales: {
          yAxes: [
            {
              scaleLabel: {
                display: true,
                labelString: 'Numbers in Thousands',
              },
            },
          ],
          xAxes: [
            {
              scaleLabel: {
                display: true,
                labelString: 'Date(DD/MM/YYYY)',
              },
            },
          ],
        },
        title: {
          display: true,
          text: `Coronovirus Cases in India for Last Three Months`,
        },
      },
    });
  })
  .catch((error) => {
    console.log('Error: ', error);
  });

Don't get scared. The file looks scary, but it isn't. We'll understand the file by breaking in into parts.

Let's start at the top. We will use an API called disease.sh to fetch our data. I hope you know what an API is? API stands for Application Programming Interface. An API works as a waiter between the client and the server to put it in easy words. We ask for data from the server using the API, and the server returns our data through the API. It works as an intermediary.

We'll use the disease.sh to fetch coronavirus cases for the last 90 days. To fetch data from a date range, the API uses the below endpoint

https://disease.sh/v3/covid-19/historical/all?lastdays=NO-OF-DAYS

We are setting the number of days to 90. Then we are fetching the data using an async function. First, let's see how the data looks like,

I've reduced the days to 10 to make it look cleaner here. This data might look cluttered in your browser. I've used a JSON formatter extension to look it cleaner. So, the API returns us three objects, i.e., cases, deaths and recovered. Each of the objects contains a key-value pair of date and numbers. The numbers represent the number of cases, deaths and recoveries. I think you get the idea. Now let's see how we fetch the data using the API.

const api = 'https://disease.sh/v3/covid-19/historical/all?lastdays=90';

const getData = async () => {
  const response = await fetch(`${api}`);
  if (response.ok) {
    return await response.json();
  } else {
    return Promise.reject(response.status);
  }
};

We've added basic error handling to the function. If the response.ok is true, only then our promise will resolve. Otherwise, it'll reject and return an error. Also, we are using JavaScript template literals to fetch the API in our getData function. After creating the function we will be storing the data returned in a variable called result. Because the function will also return a promise, we have to handle it using a thenstatement. If you are not comfortable with JavaScript Promises, you can check the MDN docs.

const result = getData();
result
  .then((data) => {
    let date = Object.keys(data.cases);
    let total = Object.values(data.cases);
    let deaths = Object.values(data.deaths);
    let recovered = Object.values(data.recovered);
};

This is the first part of our thenstatement. First, we are storing the dates in an array called date. We are sorting the data in arrays because ChartJS supports arrays. The Object.keys method returns an array containing the key properties from an object. We are targeting the keys because the API returns the values in a key-value pair of dates and cases. Then we are targeting the total cases, deaths and recoveries similarly and storing them to corresponding variables. You can console.log the values to see how the arrays look.

We are almost done with the data. The only thing which is left now is visualizing the data. To visualize, we'll be using a popular data visualization library called Chart.js. It is a lightweight library which can make it easy to visualize data in popular formats like a bar chart, line chart, pie chart and more. We'll be using the line chart here.

Let's see the myChartfunction.

    var ctx = document.getElementById('myChart').getContext('2d');
    let myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: date,
        datasets: [
          {
            label: 'Total Cases',
            data: total,
            borderColor: 'rgba(255, 99, 132)',
            fill: false,
          },
          {
            label: 'Recovered Cases',
            data: recovered,
            borderColor: 'rgba(153, 102, 255, 1)',
            fill: false,
          },
          {
            label: 'Deaths',
            data: deaths,
            borderColor: 'rgba(75, 192, 192, 1)',
            fill: false,
          },
        ],
      },
      options: {
        scales: {
          yAxes: [
            {
              scaleLabel: {
                display: true,
                labelString: 'Number of Cases',
              },
            },
          ],
          xAxes: [
            {
              scaleLabel: {
                display: true,
                labelString: 'Date(DD/MM/YYYY)',
              },
            },
          ],
        },
        title: {
          display: true,
          text: `Coronavirus Cases in the World for 90 Days`,
        },
      },
    });

The first thing we are doing here is, we are targeting our canvaswhich has an ID of myChart. The getContextgives access to the canvas tags 2D drawing functions. Then using the Chart constructor, we're creating a function that contains all the necessary configurations for the chart. The type:'line' specifies the type of chart. The dataobject holds all the datasets, labelsand other data related configurations. We are passing our date variable as the label for our chart using labels: date. The datasetsare an array of objects which hold the label, data, and colors for each line. There are a lot of other configurations available. But to keep this article simple we are using minimal options. You can check their documentation to get an idea about available options here. After the dataobject, we are setting up a few options for the look. The labels for x and y axes are set using the yAxes and xAxesobjects. And the title for the chart is setup using the titleobject. We have completed our code. The last thing left is to catch any error. The catchstatement is used in promises to catch errors. For this app, we'll catch the error and console.log it into the console.

.catch((error) => {
    console.log('Error: ', error);
});

After following all the steps, our app will look like this,

You can check the live version of the app here. And to see the source code, visit here.

I hope you enjoyed building this tracker. I've tried to keep it simple. Now try building your own COVID tracker and share it with us.

I am not going to focus a lot on the styles; instead, we’ll try to understand the logic about creating it. Also, the theme switcher will be persistent. The selected theme will be stored in the browser and will apply the same theme even after reloading. We’ll implement this using the browser’s local storage. So, let’s start building.

Things you need to know

• Basic HTML - Learn HTML
• Basic CSS - Learn CSS
• Little JavaScript - Learn JavaScript and you are good to go.

Here's our Complete App

Complete Theme Switcher One thing I must explain before we start building the Markup is custom data attributes in HTML.

What are HTML Data Attributes?

There may be situations when we have to store some information associated with DOM elements. Let's take an example, suppose we have a list of employees and we want to save their IDs, which we can use to manipulate them using the DOM. Before HTML5, we could have used class or IDs, but this is not an impressive solution. HTML5 introduced us to the concept of Custom Data Attributes. Any attribute that starts with data- is a custom data attribute. We also have special HTML data tags in HTML5.

For example, we can name data-identity to create a custom data attribute for employee ID. Two things to keep in mind while creating a data attribute is that the value that is stored inside data attributes can only be of string type. And the second point is that we cannot use any valid HTML attribute as a name for data attributes. Like, data-id is not appropriate.

We can access these attributes in JavaScript with dataset property.

Suppose we want to access the identity attribute from before. We can access this using the below codes,

let employee = document.getElementByClassName("employee-table");
let empID = employee.dataset.identity;
// Or
let empID = employee.dataset['identity']

Now that you have a basic understanding of the data attributes, let's start building our Theme Switcher.

File Structure:

|--themes
|------dark.css
|------light.css
|------purple.css
|------sky.css
|--index.html
|--script.js
|--style.css

Now that we know the file structure, let's begin the coding.

Building the Markup

As you can understand from the gif above, we are not using any high-level design. We have a simple header section with the name of our app and the buttons to change the themes. Our body contains an image and some random texts. We are also using the Roboto font to style the document.

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Theme Switcher</title>
    <link rel="stylesheet" href="./style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" id="switcher-id" href="">
</head>
<body>
    <header>
        <h1>???? THEME SWITCHER</h1>
        <div class="theme-switches">

            <div data-theme="light" class="switch" id="switch-1"></div>

            <div data-theme="sky" class="switch" id="switch-2"></div>

            <div data-theme="purple" class="switch" id="switch-3"></div>

            <div data-theme="dark" class="switch" id="switch-4"></div>

        </div>
    </header>

    <div class="container">
        <div class="box">
            <img src="https://images.unsplash.com/photo-1597926588114-2d9c1190b5c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=923&q=80"
                alt="Placeholder" class="image">
            <div class="text">
                <h3>A Sweet Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                tempor incididunt ut labore et dolore magna aliqua. Ut enim 
                ad minim veniam, quis nostrud exercitation ullamco laboris 
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
                nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
                sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>
    </div>
    <script src="./script.js"></script>

</body>

</html>

That is just a few lines of Markup. We have added the fonts in the header, default styles stylesheets, and a stylesheet link with a blank href. This blank href will be used to attach our theme designs. You can also see we are using a data-theme custom data attribute to keep track of the theme selected. We will use the IDs of theme switches to design the switches. In our main body, we are using an image from Unsplash. And some random text. And finally, in the end, we are linking our script file.

Styling Our Default CSS

As you might have observed, we have two stylesheets tag in our HTML document. The first stylesheet is responsible for all the default styles our website will have, like the font-sizes, viewport height-width, image sizes. And the second one will be responsible for the specific theme designs.

We’ll also use CSS variables in this example. The benefits of using variables are that we can declare a variable once and use it multiple times in a document. Declaring variables in CSS are pretty easy. We usually define them in the :root selector. Any name that starts with -- is a CSS variable. Example,

root {
    --text-color: #000;
    --back-color: #eee;
}

In our default stylesheet, we will be declaring four variables that will be used for the theme switches. Then we'll reset our document. We'll use flex-box to design the theme switches. The display:flex property set on the parent element will make the child elements horizontal. The justify-content:center will center the elements. For the growing effect on the switches, we are using the CSS scale transform property. We are scaling the element 1.2 times the original. And for the smooth effect, we are using transition: 0.3s all;. Then, we are using our variables to design the switches. We are adding the variables as background-color on the switches to design them. You can check the code, and you'll get a clear idea. We are also using some basic media-queries for responsiveness. I think I don't have to explain the whole code because it is pretty basic. And I've discussed the portions I thought needs some explanation. Here's the full CSS code.

:root {
  --light: #ffffff;
  --sky: #7f9cf5;
  --purple: #97266d;
  --dark: #81899b;
}

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

body {
  font-family: 'Roboto', sans-serif;
  height: 100vh;
  overflow-x: hidden;
}

header {
  text-align: center;
  font-size: 30px;
  padding: 50px 0;
}

.theme-switches {
  display: flex;
  justify-content: center;
}

.switch {
  border: 2px solid black;
  border-radius: 50px;
  height: 30px;
  width: 30px;
  margin: 10px;
  cursor: pointer;
}

.switch:hover {
  transform: scale(1.2);
  transition: 0.3s ease-in-out;
}

#switch-1 {
  background-color: var(--light);
}

#switch-2 {
  background-color: var(--sky);
}

#switch-3 {
  background-color: var(--purple);
}

#switch-4 {
  background-color: var(--dark);
}

.container {
  max-width: 80%;
  margin: 0 auto;
}

.box {
  display: flex;
  justify-content: space-around;
  margin-top: 100px;
}

.box img {
  max-height: 300px;
  width: auto;
  border-radius: 20px;
  margin: 20px;
}

.text {
  width: 50%;
}

.text h3 {
  font-size: 35px;
  padding: 30px 0;
  font-weight: 600;
}

.text p {
  font-size: 20px;
  font-weight: 400;
}

/* Media Query */
@media (max-width: 768px) {
  header h1 {
    font-size: 25px;
  }

  .box {
    display: flex;
    flex-wrap: wrap;
  }

  .box img {
    max-width: 80vw;
  }

  .text {
    width: 80%;
  }
}

Styling Our Themes

Now, let's set our theme files.

First, let’s understand the properties that change when we change a theme. Let's make a list of them.

1. Heading Background
2. Text Colors
3. Image Border
4. Body Background Color Now that we've outlined the colors we’ll be changing, most of our work is done. First, create a file called light.css for the light styles.

light.css

:root {
  --back-color: #eee;
  --primary-color: #000000;
  --header-back: #5d5d5d;
  --header-text: #eee;
}

body {
  background-color: var(--back-color);
  color: var(--primary-color);
}

header {
  background-color: var(--header-back);
  color: var(--header-text);
}

.box img {
  border: 2px solid var(--primary-color);
}

As you can see, we've defined the colors we'll be using in the light theme as variables. Then we are just adding the colors to the properties we want to change. Pretty simple, right? I am attaching the other theme files below,

sky.css

:root {
  --back-color: #c3dafe;
  --primary-color: #3c366b;
  --header-back: #5f718d;
  --header-text: #eee;
}

body {
  background-color: var(--back-color);
  color: var(--primary-color);
}

header {
  background-color: var(--header-back);
  color: var(--header-text);
}

.box img {
  border: 2px solid var(--primary-color);
}

purple.css

:root {
  --back-color: #fed7e2;
  --primary-color: #702459;
  --header-back: #874f5e;
  --header-text: #eee;
}

body {
  background-color: var(--back-color);
  color: var(--primary-color);
}

header {
  background-color: var(--header-back);
  color: var(--header-text);
}

.box img {
  border: 2px solid var(--primary-color);
}

dark.css

:root {
  --back-color: #81899b;
  --primary-color: #f9ffee;
  --header-back: #1a1d24;
  --header-text: #eee;
}

body {
  background-color: var(--back-color);
  color: var(--primary-color);
}

header {
  background-color: var(--header-back);
  color: var(--header-text);
}

.box img {
  border: 2px solid var(--primary-color);
}

As you can see, all our themes have the same styles, we’re just changing the color variables, and everything is ready.

The JavaScript Part

Here comes the most crucial part. Our JavaScript code is responsible for all the theme-changing things. Let’s first understand the logic behind our script file.

First, we’ll loop through all the switches and store the dataset value into a variable. Then, we’ll pass the value into a function that will set the theme accordingly.

We’ll get all the switches used in HTML using their class name and store those into a variable called switches.

let switches = document.getElementsByClassName('switch');

Then we’ll loop over the switches and will listen for the click event on the switches. We’ll store the dataset value clicked inside a variable called theme in our case. I’ll be using a for...in loop here. If you are not familiar with for...in loop, check this article.

for (let i of switches) {
  i.addEventListener('click', function () {
    let theme = this.dataset.theme;
    console.log(theme);
  });
}

For your understanding, I’m first console logging the value that is clicked. Every time we click on a switch, it’ll console.log its custom data attribute value. You can see the gif to get an idea.

Console Logging Values

Now we have to create a function called setTheme, which will set our theme. Let's see how it looks,

function setTheme(theme) {
  if (theme == 'light') {
    document.getElementById('switcher-id').href = './themes/light.css';
  } else if (theme == 'sky') {
    document.getElementById('switcher-id').href = './themes/sky.css';
  } else if (theme == 'purple') {
    document.getElementById('switcher-id').href = './themes/purple.css';
  } else if (theme == 'dark') {
    document.getElementById('switcher-id').href = './themes/dark.css';
  }
}

We are passing the parameter which we got from the dataset into this function. We can also achieve the same with a switch case statement. Our blank stylesheet in the HTML has the switcher-id id in it. We are targetting that element and adding an href to it. We are keeping all our theme styles in a separate folder called themes. And we have to call this function from the loop. So, our final code for the loops will be,

for (let i of switches) {
  i.addEventListener('click', function () {
    let theme = this.dataset.theme;
    console.log(theme);
    setTheme(theme);
  });
}

I think it's making sense now. We are almost done. The final thing is to implement the local storage here. The stored data in local storage is saved across browser sessions, and it is pretty similar to session storage. Though, the significant difference between these is, local storage does not have any expiry. Local storage creates a key-value pair to store data.

The localStorage.getItem, with a name parameter, will create a key to save our values. In our example, we’ll be using a key called theme. So, our first step is to initiate it.

let style = localStorage.getItem('style');

The default property of a local storage element is null. So, our next step is to check if it’s null and if it is, we will set a theme value for it.

if (style == null) {
    setTheme('light');
} else {
    setTheme(style);
}

Here, if the value is null, we are setting the light theme as default. Otherwise, it'll set the value that is stored in the local storage. And finally, We have to set the value as per the clicked switch. We’ll achieve this using the setItem property of local storage.

localStorage.setItem('style', theme);

We’ll add this code before the end of the setTheme function. So, our complete script.js file will look like this,

let switches = document.getElementsByClassName('switch');

let style = localStorage.getItem('style');

if (style == null) {
  setTheme('light');
} else {
  setTheme(style);
}

for (let i of switches) {
  i.addEventListener('click', function () {
    let theme = this.dataset.theme;
    setTheme(theme);
  });
}

function setTheme(theme) {
  if (theme == 'light') {
    document.getElementById('switcher-id').href = './themes/light.css';
  } else if (theme == 'sky') {
    document.getElementById('switcher-id').href = './themes/sky.css';
  } else if (theme == 'purple') {
    document.getElementById('switcher-id').href = './themes/purple.css';
  } else if (theme == 'dark') {
    document.getElementById('switcher-id').href = './themes/dark.css';
  }
  localStorage.setItem('style', theme);
}

To learn more about the local storage web API, check this MDN article. You can see the value of local storage from the Inspect-->Application-->Local Storage. We can check the gif below to see how it changes. Theme Changing

I hoped you learned something new in this article. Feel free to comment on your thoughts. And you can find the complete source code here.

The Rest Operator 💆‍♂️

Gif from Giphy

ES2018 introduced us the concept of rest operator. The rest operator looks like any regular argument except that it has three dots(...) in front of it. The rest operator will gather all the elements passed in the function argument and will create an array with it. Let's see it in action.

function letsRest(...args) {
    console.log(args);
}

letsRest(1, 2, 3, 4); // [1, 2, 3, 4]

We are passing the arguments as rest parameters with the help of ...args argument in the function definition. The parameters passed in the function will now create an array.

We can work with this array now. Any array methods can also be implemented in this array. And also, our function now can take an indefinite amount of arguments. Now, let's build a function with the help of rest parameters that will return the sum of all the arguments passed.

function sumAll(...args) {
    let sum = 0;
    for(let arg of args){
        sum = sum + arg;
    }
    return sum;
}

sumAll(1, 2, 3); //6
sumAll(1, 2, 3, 4); //10

We are using the rest operator to pass arguments and using a for-of loop to loop through all the elements and adding them into a variable sum. We can also pass regular parameters along with rest parameters in a function.

function iLove(name, ...items){
    console.log(`I am ${name}, and I love ${items}`)
}
iLove("nemo", "apple", "banana", "lemon") 
//I am nemo, and I love apple,banana,lemon

Here, we are combining normal parameters along with rest parameters. One thing to keep in mind when working with rest operators is that the argument with rest operator has to be the last argument passed. Because its job is to collect all the remaining arguments passed. So, the above example will work perfectly. But in the below code, we are passing a third argument after the rest parameter. This will return an error Uncaught SyntaxError: Rest parameter must be the last formal parameter.

function iLove(name, ...items, age){
    console.log(`I am ${name}, I am ${age} and I love ${items}`)
}
iLove("nemo", "apple", "banana", "lemon", 18);

The Spread Operator 🧈

Gif from Giphy

As the name suggests, the spread operator spreads the elements. It looks exactly like the rest operator. But, it works like a complement to the rest operator. The rest operator is defined in the function definition.

The spread operator will expand an array, string or object. Let's say, we want to clone all the values inside an array into a new one. Without the spread operator, we'll have to manually define all the values inside the new array like this,

let arr = [1, 2, 3];
let arr2 = [arr[0], arr[1], arr[2], 4, 5, 6]

Do you think this is an efficient solution? This needs a hell lot of writing. The spread operator makes it much easy to do such an operation.

let arr = [1, 2, 3];
let arr2 = [...arr, 4, 5, 6];

console.log(arr2); //[ 1, 2, 3, 4, 5, 6 ]

We can also copy an array by simply using,

const arr3 = [...arr];

We can even clone an object with this syntax,

let obj = {
    1: 👩,
    2: 👨,
    3: 🧑
}
const obj2 = {...obj};

console.log(obj2); //{ 1: 👩, 2: 👨, 3: 🧑 }

Conclusion 🙇‍♂️

Both the rest and spread operator might seem confusing because both of them uses a ... syntax. So, how do we know where to use what? I remember it like this,

Rest Packs the Elements, Spread Unpacks the Elements.

Depending on your use case, you can choose which one you need.

If you liked this article, leave a ❤ and a comment. You can also follow me on twitter.

Event propagation is an important concept when dealing with JavaScript events, and it is also crucial in terms of interviews. So, in this article, I'll try to help you understand the concept of Event Propagation.

Event Propagation

To put it in easy words,

The parent elements of a child will also receive events that happen to the children.

The easy words seem tough? Don't worry. Let's understand it with example.

<div class="container">
      <ul>
          <li>
            <button>
                <a href="#" id="item">Some Text</a>
            </button>
        </li>
      </ul>
</div>

Look at the above snippet. We have a a tag nested inside a button which is inside a list item. Suppose we are clicking the link inside the button. The click will generate a click event for the a tag, and it will start to propagate through all the outer elements. To get a better idea about propagation, let's understand the plain English meaning of the word "propagate". It basically means "transmitting from one generation to another" or "moving from one element to others". So, when I say "it will start to propagate through all the outer elements", it means the event will move from one element to the other.

Event Propagation is the order in which the propagation happens. JavaScript has two types of Event Propagation

• Bubbling
• Capturing

Bubbling means that the event propagation will start from the item that was clicked and will bubble up to the root node, starting from the closest one.

Capturing is the opposite of bubbling. It starts from the root element and then propagates by capturing all the child element until it reaches the target element that was clicked.

Event Bubbling

It is the default event propagation in JavaScript. As we understand earlier, bubbling starts from the element that was clicked and then it propagates all the way, up to the root. To see it in action, let's add some JavaScript to the HTML that we already have.

let item = document.getElementById('item');
let button = document.querySelector('button');
let list = document.querySelector('li');

// Event Bubbling
item.addEventListener('click', (e) => {
  console.log('Clicked on the Item');
});

button.addEventListener('click', (e) => {
  console.log('Clicked on the Button');
});

list.addEventListener('click', (e) => {
  console.log('Clicked on the li');
});

First of all, we are selecting the item id, button and the li Then, we are adding some event handlers to them. We are listening to the click event here. Callback functions are passed to each event handlers, which will console log the text that we are giving each time the event handler listens.

Now, if we click the a tag inside the button, we will see that our console logs out the output in the exact below order.

Clicked on the Item
Clicked on the Button
Clicked on the li

This is happening because the event starts propagating from the item that was clicked to the outer parents. This will bubble up to the root element. But because we do not have any event handlers associated with those, we can't see it.

Event Capturing

Now let's see an example of event capturing. The addEventListener can take a third parameter. It is a Boolean value which specifies whether the event capturing is true or false. The default value of the parameter is false. This is the reason why event bubbling happens by default. There can be situations where we want to fire the outer elements first before reaching the origin. So, to implement event capturing, we just have to put the third parameter. And our same above code will be like this -

let item = document.getElementById('item');
let button = document.querySelector('button');
let list = document.querySelector('li');

// Capturing
item.addEventListener(
  'click',
  (e) => {
    console.log('Clicked on the Item');
  },
  true
);

button.addEventListener(
  'click',
  (e) => {
    console.log('Clicked on the Button');
  },
  true
);

list.addEventListener(
  'click',
  (e) => {
    console.log('Clicked on the li');
  },
  true
);

Now, clicking the a tag will console log the output in the exact below order,

Clicked on the li
Clicked on the Button
Clicked on the Item

The capturing starts from the root element and then comes to the origin. Because only the topmost li has an event handler, so it starts logging from the li and comes down to the origin which is the item.

The stopPropagation Method

There may be cases where you don't want the propagation to occur. In such cases, we can use the stopPropagation() method into the callback function to stop it. For example, suppose in our first code, we don't want to propagate the event in the third handler. To prevent the propagation, we specify event.stopPropagation() into the callback of the second handler. Reaching the second handler, the propagation would stop.

The Code

let item = document.getElementById('item');
let button = document.querySelector('button');
let list = document.querySelector('li');

// Event Bubbling
item.addEventListener('click', (e) => {
  console.log('Clicked on the Item');
});

button.addEventListener('click', (e) => {
  console.log('Clicked on the Button');
  event.stopPropagation();
});

list.addEventListener('click', (e) => {
  console.log('Clicked on the li');
});

If you click on the button now and check the console log, the output will be,

Clicked on the Item
Clicked on the Button

The event stops propagating after reaching the second handler. The same can also be applied for the capturing.

I hope this article helped you to clarify the JavaScript propagation. If this helped you, click the ❤ and leave a comment. You can also follow me on twitter.

Also, check this article about Recursion.

What is Recursion?

If you search "recursion" in Google, every time you'll get a message "Did you mean: recursion". And every time you click on the Did you mean link, it'll again show you the same. And this is after all what recursion actually means, Calling something again and again.

In terms of computer programming, a recursive function is a function that calls itself until it satisfies some exit condition. Otherwise, we'll be stuck into an infinite loop or in case of JavaScript, the call stack will be overflowed. Let's see an example to understand it better. We all know what a factorial is. We get factorial of a number if we continue multiplying the number itself with a value smaller than it until we reach 1. For example, the factorial for number 3 will be, 3 2 1 = 6. Here's a function that returns the factorial of a number.

function factorial(r) {
    if(r <= 0) return 1;
    else return r*factorial(r-1);
}
console.log(factorial(3)); //6

We are passing the number with the parameter r. How is this a recursive function? If you look at the else condition, you'll find that it is calling the function itself until it matches the exit condition which is r <= 0. You can imagine that the same can be achieved using a loop. And you are right. Here is the same function using a loop.

function factorial(r) {
    let factor = 1;
    for(let i = r; i > 1; i--) {
        factor *= i;
    }
    return factor;
}
console.log(factorial(3)); //6

Rather, using a loop will be a better choice in case of such small functions. In JavaScript running a loop is generally cheaper than calling a function multiple times. The time complexity will be higher with a recursive function. But there are multiple instances where loops are not worth. They make the function more complex. And, any recursive function can be implemented using loops. Now that we know what a recursive function is let's move on to building a recursive function by ourselves.

Creating a Recursive Function

One most important thing to keep in mind while working with recursive function is to Declare a termination condition. Otherwise, our function will overflow the call stack.

How do we declare a termination condition? Most simply, we can put it inside an if statement.

Here in this example, suppose we want to write a recursive function that returns the sum of a given range. So, if we pass 3, it will output the sum of the range from 1 to 3, i.e., 1 + 2 + 3 = 6.

Step 1: Declare a function name. It'll take a single parameter which will specify the range. Feel free to use arrow functions if you want.

function sumRange(r){

}

Step 2: Declare a termination statement. When do we want this function to exit? When our range is 0, right?

function sumRange(r) {
    if(r <= 0) return 0;
}

Step 3: Your logic where the magic happens.

What do we want to achieve here? We want to do (current range + (range-1)) in a loop until our range becomes 0. We are getting the current range from r. How do we get the (range-1)? We call the function again and again by passing the parameter as (r-1).

function sumRange(r) {
    if(r <= 0) return 0;
    return r+sumRange(r-1);
}

The function flow:

1. First, we call our function by passing the value 3.

   sumRange(3);
   

2. The above call runs the function. First, it checks the if statement. Finding it false, it'll continue to work with the else. At else, we return 3 + the value of sumRange(3-1).

   return 3 + sumRange(2);
   

3. The above logic also works here. Except that, this time, our range was 2. So, it'll return 2 + sumRange(2-1)

   return 2 + sumRange(1);
   

4. Same happens again. Now the range is 1. So the returning sumRange will be (1-1).

   return 1 + sumRange(0);
   

   When the range becomes 0, our if condition will run and it will return 0.

Now that all our function calls has returned a value, everything will start to unwind. The innermost function will return first.

So, sumRange(0) will return 0.

sumRange(1) will return 1 + sumRange(0) or, 1 + 0 = 1

sumRange(2) will return 2 + sumRange(1) or, 2 + 1 + 0 = 3

sumRange(3) will return 3 + sumRange(2) or, 3 + 2 + 1 + 0 = 6 and we get the answer 6 and we are done.

If you read the article to this point, a big thank you 😊. I hope you get some basic understanding of how recursion works and how to write a recursive function.

Recently I've completed the #2Articles1Week Challenge for four straight weeks here on Hashnode. And there are a few things I learned from the challenge which I want to share with you. However, I am not an expert blogger. But I felt that people like me, who overthink a lot before doing anything, might get inspiration from this post.

My First Encounter with Hashnode

The first time I heard the name Hashnode was in the Lockdownconf organized by freecodecamp. So, I visited the Hashnode portal just out of curiosity. I created an account. Till then, I didn't think of posting a single article on my blog. The first thing that caught my eyes was the design of hashnode. The simple design of the blogs looks cool to me. Also, it's free! And, you can set up your blog with your domain! How awesome is that! Also, they have a discord server where you can get instant help if you face any problems. Even many paid services do not provide such a service to their users! 😉

The Challenge

I started writing on my blog when I heard about the #2Articles1Week challenge. Before that, I was reading posts published by others. I thought, at least, let's try to write something. And I started writing for my blog.

GIF from Giphy

The Problems! The Opportunities!

• The Language: The first problem when I started writing was the language barrier. My native language is Bengali. I've studied all my life in Bengali until college. So my grip on English is not very good. The writing was an excellent opportunity for me to experiment with the language. After writing in English for more than a month now, I can confidently say that my English has significantly improved.

• Markdown! What the Heck! Before Hashnode, I never used a Markdown editor. The places where I wrote articles before usually use some WYSIWYG editor. But after exploring the power of Markdown, now I feel like why all the programming blogs don't use it! It is so easy and convenient, especially when writing code! I also prefer writing my articles offline first. So, I downloaded this fantastic markdown editor called Typora.

• What should I Write? A big question for a beginner like me. Thinking and writing about two articles in a week for a month is a tough job, to be honest. Though, there are some incredible people like Daily Dev Tips who have decided to take this challenge to another level and have decided to go for a #7Articles1Week! 😎
  This challenge opened a new angle to my thinking skills. It has become much easier for me to think about a topic to write. And also, hashnode has a request for article(rfa) section. We can always choose a topic from there as well.

• Researching the Topic: When you are writing something to explain things to someone else, you've to have a good understanding of the topic. I study the subjects I write from various sources to clear my concepts more. And try to make it easily understandable for the readers. And through this, I also got the opportunity to know about the topics in-depth! If you don't like researching, I'd suggest you to start writing about it. Make your personal notes. You'll find that researching something new you learned has become second nature for you.

• Who Will Read My Articles? It is something that I was never worried. My sole intention in writing is to improve myself. My thought about this is,

  Either We Win, Or We Learn.

  And learning is always my topmost priority. 😁 But obviously, you need someone to see your work. After all, you are devoting a fair amount of time to this. Here comes the most beautiful part of the Hashnode community. It has its own userbase. So, you'll definitely get a fair amount of traffic from there. Also, It's like a family. Many helpful people are around here, who are willing to read and suggest about your article. Not everyone knows about everything. Maybe your explanation helped someone to understand something better. Even if a single person benefits from your writing, it's an outstanding achievement, I believe.

• Pushing the Limits. There were multiple times when I didn't felt like writing a single line at all. But the challenge and the dedication to this challenge made me push my limits. Even in such situations, I managed to write an article. Pushing myself helped me increase my willpower. Sometimes, it is vital to challenge your potentials. It teaches you more about yourself.

• THE BADGE! And finally, the biggest achievement of doing this challenge is the badge 😍! After completing this challenge, you'll be awarded the GOLD BADGE. And this honor will be showcased in your blog!

Final Words

In every way, this is a win-win for all. And if you are not motivated yet to start, here's a great article on freecodecamp about why every programmer should have a blog.

I shared with you what I learned from the challenge. And I hope you'll also find it motivating to take the challenge. And, if you are the one who has successfully completed it, share your learnings from the challenge! 😀

We all have learned about rounding off numbers in our school. We usually increase the integer if its value is >=.5 and decrease it, if it is <= .4.

1.5 ≈ 2

1.4 ≈ 1

We all know JavaScript has a built-in object called Math, which has properties and methods for mathematical constants and functions.

We have three methods that are mostly used to round off a number in JS, i.e., Math.ceil(), Math.floor(), Math.round(). Let's explore them in this article.

🎳 Math.ceil

Math.ceil function in JavaScript is used to round of a number that is passed into it to its nearest integer in upward direction of rounding. What to I mean by upward direction? Towards the greater value. Math.ceil() takes only one parameter that is the value to be rounded. So, if we have a value of 1.4, Math.ceil() will round off it to 2.

console.log(Math.ceil(1.4)); 
//2
console.log(Math.ceil(1.6)); 
// 2
console.log(Math.round(-1.4));
// 1
console.log(Math.round(-1.6));
// 1

Photo from Wikipedia

🎳 Math.floor()

Where the Math.ceil method returns the smallest integer greater than or equal to the value we pass, Math.floor returns the largest or equal integer less than the given value. It also takes a single parameter.

Photo from Wikipedia

So, if we pass the same value 1.4 in Math.floor, we'll get 1 in return. Even if we pass 1.6, we'll also get 1.

console.log(Math.floor(1.4));
// 1
console.log(Math.floor(1.6));
// 1
console.log(Math.floor(-1.4));
// -2
console.log(Math.floor(-1.6));
// -2

🎳 Math.round()

Math.round() rounds off the number depending on the fractional part of the number. So, if the fractional part is >=.5, it'll return the smallest integer greater than the passed value and if the number is <=.4 we'll get the largest integer smaller than the number we pass.

console.log(Math.round(1.4));
// 1
console.log(Math.round(1.6));
// 2
console.log(Math.round(1.5)); 
// 2
console.log(Math.round(-1.4));
// -1
console.log(Math.round(-1.6));
// -2
console.log(Math.round(-1.5));
// 2

So, Math.round() can go both upward and downward depending on the fractional Part.

🎳 Math.trunc()

There's another method available in JS Math object that is Math.trunc(). Math.trunc() returns the integer part of a number by removing any fractional part of the number.

console.log(Math.trunc(1.4));
// 1
console.log(Math.trunc(1.6));
// 1
console.log(Math.trunc(-1.4));
// 1
console.log(Math.trunc(-1.6));
// 1

Conclusion

Rounding off numbers is an essential part of programming. I hope this article revisited your memories about different built-in rounding off methods we have in JavaScript. Leave an ❤ if you found this article helpful. 😊

Gif from Giphy

Theme and Icon Pack 🚚

The visual appearance of the IDE is important to me. I use the Material Theme by Mattia Astorino and along with the theme, I use the Material Icon Theme by Philipp Kief. I use the Material Theme Ocean High Contrast Color theme for the editor.

Another extension I use to beautify my editor is the Color Highlight. It just highlights the colors in my code.

Code Formatter and AutoComplete 🛺

• Prettier, obviously! Who doesn't use this! Prettier is an awesome extension that format the code beautifully. The format on save feature is always on in my editor. I prefer to use 2 spaces and single quotes. I've updated the prettier settings accordingly and now each time I save my document, it formats my code with 2 spaces and single quotes. It also adds the semicolons at the end which I forgot to put every time. Gif from https://scottsauber.com
• Auto Rename Tag by Jun Han! This does exactly what it says. It automatically renames the corresponding tag. It is useful to speed up the workflow.
• HTML CSS Support by Ecmel is the next one in my list. It gives the ability to auto-complete the class and ID attributes in the HTML file. It'll show all the classes and ids to the HTML file which you have defined in your CSS file.
• Bracker Pair Colorizer 2 allows the matching brackets to be identified with colors. You can also specify which colors to use to colorize your bracket pairs.

Miscellaneous 🚡

• Live Server by Ritwick Dey. I think most of you know what this extension does. It creates a local server which supports live reload. Kind of like Nodemon for static pages.
• Quokka. I've recently started using it and it already seems awesome to me. Quokka is used for testing JavaScript code in the Visual Studio code editor. With Quokka, you don't have to console.log() everything. It works like a live server for your JavaScript or TypeScript code. Gif from Quokkajs.com
• Live Sass Compiler is also an awesome extension if you are working with Sass. I used it before. It compiles your Sass file in the runtime. It is based on the Libsass library. But libsass doesn't support some latest Sass features like @use. So instead of using this, I've started to use their official npm package with the command line.

Some More Useful Extensions Shared By the Awesome Tapas Adhikary

• File Header Comment allows you to add a timestamp, copyright or any other important information you want to add to the file as a comment.
• Import Cost This is quite a useful extension. It shows the size of the file we are importing inline. It uses webpack with the babili-webpack-plugin to calculate the size of the file.
• WakaTime is the next plugin in our list. WakaTime gives you analytics about your programming activity. It automatically records your metrics, insights and tracks time of your activity in your favourite code editor. You just have to install the extension and give it the API key. You can get the API key by registering to their official site. Image from WakaTime
• Web Template Studio Makes your workflow way faster by giving you boilerplate code for various front-end, backend, pages and cloud services. It gives a wizard-based experience to help you speed up your process.
• Night Owl is A Visual Studio Code theme for the night owls out there. 😉 Check it out yourself and you'll fell in love with it.

So, these are some of our favourite VS Code extensions we use daily. I'd love to hear and try your favourite ones too. 😊

Once again a big shoutout to Tapas Adhikary for sharing his favourite ones. 😄

In easy words, fetch is nothing but a request to an API or Application Programming Interface. We use fetch to interact with an API. Or in more technical words,

Fetch is an interface through which JavaScript can make HTTP requests.

Here in this article, we'll use fetch to interact with some free APIs. We'll also use the COVID API by javieraviles to fetch total cases of Covid19.

✨ Why use Fetch?

The XmlHttpRequest or XHR can also be used to make asynchronous HTTP requests. But XHR is quite complicated to use. The fetch API is cleaner and flexible as it uses promises. Fetch is now supported by all modern browsers also. Though, one thing to keep in mind is that the promise returned by fetch will resolve even if the server responds with some error code.

🏅How to use Fetch?

As I've mentioned before, the fetch request will return a promise. A promise is resolved if the request is successful. If you are not familiar with promises, you can check some articles from this link.

Fetch Syntax

fetch('API Url')
    .then(response => {
    //Do something with the response
    }).catch(err => {
    // Handle the Errors
});

But in most of the cases, the first response from the server is pretty ugly. So, we parse it using the json() method which makes it easier to work with. But the json() method also returns a promise. So, we have to add another then to start working with the data. The catch() method is used to handle any error.

By default, the fetch api uses the GET method. Let's GET some data from the Covid API.

fetch(`https://coronavirus-19-api.herokuapp.com/all`)
  .then((res) => {
    return res.json();
  })
  .then((data) => {
    console.log(data);
  });

The const fetch = require("node-fetch"); is used to import a node.js package called node-fetch because fetch API is not implemented in NodeJS. But you don't need it to run your fetch API code into the browser.

This was pretty easy, right? Now, let's try to POST some data using fetch API.

🔔 Post Data Using Fetch

We'll use the reqres API to post data using fetch API. We can use all the HTTP methods with the reqres website.

To post data, we add another parameter to the fetch method which will be an object. We pass the method, body and header in the second parameter. Because by default fetch uses GET request, we have to explicitly declare the method which is something other than GET. The body will contain the data we are passing. The header will tell the application about the type of data we're sending and the type of data we'll accept in return.

We will send a post request to create a user in the reqres server. Let's see how we can do it.

First of all, we'll need a user object.

const user = {
    name: 'Captain Nemo',
    occupation: 'Pirate',
    email: 'captain@nemo.com'
}

Now we'll create another object to define the method, body and the type of headers.

const config = {
    method: 'POST',
    body: json.stringify(user),
    headers: {
        "Content-Type": "application/json",
        "Accept": "application/json" 
    }
}

We're almost done. The only thing left now is to use fetch to send the data. Our fetch method will look like this,

fetch('https://reqres.in/api/users', config).then(
  response => {
    return response.json()
  }
).then(data => {
  console.log(data);
})

Let's see what we get as an output.

First, we are sending our data to the server. Our method, body and headers are defined in the config object. Then the response is passed through the first then method which returns the data. And finally, we are using the data to console.log with the last then method.

The API sends us back the data with an ID and a timestamp.

🚩 Error Handling

There can be multiple reasons that a fetch request fails. Some can be,

• The website we are requesting is not found.
• We are not authorized to fetch
• Server error

An unhandled error can be a nightmare. The catch method is the rescue officer in such cases. The catch method can catch any error during the execution of the request.

We can use the ok property of response to check whether the response was successful or not.

fetch(`https://coronavirus-19-api.herokuapp.com/not-found`)
  .then((res) => {
    if (res.ok) {
      return res.json();
    } else {
      return Promise.reject(res.status);
    }
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => console.log('Error with message:', error));

So, we are trying to get data from a route which doesn't exist. We are implementing the ok method here to check if it resolves. Because the route is not available, the catch method catches the error and displays it using the console.log.

So, this is it about the JavaScript Fetch API for now. If you liked the article, please leave ❤ and write a comment. I'd love to here from you. ☺

We know that in JavaScript, we can pass functions as an argument into another function. These functions which take other function as an argument are known as Higher-Order functions. And the functions which are passed as an argument are known as a Callback function.

I've discussed three higher-order functions in this article. 🚀

JavaScript uses a single-threaded non-blocking event loop to provide concurrency. Which means, rather than waiting for a function to complete its execution, it'll execute other function on the event loop first.

Let's check an example,

let first = () => {
    console.log("I'll Run First");
}

let second = () => {
    console.log("I'll Run Second");
}

first();
second();

Output:

I'll Run First
I'll Run Second

This output was expected. What if the first function needs some time to execute? Suppose the first function is an API call, which takes more time than usual? Will our code work in the same top-down approach as before?

Let's create such an instance using the setTimeout() function. What setTimeout do is it evaluates an expression after a given time.

Example:

let first = () => {
 setTimeout(() => {
 console.log("I'll Run First");
 }, 500);
}

let second = () => {
 console.log("I'll Run Second");
}

What we are doing here is, we are delaying the first function by 500 milliseconds by calling the setTimeout() function.

If we call the function first and second in the previous order now, we should get the same result as before.

first();
second();

Output

But to our surprise, the second function will execute first this time. So, in this case, JavaScript didn't wait for the first function to complete, rather it executed the second function first. JavaScript doesn't always execute in the order they are called. This is because JavaScript is an event-driven language. We'll discuss the event loop in some future article.

But the key takeaway from here is we just can't hope that JavaScript will execute the functions in the order we called them.

Now, what if we want to complete a function execution and only then we want to jump to the next function? The callback comes to rescue here. ⛑

Callbacks make sure that another task doesn't run before a task is completed.

Creating a Callback 🎨

To create a callback function, we usually name the argument callback or cb and pass it as the last argument of the function. Let's see how we can modify our old code to a new callback function.

Example:

let callMeFirst = (callback) => {
  console.log("I'll run first");
  callback();
}

Or,

let callMeFirst = (callback) => {
  console.log("I'll run first");
  return callback();
}

Now our function is ready to accept a callback function. We can call another function as a parameter in our callMeFirst function now. And the other function passed as the second parameter will always be called after the first function executes.

callMeFirst(() => {
  console.log("I'll run second");
});

Here, we are passing an anonymous function as a parameter in the callMeFirst function.

Output:

Here, the callback function is an anonymous function. We can also define a named function and pass it as a callback.

Example:

let callMeFirst = (callback) => {
  console.log("I'll run first");
  callback();
}

let callMeSecond = () => {
  console.log("I'll Run second");
}

callMeFirst((callMeSecond));

Output

We just passed a named function as a callback in the above example.

I'd suggest using named functions over anonymous functions as callbacks because it makes the code more readable and also the named functions can be used anywhere in the code.

I hope this article put some light on your understanding of what are callbacks and how to use them. If you liked the article, or it helped you leave a ♥, share it and leave a comment. 😎

The ES6 introduced the concept of object destructuring along with other things like let, const, arrow functions. Object destructuring is a very useful feature in JavaScript. It extensively used in frontend framework like React as well as backend services like Node.js also. This article is focused to give you some knowledge about the object destructuring.

What is Destructuring?

Destructuring means extracting data from arrays or objects. With destructuring, we can break a complex object or array into smaller parts. Destructuring also gives us the ability to extract multiple data at once from an object or array. It also provides the ability to set a default value of the property if it's already not set.

Destructuring with Example

To understand the concept of object destructuring, we need to take an example in the count.

Suppose we have an object with the following key-value properties,

let person = {
 firstName: "Captain",
 lastName: "Nemo"
}

Before ES6, to use the values we needed to write code like this,

const firstName = person.firstName;
const lastName = person.lastName;
console.log(`Hi ${firstName} ${lastName}! Nice to meet you. 😄`);

It's a small object, but imagine we have a large object having a lot of key-value pairs, then to access the properties, our code will be very much repetitive and we don't want to disobey the God of DRY! 😅

To solve this issue, ES6 provides us with the power of destructuring. Using destructuring, we can easily extract the properties using the following code,

const { firstName, lastName } = person;
console.log(`Hi ${firstName} ${lastName}! Nice to meet you. 😄`);

This might seem confusing if you're seeing this for the first time. The first question that popped in my mind when I first saw the syntax for the first time was, why the curly braces are on the left? Is it a block? Or is it an Object?

Actually it's none of the both. It's just how destructuring syntax looks like.

Basically, it's just saying

Give me a variable called firstName and a variable called lastName from the object called person.

Destructuring a Nested Object

Object destructuring comes handier when we are working with a nested object.

Imagine an object like the below one,

const person = {
 firstName: "Captain",
 lastName: "Nemo",
 address: {
  street: "1234 Ave",
  city: "Antilaw State",
  zip: 1234
 }
}

To access the elements using the old approach, the code will be too much repetitive and will look very dirty.

console.log(person.firstName);
console.log(person.lastName);
console.log(person.address.street);
console.log(person.address.city);
console.log(person.address.zip);

Output

And now, let's take a look using the ES6 object destructuring,

const { firstName, lastName, address: { street, zip, city } } =  person;
console.log(firstName);
console.log(lastName);
console.log(street);
console.log(city);
console.log(zip);

This is clearly a better approach to access the elements. And moreover we have to write less lines.

There's a beautiful quotation I read in the Eloquent JavaScript Book about writing less code. Here it follows,

Tzu-li and Tzu-ssu were boasting about the size of their latest programs. ‘Two-hundred thousand lines,’ said Tzu-li, ‘not counting comments!’ Tzu-ssu responded, ‘Pssh, mine is almost a million lines already.’ Master Yuan-Ma said, ‘My best program has five hundred lines.’ Hearing this, Tzu-li and Tzu-ssu were enlightened.

Master Yuan-Ma, The Book of Programming

Storing Object Values to Custom Variables

Now, let's say we need to store the extracted properties to custom variables. We can also do this with the object destructuring. Suppose we want to store the firstName element of the person object to a variable called first and thelastName to a variable called last. This can be achieved using the following code,

const { firstName: first, lastName: last } =  person;
console.log(first);
console.log(last);

And yes, we can also extract only the elements we want. In the above code, we extracted only the firstName and the lastName from the object.

Destructuring Arrays

At the beginning of this article, I told you that we can use destructuring for arrays also. How?

Here's an example,

Suppose an array contains scores of a student in 3 subjects.

const scores = [85, 90, 74];

We can destructure the scores easily using the following code,

const [maths, geography, biology] = scores;
console.log(maths);
console.log(geography);
console.log(biology);

So, using the simple array literal to the left, we can destructure the array. The array elements are getting stored in local variables we defined. Each of the local variables will map with the corresponding array element.

Output:

Conclusion

I think this article has given you a quite understanding using the destructuring used in ES6. If this article helped you or you've feedback, please comment below. I'd love to hear from you. 😊